CODEWITHSUNDEEP
wordpresswoocommerce
Tanner Tattini
Tanner Tattini

Reputation: 196

Place text underneath product images WooCommerce

I am attempting to add text beneath the product gallery images of my Wordpress Woo-commerce site.

I have attempted to use the general scripts found online:

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>';
}

You can see in the following screenshot that the text appears here and not beneath the actual imageenter image description here

The website link this is referencing can be found at: https://www.tattiniboots.com/product/retriever/

Update: After trying the proposed solution below, the div text shows all the way at the bottom:enter image description here

I am attempting to get this div to appear here: enter image description here

The link I am working at is found here: https://www.tattiniboots.com/product/terranova/

Upvotes: 0

Views: 2414

Answers (1)

Krupal Panchal
Krupal Panchal

Reputation: 1545

You need to add style clear:both in your div. check the below code.

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; clear:both;">';
   echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
   echo '</div>';
}

Upvotes: 1

Related Questions