Custom text label on Woocommerce shop thumbnail images

Am using a
Woocommerce theme for a online shop.

Where i do like to display some custom text on top of each thumbnail.
Something like the following example. I understand that i have to fiddle with the archive-product.phpfile. And also i need to style the same.

Read More

Can someone point me in the right direction. Also is it possible to accomplish the same via Advance Custom Field Plugin?

Related posts

2 comments

  1. You should be able to accomplish this via ACF (Advanced Custom Fields). When you create the custom field you assign the post_type to a WooCommerce product.

    Then in the products loop you just make use of ACF’s get_field() to fetch it. Maybe you have to query the ID of each product and then insert it in ACF’s function like this: get_field('my_text', 123); (id = 123).

  2. As Gustaf said you can use ACF (Advanced Custom Fields) to do this really easily.

    You need to create a new custom field, that will be shown only on Woocommerce products.

    Choose a checkbox option and call it “Badges”. Then create some options to choose from. Eg “new”

    Then you need to add this piece of code into your functions.php file in your child theme. You actually need to target the content-product.php file in woocommerce which is part of the loop of archive-product.php

    function custom_badges() {
    
        // vars 
        $badges = get_field('badges');
    
        // check
        if( $badges && in_array('new', $badges) ):
        ?> <span class="new">New!</span> <?php
        endif;
    
        }
    add_action( 'woocommerce_before_shop_loop_item_title', 'custom_badges', 5 );
    

    Then if you check the new option in your product it will show on top of each thumbnail in the woocommerce shop function.

    To also add this text to the Single Product Page (single-product.php) page then add this line as well.

    add_action( ‘woocommerce_before_single_product_summary’, ‘custom_badges’, 5 );

Comments are closed.