[Support request] Add content under product image in single product page

[roadlink]

Hi,

I wonder if there is a way to add content under product image.

right here : https://prnt.sc/128zsub

https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

I tried something like this, but didn’t worked.
https://prnt.sc/128zw10

[roadlink]

This code works on desktop, but not on mobile.

<?php add_action(‘woocommerce_after_single_product_summary’, ‘html_below_thumbnails’, 9);
function html_below_thumbnails() { ?>

Some CONTENT HERE

<?php
} ?>

[David]

Hi there,

the woocommerce_product_thumbnails is a deprecated hook – its only available if the default gallery is removed.

I assume on mobile its in the wrong place ?

Tricky one to move it – if you can share a link to the site with the hook in place i can see what can be done…

[roadlink]

Hi David,

Thank you.
Below code adds some content but adds it on the very bottom.
Not just under thumbnails.

I put the link.

<?php add_action(‘woocommerce_after_single_product_summary’, ‘html_below_thumbnails’, 9);
function html_below_thumbnails() { ?>

Some CONTENT HERE
<?php
} ?>

[David]

Yeah – its terribly tricky to add anything in that area.

Try using this function:

// Add wrapper around image
add_action('woocommerce_before_single_product_summary', function() {
	echo '<div class="image-wrap">';
});
add_action('woocommerce_before_single_product_summary', function() {
	// Output your content here
	echo '</div>';
},50);

// Add wrapper around content
add_action('woocommerce_before_single_product_summary', function() {
	echo '<div class="content-wrap">';
},100);
add_action('woocommerce_after_single_product_summary', function() {
	echo '</div>';
},200);

You will see the line where to add your content ie. // Output your content here

It will also add a wrapper around the image and a wrapper around the content / summary to keep the layout on desktop – but it may require some CSS to manage the mobile layout.

[Author]

Posts