One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself. But…

If you’re familiar with WooCommerce customization and WooCommerce hooks (and specifically the ones of the Single Product Page), you’ll know it’s now impossible to add content under the image as it used to be done with the “woocommerce_product_thumbnails” hook.

In fact, the new gallery completely replaces the default content via JQuery, including that hook. Adding content is not as easy as it used to be. So, here’s the workaround (you might want to check how it behaves on mobile or maybe completely hide this for small devices – this has been tested on desktop only).

Add content below the WooCommerce Single Product Page images

PHP Snippet: Add Content Below the Gallery Images @ WooCommerce Single Product

/**
 * @snippet       Add Content Below the Gallery Images @ WooCommerce Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// Note 1: this works on Storefront theme, might need customization for other themes
// Note 2: class "woocommerce-product-gallery" is vital for inheriting CSS float left, margins and widths
 
add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
 
function bbloomer_add_below_prod_gallery() {
   echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em">';
   echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
   echo '</div>';
}
Share:

Leave a Reply