Customize Products Title for Woo Commerce Shop pageIf you are interested to create a Woo Commerce ECommerce Store using WordPress, chances are you will need to customize and modify a lot of default options. There are several ways to Customize Woo Commerce Shop pages. These include modifying the WordPress Theme Code, Finding an Extension Plug-in that does exactly you want, Define actions or filters to hook into the Woo Commerce templates, Modifying the template code itself e.t.c. Well I will never suggest to modify the theme code or the Woo Commerce plugin code because updates to the theme or plugin will wipe away any changes that you have made.

I wanted to write this post more for myself for future reference in case I forget in the future how to implement this. I will provide you with the example and the minor code change I made to achieve what I wanted to. I will show you how to Customize Products Title for Woo Commerce Shop page.

Customize Products Title for Woo Commerce Shop page

The first thing I did was added a new attribute in the Woo Commerce System to identify the products that will display the additional data on the shop page. I named this attribute “Temperature”

Then I looked at the Woo Commerce template code for the shop page to realize that I can use an existing hook that Woo Commerce is exposing. If you are looking for a complete list of Hooks (actions and filters) for Woo Commerce you can find it here:

I liked the action “woocommerce_after_shop_loop_item_title” very much as it was being output right after the title so I added this function in my child theme’s function.php. Make sure that if you decide to take a similar route you are working with a child theme to avoid any accidents.
Here is the code I added. For the prodcut I simply check if an attribute with the temperature is defined and output it if it is defined.

add_action( 'woocommerce_after_shop_loop_item_title', 'my_add_short_description' );
function my_add_short_description() {
global $product;
$temp = $product->get_attribute( 'Temperature' );
if ($temp != '')
echo "Temperature Range: ".$temp;

We offer Woo Commerce Customization at an affordable hourly rate and we will research the problem and come up with the best and simplest possible solution. IDesignSmart is a premium WordPress Solution Provider Company based in Atlanta.