Support » Plugin: WooCommerce » Add image on product page above Add to Cart

  • Resolved thevapourroomltd

    (@thevapourroomltd)


    Hi,
    I am quite new to website design and I’m trying to add an image on the product page (outside of the product images, preferably above the Add to Cart button). It only needs to be on specific product pages so ‘Edit Single Product’ isn’t working for me. I know nothing about coding so if there is a solution that doesn’t involve coding, or if it needs to use code if someone could provide a step by step for how to add it, that would be great!

    What I am trying to add is similar to what has been done on the website example used in this video, shown at 17:30.

    Ideally I would like the image to appear when the user clicks on ‘subscribe’ but at this point I’ll settle for getting it on the website!
    Thanks in advance!

Viewing 11 replies - 1 through 11 (of 11 total)
  • seank123

    (@seank123)

    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 months ago by seank123.
    • This reply was modified 2 months ago by seank123.
    Thread Starter thevapourroomltd

    (@thevapourroomltd)

    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!

    seank123

    (@seank123)

    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!

    Thread Starter thevapourroomltd

    (@thevapourroomltd)

    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!

    seank123

    (@seank123)

    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.

    Thread Starter thevapourroomltd

    (@thevapourroomltd)

    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?

    seank123

    (@seank123)

    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?

    Thread Starter thevapourroomltd

    (@thevapourroomltd)

    Thank you I’ll have a look!

    Here’s a link.

    seank123

    (@seank123)

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

    Thread Starter thevapourroomltd

    (@thevapourroomltd)

    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.

    seank123

    (@seank123)

    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’

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.