WooCommerce Add Product-Unique Content Above Image On Loop Item

WooCommerce custom product meta data showing above loop item image


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About this Solution

There are two hooks which can be used to show content above the product image on the loop item: woocommerce_before_shop_loop_item and woocommerce_before_shop_loop_item_title. Each of these actions can have different priority values defining where specifically they’ll show. Advanced users may have the need to use both hooks and priorities but in this guide, we’ll focus on the one hook for simplicity. If you’re using WooCommerce to sell events, you may wish to show custom content, for example, the event date above the image on the loop item. With this guide, you can literally show any custom text you like above the image on the loop item which appears on the product archive page – and also as up-sells and cross-sells. This guide is split into two sections, the first is creating a custom field metabox for products which allows product-unique content to be shown. The second section is using the hook to show the custom meta data from the field in section one.

 * Snippet Name:     WooCommerce Custom Product Metabox For Content Above Image On Loop Item
 * Snippet Author:   ecommercehints.com

add_action ('woocommerce_product_options_advanced', 'ecommercehints_product_data_metabox');
function ecommercehints_product_data_metabox() {
   echo '<div class="options_group">';
   woocommerce_wp_text_input (array (
      'id'                => 'custom_loop_content_above_image',
      'value'             => get_post_meta (get_the_ID(), 'custom_loop_content_above_image', true),
      'label'             => 'Custom Loop Content',
	   'desc_tip'		     => true,
      'description'       => 'Text to appear above loop image'
   echo '</div>';

add_action ('woocommerce_process_product_meta', 'ecommercehints_save_field_on_update', 10, 2);
function ecommercehints_save_field_on_update ($id, $post) {
      update_post_meta ($id, 'custom_loop_content_above_image', $_POST['custom_loop_content_above_image']);

add_action( 'woocommerce_before_shop_loop_item_title', 'ecommercehints_woocommerce_before_shop_loop_item_title', 1, 0 );
function ecommercehints_woocommerce_before_shop_loop_item_title() {
global $product;
$custom_loop_content_above_image = $product->get_meta ('custom_loop_content_above_image');
echo $custom_loop_content_above_image;
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers