CODEWITHSUNDEEP
phpcsswordpresswoocommerce
Aroganz
Aroganz

Reputation: 114

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.

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

Upvotes: 1

Views: 4447

Answers (2)

Clyde Thomas
Clyde Thomas

Reputation: 401

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 );

Upvotes: 1

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

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).

Upvotes: 1

Related Questions