Extend Elementor Archive Posts widget with a custom skin in order to show multiple badges

I modified my posts widget in Elementor with a custom skin in order to show multiple badges with following code:

/* MULTIPLE BADGES ON POST */
/* --- */
add_action( 'elementor/widget/posts/skins_init', function( $widget ) {
  
    class cards_multi_badge_skin extends ElementorProModulesPostsSkinsSkin_Cards {
        protected function render_badge() {
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) ) {
                return;
            }
            $terms = get_the_terms( get_the_ID(), $taxonomy );
            if ( ! is_array( $terms ) ) {
                return;
            }
            ?><div class="elementor-post__badges"><?php
            foreach( $terms as $term ) : ?>
                <div class="elementor-post__badge"><?php echo $term->name; ?></div>
            <?php endforeach; ?>
            </div>
            <?php
        }

        public function get_id() {
            return 'cards_multi_badge';
        }

        public function get_title() {
            return __( 'Cards Multi Badge', 'elementor-pro' );
        }
    }

    // register the skin to the posts widget
    $widget->add_skin( new cards_multi_badge_skin( $widget ) );
} );

This leads to following result:

Now, I’m trying the same for the archive posts widget in Elementor with following code:

/* MULTIPLE BADGES ON ARCHIVE POST */
/* --- */
add_action( 'elementor/widget/archive-posts/skins_init', function( $widget ) {
  
    class cards_multi_badge_skin extends ElementorProModulesArchive_PostsSkinsSkin_Cards {
        protected function render_badge() {
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) ) {
                return;
            }
            $terms = get_the_terms( get_the_ID(), $taxonomy );
            if ( ! is_array( $terms ) ) {
                return;
            }
            ?><div class="elementor-post__badges"><?php
            foreach( $terms as $term ) : ?>
                <div class="elementor-post__badge"><?php echo $term->name; ?></div>
            <?php endforeach; ?>
            </div>
            <?php
        }

        public function get_id() {
            return 'cards_multi_badge';
        }

        public function get_title() {
            return __( 'Cards Multi Badge', 'elementor-pro' );
        }
    }

    // register the skin to the posts widget
    $widget->add_skin( new cards_multi_badge_skin( $widget ) );
} );

However, this code does not work?
Anybody who has an idea what I’m doing wrong?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I have the same problem and just find out that you need to extend from. ElementorProModulesThemeBuilderSkinsPosts_Archive_Skin_Cards rather then ElementorProModulesPostsSkinsSkin_Cards

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0