Archived topic
Add content under product image in single product page
4 replies · Started by roadlink on April 29, 2021
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
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() { ?>
<?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.