WooCommerce: Add Custom Data to the Shop Screen

In the comments section for the The Ultimate Guide to Woocommerce Shortcodes (WITH GENERATORS)  post someone has asked a question about adding custom data to the pods on the shop screen, the person who asked the question mentioned the possibility of using a plugin but it’s possible to add extra data to the pods using a code snippet.

In this article we’ll take a look at how to do that.

How to Add Custom Data to the Pods on the Shop Screen

There are five different actions that are called during the creation of each shop pod, here’s the list

woocommerce_before_shop_loop_item
woocommerce_before_shop_loop_item_title
woocommerce_shop_loop_item_title
woocommerce_after_shop_loop_item_title
woocommerce_after_shop_loop_item

If you want to add text somewhere in the shop pod then you need to identify the area you want to add the text to, and then hook a function into the correct action using the add_action function.

The action names are reasonably descriptive so you might be able to tell which action you need from the names, but just to help you here’s some code that will print the action names in the shop pods, it should then become clear which action you require. The code also gives examples of how you can hook into each action.

function hwn_woocommerce_before_shop_loop_item() {
    echo "woocommerce_before_shop_loop_item";
}
add_action( 'woocommerce_before_shop_loop_item', 'hwn_woocommerce_before_shop_loop_item');

function hwn_woocommerce_before_shop_loop_item_title() {
    echo "woocommerce_before_shop_loop_item_title";
}
add_action( 'woocommerce_before_shop_loop_item_title', 'hwn_woocommerce_before_shop_loop_item_title');

function hwn_woocommerce_shop_loop_item_title() {
    echo "woocommerce_shop_loop_item_title";
}
add_action( 'woocommerce_shop_loop_item_title', 'hwn_woocommerce_shop_loop_item_title');

function hwn_woocommerce_after_shop_loop_item_title() {
    echo "woocommerce_after_shop_loop_item_title";
}
add_action( 'woocommerce_after_shop_loop_item_title', 'hwn_woocommerce_after_shop_loop_item_title');

function hwn_woocommerce_after_shop_loop_item() {
    echo "woocommerce_after_shop_loop_item";
}
add_action( 'woocommerce_after_shop_loop_item', 'hwn_woocommerce_after_shop_loop_item');

Once the code snippet above has been added to a WooCommerce store, the each shop pod should look something like this

It’s unlikely that you’ll ever use the code on a production site, but hopefully it will give you an idea of what action you need to use to add some extra data. Hopefully, you’ll also be able to adapt it to your needs.

If you want to change the fonts etc of the text displayed you would need to use additional CSS to style the pods.

If you have any questions about this then please don’t hesitate to let me know in the comments.