A good way to inform online customers and avoid issues is showing the estimated delivery / dispatch time on the single product page, just below the “Add to Cart” button. Yes, you could do that manually by adding shipping info to each product short description, but the goal of Business Bloomer is to learn how to code that instead, so you won’t need to write things manually.
Also, this is great because if you change something in your dispatch rules, you just need to change the short PHP snippet and not all your product descriptions. It’s much more flexible this way.
Finally, in this post we’ll learn how to work with cut-off times (hour of the day) and current day of the week (pure PHP), so that we can show a “dynamic” notice based on current date. So, let’s see how it’s done!
The standard layout for the WooCommerce single product page features the main/featured product image on the left and the title/add to cart on the right. But what if you need to turn that image into a hero one i.e. a full width featured image, and push the title and add to cart button under it?
Well, for once, we’ll take a look at a CSS-only snippet. Sometimes the easiest things are also the ones that work brilliantly. Enjoy!
SKU, Category list and Tag list on the WooCommerce single product page are called “product meta”. We already saw how to hide just the SKU (while leaving Cats and Tags there), so in this “episode” we will study how to do the opposite i.e. keeping the SKU there while hiding Cats and/or Tags.
If you are a developer, you’d think there were a specific WooCommerce “filter” for this, but there is not. So, we have to first remove the whole “product meta” block and then add back the info we want (just the Cats, for example). If you’re not a dev – not to worry – just copy paste one of the snippets below in your functions.php and magic will happen. Enjoy!
If you sell one-off products like online courses, lifetime memberships or unique pieces that can only be purchased once by a given customer, maybe you’d better redirecting the logged in customer who has purchased that product to a custom URL, such as the shop page, the “my courses” page for online courses or another customer-specific section.
With this easy snippet you’ll learn how to see if a user is logged in and has purchased a given product ID and then how to do a safe PHP redirect. Enjoy!
Depending on your theme, just creating an href link anchor to a product tab might or might not work i.e. it might not scroll to it as it’s currently closed.
Here comes a way to create href links that not only scroll to the tab, but also open it in case it’s closed (this will guarantee the anchor scroll to the tab). Also, a little jQuery “animate” will provide the smooth scroll and enhance UX. Hope you enjoy!
Keeping WooCommerce upsells at the very bottom of the single product page it’s kinda boring. In my view, WooCommerce users want to know there are upsells even before they scroll down (you also might want that: upsell means more profit). Amazon does that too.
In this tutorial, we will see not only how to move them to the top, right below the Add to Cart, but also how to customize the upsells output to show just 2 columns and remove default WooCommerce “loop” elements such as the Add to Cart. Enjoy!
When a variable product has the same price for all variations, a unique price is shown to website users i.e. the one at the top of the page. However, this behaves differently when each variation has its own unique price – in this case the single variation price shows after a variation is selected.
Now, this can be good or this can be bad – it depends. So in this snippet we’ll see a quick fix to make this behavior consistent i.e. showing the variation price after selection every time, no matter the conditions.
Thankfully, it’s literally one line of PHP. Enjoy!
Product tabs show on the single product page, right below the image gallery. Tab labels are “Description”, “Additional Information”, “Reviews” by default – but what if you wish to rename them into something more relevant to your users?
When you are on the single product page, and you have a non-empty product long description, a “Description” tab appears below the product images. Unfortunately, not only the tab label is “Description”, but also the tab H2 heading. This sounds and looks horrible, so here’s a way to completely remove it.
One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself. But…
If you’re familiar with WooCommerce customization and WooCommerce hooks (and specifically the ones of the Single Product Page), you’ll know it’s now impossible to add content under the image as it used to be done with the “woocommerce_product_thumbnails” hook.
In fact, the new gallery completely replaces the default content via JQuery, including that hook. Adding content is not as easy as it used to be. So, here’s the workaround (you might want to check how it behaves on mobile or maybe completely hide this for small devices – this has been tested on desktop only).
Adding content to the WooCommerce Single Product Page is super easy – but what if you wish to remove / hide a default element?
Well, in this case it gets even easier. All you need to know is the default hook used by WooCommerce – so that you can remove it with one line of PHP in your functions.php. You can find a list of default hooks here: (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/)
A client of mine asked me to code a checkbox on the single product page called “Is this a gift?”. They noticed that their customers who want to gift the product to a friend get confused with the “Shipping to a different address” form in the WooCommerce checkout.
In older versions of WooCommerce free prices used to display as “FREE!” and products with empty prices were not publishable/purchasable. Now they’ve changed this around, but I still believe “FREE” looks much better than “$0.00”. It’s much more enticing, isn’t it?
Well, here’s how you restore the old WooCommerce functionality – as usual it’s as simple as using a PHP filter provided by WooCommerce and overriding the default behavior.
Recently I was on a coaching call with a client and the “Free Sample” challenge came up. Client has 400+ products on the website and had no intention of adding a free variation to each product manually.
So, I promised to myself I was going to study a different approach. And today you get it for free – nice! Needless to say, a comment and a social media share are much appreciated 🙂
A freelance client hired me a while ago to display a “Continue Shopping” button on the Single Product Page, next to the Add to Cart. A simple way to send their users back to where they were coming from without clicking the “previous” button on the browser 🙂
Advanced Custom Fields plugin is a great way to add custom, advanced fields to the WooCommerce Single Product Page. Many struggle to display such fields on the front-end, so this simple snippet should help you!
This is a very common task. As a WooCommerce store manager, sometimes you need to hide the SKU field on the single product page, while keeping it in the backend (Product Edit page) for order tracking and product import/export purposes.
Here’s a simple snippet you can use to remove the SKU immediately 🙂