My Courses > CustomizeWoo > Module 4 > Lesson 03: Single Product Page: ADD Content (Free)
Single Product Page: ADD Content (Free)
This is how to add content to the single product page by using the visual hook guide. Always start from displaying some simple “TEXT” in the correct position, and then make your functions more complex. A little win is better than hours spent troubleshooting.
Video
Please note: English captions are enabled by default (click on “CC” in the video player to disable). Also, you can click on the “gear” icon to manage quality and playback speed. Enjoy!
If you already enrolled in this course, please LOG IN
Otherwise, please enroll in the FREE / PRO COURSE
For any other queries, feel free to get in touch
Useful Links
WooCommerce Visual Hook Guide: Single Product Page
Related Snippets
WooCommerce: Add Content Below the Single Product Page Images
WooCommerce: Add Next/Previous @ Single Product Page
WooCommerce: Display Content Above Add to Cart @ Single Product Page
WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input
WooCommerce: “Is This a Gift?” Checkbox @ Single Product Page
WooCommerce: Add an Icon to the Add to Cart Buttons
WooCommerce: Order a “Free Sample” @ Single Product Page
WooCommerce: “Continue Shopping” Button @ Single Product Page
WooCommerce: POA / Call for Price Button @ Single Product Page
WooCommerce: Display Advanced Custom Fields @ Single Product
WooCommerce: Add “Quantity” Label in front of Add to Cart Button
WooCommerce: Product Enquiry Form @ Single Product Page (CF7)
WooCommerce: Add RRP / MSRP to Products (Without a Plugin)
WooCommerce: Show Published Date @ Single Product
WooCommerce: Show Number Of Products Sold on Product Page
40 thoughts on “Single Product Page: ADD Content (Free)”
_____
If you are writing code, please wrap it between: [php]code_here[/php]
I really enjoy your style of teaching, Rudolfo. Some of what you have gone over, I have “kind of known” but in the past it’s “Let’s google for a solution…”
Your course is giving me more ability to come up with my own solutions to things and be able to be more confident about providing things a client might ask for.
I do have a question – maybe it’s answered in a later module – but is there a way to customize the single product page for certain products in this manner, or for certain categories?
For example if we are having a “Buy 3 Get 1 Free” offer of any item in a category, it would be great to have an image or text show up below the add to cart button for those pages/categories – but not on all product pages.
Thank you Ian! Yes, there is a lesson dedicated to “Conditional Logic”, and that will teach you how to apply functions to specific products/categories only
And how can I display the value of the custom field on the admin order edit page?
Sorry for the delay, Ricky. This tutorial is about the frontend, so it won’t cover that.
If you use ACF or a custom field plugin, it should display info in the order item meta out of the box.
If you do that via custom code, on the other hand, it may show as well as long as the code is properly written.
What do you need to display there, actually?
Hello,
I would like to add two product meta data at single product just like SKU.
Manufacturer Name:
Part Numer:
And then, want the flexibility to import product via .CSV with Manufacturer Name and Part Number for my bulk products, similarly to SKU.
PLEASE GUIDE ME.
Hello Naurej, please check this example and let me know: https://www.businessbloomer.com/woocommerce-display-rrp-msrp-manufacturer-price/
How to hide WooCommerce price for specific product?
Hello Aan! You will need a couple of things:
1) “conditional logic”: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/
2) lesson on how to remove content: https://www.businessbloomer.com/lesson/cuwm4l04/
Hope this helps!
Hi Rodolfo,
My theme is not showing product meta automatically on single product pages. I would like to show Categories and Tags (but not SKU’s). What would the snippet be to display those?
Thanks!
Marc
Hi MArk, you can “get” product info by looking at these functions: https://www.businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/. Then, with a hook, you can make them show where you wish
Hello Sir,
if we want write custom text between each of the variations for a variable product , where we have product attributes and image swatches as well.
so between those swatches I would like to add the text.
How can i achieve that?
Hi Hedge, that would depend on the variation swatches plugin you use, as that’s not default WooCommerce
Hey Rodolfo, I noticed that the priorities in (for example) wc-template-hooks.php match the order in which elements appear. E.g. on the single product page in the summary the title appears first and has a priority of 5, then price appears and has a priority of 10, etc. Does this mean I can change the order of how things appear simply by changing the priority?! Or is that to good to be true? 😉
Also – learning that I can use a shortcode nearly anywhere blows my mind! So many possibilities… so exciting!
Yes, absolutely 🙂
If you watch the “REMOVE Content” lesson, you will learn how to remove it. Then, you can ADD it back with a different priority and therefore manage the order of how things appear.
Enjoy!
I’m attempting to do this on my website, but for some reason, it’s not working correctly… Instead of the ending where it’s supposed to when using the ‘woocommerce_before_add_to_cart_form’ hook it’s adding all of the information below it within my beginning . If you could please assist me, that would be great.
add_action('woocommerce_before_add_to_cart_form', 'add_product_question'); function add_product_question() { if ( is_product() ) { echo '<div class="question-section">'; echo '<div class="ask-question"><p><strong>Need Help?</strong> <a class="question-link" data-remodal-target="modal" href="#">Ask a Question</a>.</p></div>'; echo '<div class="remodal" data-remodal-id="modal"> <button data-remodal-action="close" class="remodal-close"></button> <h3 class="question-headline">Ask a Question</h3> <div class="question-box"><p class="question-text">Submit your question about this or any other Aqua Hair Extensions products, and one of our team members will contact you!</p></div>'; echo do_shortcode('[gravityform id=5 title=false ajax=true]'); echo '</div>'; }Hi Robert, do you have a screenshot I can look at?
I really very thankful to you because you are making a source to earning to needy people. This very very helpful to all views….
Thanks!
Hi,
Thank you very much for providing such amazing info. It rally is a lifesaver for me. I have been able to solve 3 of my 4 single product page headaches.
Can you help with the final one?
The product descriptions are long with numerous images, images I don’t want to get rid of. This makes my product pages long and a headache to reach the top from buttom and buttom from top. Any way to put the description in a box that is static? The description scrolls through inside this box.
Thanks 🙂 You can use CSS max-height and overflow: https://www.w3schools.com/cssref/pr_dim_max-height.asp
Hi there, is it also possible to display a revolution slider above a single product?
Yes of course! Use https://developer.wordpress.org/reference/functions/do_shortcode/
Hello Rodolfo, I have to say your website & videos courses educated huge time over and over!
I have a quick question.
I would like to switch my “options variations” & “quantity with add to cart button” from the middle page to my side bar on the right of any single product page.
Could you point me in the right direction or send me out a quick hooks?
Thank you for doing what you do! Your amazing Rodolfo!
Pierre.
Hello Pierre, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hi, thanks for your amazing video and your time you have spent for your Visual Hook Guide Series.
Could you tell me, please, what Default Action to present Single Product description is?
I do like this:
add_action( 'woocommerce_product_thumbnails', 'themeprefix_woocommerce_template_product_description', 90 ); function themeprefix_woocommerce_template_product_description() { wc_get_template( 'single-product/tabs/description.php' ); }but no matter what number (50, 100 or 200) I use, the description is to close to woocommerce_product_thumbnails.
Hey Ava 🙂 Where exactly do you want to place the description?
how can i change variable option into button?
Thanks for your comment! Try here: https://businessbloomer.com/display-woocommerce-variations-color-size-buttons/
Any Option add sortcode after add to cart button
Hey there, thanks for your comment! Yes, by using one of the hooks in this video, you can then echo any shortcode you like with this WordPress function: https://developer.wordpress.org/reference/functions/do_shortcode/
Hi, Thanks for your great video.
I want to remove the tab button (just the button, Not the content)
I use Elementor page builder to change the product page. it changes the description part of a product. and the description part is in a tap section. how can I remove this tab to show the description part as a full content (not a tab!)
Best regards
Hello there, thanks for your comment 🙂 I don’t use Elementor so I’m not 100% sure. If it’s still WooCommerce that outputs those tab titles, you should look into hiding the “ul” that contains them – maybe with CSS if you’re not familiar with PHP. Hope this helps
Hi Rodolfo,
all your tutorials are based on storefront theme. is there anything generic we could use for woocommerce with Divi Theme and Divi Builder.
Hi there 🙂 All my tutorials are based on Storefront, which uses default WooCommerce functions (apart from some exceptions). Divi, on the other hand, heavily customizes WooCommerce and overrides many functions – snippets won’t work unless hooks and function names are edited to match Divi’s PHP. Good luck!
Hi Rodolfo, thank you for a great tutorial! I use Advanced Custom Fields on my company website and would like to display it on my single product page. I tried to include it inside my function but cannot get it to appear on my page. The fields will display in the product backend for me to fill in but I cannot get it to show up on the page. I had to modify my single.php child theme file to let it show up on all posts with a category of “training” and it works well. Looks like I will have to do the same with the single product page or is it possible to do it with an “add-action” script?
Hello Jaco – thanks so much for your comment! Try looking at https://businessbloomer.com/woocommerce-display-advanced-custom-fields-single-product/
Hi Rodolfo,
All your videos are very helpful and very easy to understand the customization of woocommerce. As a very new to website customization, it was very helpful for me to learn and execute the things.
I want to add a numeric input field such as Zip Code with submit button where on clicking to submit it will display like “Delivery available in your area” with fadeout after some time. I can add the html form easily but how to include the script to display the message. I tried
add_action('woocommerce_before_add_to_cart_form','woocommerce_below_short_description'); function woocommerce_below_short_description() { echo '<div class="location-check"> <h2>Check Product Availability in your Location</h2> <span id="sucess2" style="display:none; color:#F00; text-decoration:none; font-weight:bold;">Delivery Available in Your Area</span> <form id="locationcheck-form" name="myForm" method="POST" action class> <div class="mobile1"> <img src="https://lavishcollections.in/wp-content/uploads/2018/02/icn_mob.png" alt="Mobile"> <input type="tel" id="number" placeholder="Enter Mobile Number" required name="phone"> </div> <div class="pincode1"> <img src="https://lavishcollections.in/wp-content/uploads/2018/02/icn_loca.png" alt="Pincode"> <input type="tel" id="pincode" placeholder="Enter Pincode" required name="pincode"> </div> <input type="hidden" name="fetchtype" value="Pincode Availability"> <div class="submit-form"> <input type="submit" id="check" value="check"> </div> <div class="next-day-delivery"> <div class="leftside"> <img src="https://lavishcollections.in/wp-content/uploads/2018/02/next-day.png" alt="Next Day"> </div> <div class="may-be-available"> <p>May be available. Enter pincode to check these options.</P> </div> </div </form> </div>'; } <script type=""> $(document).ready(function(){ $('#locationcheck-form').on('submit',function(e) { $.ajax({ //url:'pincodecheck.php', url:'v3_mkt_prcr.php', data:$(this).serialize(), type:'POST', success:function(data){ console.log(data); $("#success").show().fadeOut(25000); }, error:function(data){ $("#error").show().fadeOut(25000); } }); e.preventDefault(); }); }); </script>Hello Kumar, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
Hi
Very interesting video and great to starters for someone who is new to hooks and actions and now filters.
I do have an issue remaining for which I could not find an answer for in your video.
I want to add text after the price (not part of the price) that says: “(To view wholesale prices, login to your wholesale account)”. I tried the following without success:
// add text after price add_filter( 'woocommerce_get_price_html', 'custom_price_message' ); function custom_price_message( $price ) { $new_price = $price . ' ' . _('(To view wholesale prices, login to your wholesale account)').''; return $new_price; }I would have expect the above to display my text below the price without affecting the price field (which if I have variable prices, the price field gets split into 2 lines).
Can you provide any guidance on the above code snippet or figure out why it does not work as expect?
Much appreciated,
Lyse
Hey Lyse, thanks for your comment, and great question! See, your goal is to ADD content to the single product page, so instead of add_filter you would want to use add_action and echo your message (instead of “return”).
To pick the right position, check my hook guide: https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/
Then, do something like:
add_action( 'your_position_here', 'your_function_here' ); function your_function_here() { echo 'your_message_here'; }Hope this helps 🙂