Help me add badges in product listing page depending on product tag

I need to add badges on products of the shop page. And the badges need to show depending on product tags.

  • Ohidul Islam
    • Staff

    Hello Etienne,

    Thanks for coming to our support, hope you are having a good day :slight_smile:

    I have added that feature of product badges into your website. Please check this on your website.

    To do this, I have added some functions at the end of the child themes functions.php file. Which is

    //
    // Add badges into products depending on product tags
    //
    function ultratek_add_product_badge() {

    $terms = get_the_terms(get_the_ID(), 'product_tag' );

    $term_array = array();
    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
    foreach ( $terms as $term ) {
    $term_array[] = $term->slug;
    }
    }

    $allowed_tags = array('platinum', 'classic', 'supreme');

    $result = array_intersect($term_array, $allowed_tags);

    $the_badge = $result[0];

    printf(
    '<span class="product-listing-card__sup-ribbon"><img src="%s" alt="%s badge" /></span>',
    get_stylesheet_directory_uri() . '/assets/'. $the_badge .'.svg',
    $the_badge
    );

    }
    add_action( 'woocommerce_before_shop_loop_item', 'ultratek_add_product_badge' );

    I have also added some custom CSS codes into Appearances -> Customizer -> Additional CSS box.

    .product-listing-card__sup-ribbon {
    height: 52px;
    width: 41px;
    position: absolute;
    top: -7px;
    right: 10px;
    }

    Hope this helps, let me know if you need any more assistance.

    Kind regards,

    Ohid

  • Ohidul Islam
    • Staff

    Hello Etienne,

    I have edited the code and it will only show the badge when there’s required tags. Please replace this code below.

    //
    // Add badges into products depending on product tags
    //
    function ultratek_add_product_badge() {

    $terms = get_the_terms(get_the_ID(), 'product_tag' );

    $term_array = array();
    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
    foreach ( $terms as $term ) {
    $term_array[] = $term->slug;
    }
    }

    $allowed_tags = array('platinum', 'classic', 'supreme');

    $result = array_intersect($term_array, $allowed_tags);

    $the_badge = $result[0];

    printf(
    '<span class="product-listing-card__sup-ribbon"><img src="%s" alt="%s badge" /></span>',
    get_stylesheet_directory_uri() . '/assets/'. $the_badge .'.svg',
    $the_badge
    );

    }
    add_action( 'woocommerce_before_shop_loop_item', 'ultratek_add_product_badge' );

    Also, if you wish to change the badge image then you doesn’t need to up change any line of code. I made it super simple. If you please look at the Child themes assets folder, you will see there’s 3 svg badge images with corresponding names. Just upload your new badge image there and use the same badge name it was before there. So you will see the badge will update automatically.

    Cheers!

    Ohid

    • Etienne
      • Design Lord, Child of Thor

      Hello Ohidul Islam

      Thank you so much for pointing out where I can change the icons!

      But the code you have me there seems to be the exact same one as the previous one. Well I added the new code to my functions file and the products with no tags still show an error media icon.

      Please let me know. Thanks again :slight_smile:

  • Ohidul Islam
    • Staff

    Hi,

    Sorry to see that the code I shared was the same with previous. SOmehow it was a mistake.

    I have added the updated code here now, please replace this code with the previous one and let me know if this works now.

    //
    // Add badges into products depending on product tags
    //
    function ultratek_add_product_badge() {

    $terms = get_the_terms(get_the_ID(), 'product_tag' );

    $term_array = array();
    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
    foreach ( $terms as $term ) {
    $term_array[] = $term->slug;
    }
    }

    $allowed_tags = array('platinum', 'classic', 'supreme');

    $result = array_intersect($term_array, $allowed_tags);

    $the_badge = $result[0];

    if ( ! empty( $the_badge ) ) {
    printf(
    '<span class="product-listing-card__sup-ribbon"><img src="%s" alt="%s badge" /></span>',
    get_stylesheet_directory_uri() . '/assets/'. $the_badge .'.svg',
    $the_badge
    );
    }

    }
    add_action( 'woocommerce_before_shop_loop_item', 'ultratek_add_product_badge' );

    Cheers!

    Ohid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.