Site logo

Archived topic

Add content under product image in single product page

4 replies · Started by roadlink on April 29, 2021

Viewing posts 1–5 of 5

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
} ?>

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...

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
} ?>

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.

This archived topic is closed to new replies.