Add image on product page above Add to Cart
-
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!
-
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"]');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!
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!
- The topic ‘Add image on product page above Add to Cart’ is closed to new replies.
