Tagged: image, single product page
Hi,
I’d like to add an extra image to the single product pages (see example in private content). How do I go about doing this?
Thanks
Wendy
Hi johniem!
Add it to the product description and then send us a link to your page and we’ll give you some CSS to move it.
Regards,
Elliott
Hi,
I’ve added it to the product description. Link in private content.
Thanks,
Wendy
Hi!
Hmm, well it looks like the description area is not going to work because the tabs need overflow: hidden so we cannot move stuff out of it.
Have you considered using the advanced layout editor for the product? You can add the elements in manually by clicking on the “Plugin Additions” tab in the layout builder.
We could use a filter such as “woocommerce_before_single_product” to add it in and this wouldn’t be a problem if it was just one product but if you want to use it on a lot of different products then it would be a problem.
Regards,
Elliott
Hi,
Thanks for that. The advanced editor doesn’t really help with this, as I can’t move the image out of the description field. Is there any other way to have an image on that specific place for all products?
Wendy
Hi!
Well if it’s the same image for each product then add this to the bottom of your functions.php file.
add_action( 'woocommerce_before_single_product_summary', 'enfold_customization_product_image' );
function enfold_customization_product_image() {
echo '<div class = "customization_image"><img src = "#" /></div>';
}
And then add this to your custom CSS.
.customization_image {
position: absolute;
right: 0;
top: 100px;
}
Best regards,
Elliott