CSS would allow you to put a background image to an html element, but there isn’t one in a suitable position, so you would need to use the hook you mentioned to insert an html element. But if you’re going to use the hook, you might as well use it to insert the image, so:
add_action( 'woocommerce_after_single_product_summary', 'insert_image' );
function insert_image() {
print '<img src="https://my-domain.co.uk/dev/wp-content/uploads/my-image.jpg">'.PHP_EOL;
}
The code goes in functions.php for your child theme or you can try a PHP snippets plugin.
But if you insist, use:
add_action( 'woocommerce_after_single_product_summary', 'insert_image' );
function insert_image() {
print '<div id="my_image_div"></div>'.PHP_EOL;
}
then the css would be:
#my_image_div {
width: 100px;
height: 100px;
background-image: url("https://my-domain.co.uk/dev/wp-content/uploads/my-image.jpg");
}
For more styles to manage your image, see:
https://www.w3schools.com/cssref/css3_pr_background.asp
Hey Lorro. Thanks for your reply!
I went with your second option and have successfully added the image using the CSS however, I have a slight issue.
The image is inserted right down the bottom of all the other content. How can I change its priority so that it appears right at the top?
Cheers.
-
This reply was modified 4 years, 2 months ago by
jaket89.
Hello,
The image is inserted right down the bottom of all the other content. How can I change its priority so that it appears right at the top?
I suggest you look into the CSS z-index property: https://www.w3schools.com/cssref/pr_pos_z-index.asp
You can see this link for an example on using the z-index and background properties together: https://stackoverflow.com/questions/63811418/could-background-color-have-different-z-index-than-img
And also find here another example for inserting and positioning images in a div with CSS: https://stackoverflow.com/questions/10829675/how-to-put-an-image-in-div-with-css
Hope this helps!
When you say “right down the bottom” do you mean its covered over by other content, in which case the z-index property needs changing as described in the previous post, or do you mean you can see it but its lower down the page than you would like? In this case, the hook may not be exactly the right one for your case.
‘woocommerce_after_single_product_summary’ will come after the tabs (which include description and additional information) and above any upsells and related products.
There are many possible positions where your image could go, please explain exactly where you want it. A link to your sample page would be helpful.
Sometimes themes can change the name and position of hooks, so please say which theme you are using.
This thread has been inactive for a bit, so I’m going to mark it as closed. Hopefully, the above information was helpful!
Feel free to open a new thread if you have any other questions.
