WooCommerce Add Product-Unique Content Below Loop Item Image

WooCommerce custom product field data displaying between image and title on loop item


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

Showing product-specific content below the image on a loop item is really easy. In other words, if you want to show content, unique to each individual product below the product featured image on the product loop which appears on the product archive template among other places, this guide is for you. This solution creates you a custom product editor metabox to enter custom text, then displays it under the product image.

 * Snippet Name:     WooCommerce Custom Product Metabox For Content Below 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_below_image',
      'value'             => get_post_meta (get_the_ID(), 'custom_loop_content_below_image', true),
      'label'             => 'Custom Loop Content',
      'description'       => 'Text to appear below 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_below_image', $_POST['custom_loop_content_below_image']);

add_action( 'woocommerce_shop_loop_item_title', 'ecommercehints_woocommerce_shop_loop_item_title', 1, 0 );
function ecommercehints_woocommerce_shop_loop_item_title() {
global $product;
$custom_loop_content_below_image = $product->get_meta ('custom_loop_content_below_image');
echo $custom_loop_content_below_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