Add image on product page above Add to Cart

Use hooks – nicely described here

I use the Code Snippets plugin – makes it very easy to add code.

In their first example they are just adding text: echo '<p>Some custom text before</p>';

But you can also use HTML instead – for example:

echo '<img src="https://yourdomian.com/image.jpg" />';

You may even be able to use shortcodes to make it easier to edit the content later – for example, I use Beaver Builder and have this saved row that I can edit:

echo do_shortcode('[fl_builder_insert_layout slug="woocommerce-checkout-paypal-notice"]');

• This reply was modified 2 years, 2 months ago by seank123.
• This reply was modified 2 years, 2 months ago by seank123.

Thanks for your reply! So if I was to enter this:

add_action( 'woocommerce_before_add_to_cart_button', 'mish_before_add_to_cart_btn' );

function mish_before_add_to_cart_btn(){
	echo '<p>Some custom text before</p>';
}

how would I change the ‘some custom text before’ to an image from my files on my computer? Or have I got that wrong?

I found a website that said the HTML code to insert an image would look like this:

<img src="/path/to/image-name.jpg" alt="Alternate File Name"/>

Would I just enter that instead of ‘some custom text before’ and change the image name to the name of the file?
Also, am I entering this code into my child theme editor, functions.php, or would I need to use the Code Snippets plugin you mentioned? How would I make it only work on specific posts, I saw about a get_the_ID() function but unsure how that would work/where I would need to use it.

Sorry if any of these questions are stupid, I am completely clueless when it comes to code!

• This reply was modified 2 years, 2 months ago by thevapourroomltd.

You would need to upload the file into the WordPress media library – then copy the URL from there: https://www.wpbeginner.com/beginners-guide/how-to-get-the-url-of-images-you-upload-in-wordpress/

Then use that in the tag – it will look something like:

<img src="https://yourdomain.com/wp-content/uploads/2022/09/image.jpg" alt="Alternate File Name"/>

Replace the <p>Some custom text before</p> bit with the HTML code for the image.

You can use either the child theme or the Code Snippets plugin – but I would definitely recommend using the plugin if you are unsure of what you are doing! If you do something wrong in the function.php file you can very easily kill your website!

It partially worked – instead of the image it put the URL of the image above Add to Cart.
I entered:

add_action( 'woocommerce_before_add_to_cart_button', 'mish_before_add_to_cart_btn' );

function mish_before_add_to_cart_btn(){
	echo '<img src="https://thorjuice.co.uk/wp-content/uploads/2022/09/subscribe-and-save-widget-with-savings-2.jpg" alt="Alternate File Name"/>';
}

So it is reading it as text rather than an image. What would I change to make it an image? Also, how would I make it only apply to specific product pages, I found something called get_the_ID() function on a website but unsure how that would work/where I would need to use it. Thank you for your help so far, I feel like I’m making progress!

Strange – it works when I added it with the Code Snippets plugin here

You could use TAGS to turn this on/off:

add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_single_tag_slug' );
 
function bbloomer_single_tag_slug() {
 
if ( has_term( 'subscription', 'product_tag' ) ) {
	echo '<img src="https://thorjuice.co.uk/wp-content/uploads/2022/09/subscribe-and-save-widget-with-savings-2.jpg" alt="Alternate File Name"/>';
} 

}

Just add a tag called subscription to any product you need it to appear on.

Have a look here – the bird crate has the tag, the cat doesn’t.

Ah that’s worked perfectly! Not sure what was going on before but it’s working now, thank you so much! Just one more question (okay maybe two) then I’ll let you go, I really appreciate you taking the time to help me! Is there a way to make it bigger on the page, would I need to edit in Elementor or would it be more code? And lastly do you know if I can make it appear when the user clicks the subscribe option, almost like a slide down?

No problem.

You can add width/height sizes in the HTML code – here

Can you let me have a ,link to a product with the image on?

Thank you I’ll have a look!

Here’s a link.

Had a look and can’t see a way of doing it.

That’s fine thank you anyway! It’s on the website so you’ve helped me massively! I’ll open a new thread for that specifically. Thank you for all your help, have a great day.

Just a thought – it might be worth contacting the support for the subscription plugin you’re using – they may have a hook that you can use instead of ‘woocommerce_before_add_to_cart_button’