Here is a collection of tips, snippets, customizations and how-to tutorials to answer your biggest WooCommerce questions, curated by Rodolfo Melogli.
Please remember feedback is vital and that your social media shares, blog comments and WooWeekly newsletter sign ups help me understand which WooCommerce content works and which not, so that I can fine-tune my writing :)
Thank you in advance and enjoy!
If your products have multiple images and use the product gallery, you may have encountered issues when trying to add content below the gallery using the usual hook method.
If you’re familiar with WooCommerce customization and Single Product Page hooks, you’ve likely noticed that adding content under the images is no longer possible with the woocommerce_product_thumbnails hook.
This is because WooCommerce now includes a JavaScript-powered product gallery slider and lightbox on the single product page. Previously, the gallery was entirely managed by PHP.
As a result, the script fully replaces the default content, including that hook, making it more challenging to insert additional content.
Here’s a workaround. Be sure to test how it behaves on mobile, as this has only been tested on desktop—you may even want to hide it on smaller screens.
Continue reading WooCommerce: Add Content Below Single Product Gallery
The “Shipping Calculator” can be enabled via the WooCommerce settings in order to give the user a way to calculate their shipping fees before getting to the Checkout Page. Usually they fill out the country, state, city and postcode form fields and click on “Update Totals” in order to calculate the shipping.
However, what if you only calculate shipping based on country? Or what if you only charge by zip code / postcode? In this case, you will need to hide the input fields you don’t need, and make UX better.
Well, here are some WooCommerce filters you can use from WooCommerce version 3.4 onwards to hide the fields you like (apart from country, which is mandatory).
Continue reading WooCommerce: How to Hide “Shipping Calculator” Fields @ Cart
A client of mine had to style a WooCommerce product category page but ONLY if it was a subcategory. So I decided to add a “subcategory” class to the HTML body, so that they could target this in their custom CSS.
As usual, the PHP is quite easy: I check if the current page is a product category, then if the category has “parents” – and only in this case – add a body class. Pretty easy!
Continue reading WooCommerce: Detect if Current Category is a Subcategory
Here’s a snippet regarding the “My Account” registration form and, once again, GDPR. If you get any website traffic from EU, you will need users to give you Privacy Policy consent – including when they register a new account on your WooCommerce website.
So, how do we display a checkbox on the My Account page, at the bottom of the registration form? Continue reading WooCommerce: Add Privacy Policy Consent @ My Account Registration
There are times when you sell free products to give customers access to a membership, an online course, or for other reasons. In these cases, you might not want to send the “Order Completed” email or get the “New Order” transactional notification, so that you can avoid sending and receiving hundreds of emails.
Of course, you’d still want to keep the order emails for amounts above $0. Here’s the fix.
Continue reading WooCommerce: Don’t Send Emails for Free Orders
When going legal… you need proof. Accepting the “Terms and Conditions” on the checkout is required in order to place an order – but how can you, WooCommerce store admin, “prove” that the Terms and Conditions were actually ticked by the customer?
One of the solutions might be to save such acceptance in the database and print the acceptance on the order admin (and maybe on the customer invoice as well). So, here’s a quick PHP snippet you can simply copy and paste in your child theme’s functions.php file in order to (1) save and (2) print the choice on the Single Order Admin page. Enjoy!
Continue reading WooCommerce: Save “Terms & Conditions” Acceptance @ Checkout
If you decide to delete or reorder checkout fields, you probably also need to change the checkout field with “autofocus”. In plain English, this is the checkout field where the keyboard cursor goes automatically to on checkout page load (by default, this is the Billing First Name).
As usual, changing this default behavior is very easy, even if you’re not familiar with PHP. In the example below, I’m removing the autofocus from Billing First Name and assigning it to the Billing Email field instead.
Copy the snippet, test it on your development environment and only then push it to your live website. Enjoy! Continue reading WooCommerce: Change Autofocus Field @ Checkout
When talking about UX, or for very specific WooCommerce shops, you might need to tell the user a product is already in the Cart before re-adding it or increasing its quantity from the Shop/Category/Loop and Single Product pages.
The “Add to Cart” button label comes with a filter (actually 2 filters, one for the Single Product page and another for the other pages such as Shop), so all we need to do is targeting those two hooks. We will “filter” the label text in case the product is already in the Cart, and return that back to WooCommerce. If this sounds like Japanese to you (hey, unless you’re from Japan!) don’t worry – simply copy/paste the snippet below as per below instructions.
Enjoy!
Continue reading WooCommerce: Rename “Add to Cart” Button if Product Already @ Cart
Some store owners like to keep their product pages as clutter-free as possible. They want to remove all the unnecessary stuff and keep the focus of the page about the particular product.
On the WooCommerce single product page, you will find 3 (or more) related products. In this tutorial, we will show you how to remove these related products using a simple code.
Continue reading WooCommerce: How to Remove Related Products
Your WooCommerce shopping cart might look messy when it contains many products. Your specific business, besides, might require you buy “Part 1” first and “Part 2” after.
A way to tidy up the WooCommerce shopping basket is – for example – to sort products based on their title, from A to Z. As usual, this can be done with a few lines of PHP, even if you have no clue about coding… feel free to copy, paste, and enjoy the snippet 🙂
Continue reading WooCommerce: Sort Cart Items Alphabetically A>Z
Adding content to the WooCommerce Classic Checkout page is very easy. First, identify the desired position for your content using my WooCommerce Checkout Visual Hook Guide) and then create a short PHP function to output the necessary content.
Adding content to the WooCommerce Checkout Block is even simpler. You can directly insert a paragraph block at your chosen location.
In this example, we’ll demonstrate how to add content below the “Place Order” button on both the WooCommerce Classic Checkout page and the WooCommerce Checkout Block. This can be particularly useful for displaying testimonials, badges, or reassuring text to reinforce customers’ purchasing decisions.
Continue reading WooCommerce: Add Content Under “Place Order” Button @ Checkout
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/)
For example, how do we hide the Related Products? Well, here’s one line of code that will help you! Continue reading WooCommerce: Hide Related Products @ Single Product Page
Ever wondered how you could add a new product type to the WooCommerce admin (on top of the default Simple, Variable, Grouped and External) – and conditionally display product data tabs such as “General”, “Shipping”, “Linked Products”, “Advanced” whenever this is selected?
Well, while I was coding this for a client I found a lot of literature online – but nothing really worked for the latest WooCommerce release, especially in regard to the JS that is necessary to hide/show the Product data tabs and options.
So, here’s the working fix!
Continue reading WooCommerce: How to Create a Custom Product Type (Simple, Variable, etc.)
The default WooCommerce My Account tabs are many. Sometimes, they’re too many. In this post, we will see how to “merge” two tabs into a single one.
For example, how can we move the content of the “Edit Address” tab into the “Edit Account” tab – and save users some navigation time?
Continue reading WooCommerce: How to Merge My Account Tabs
Here’s how you can add a “calendar” field on the WooCommerce checkout page, let people decide the delivery date, and save this value in the order.
It took me ages to implement this for a client (it was much more complex, with available dates, different calendars based on different shipping zones, max weight per day, etc) so I thought of sharing the basic snippet with you! Enjoy 🙂
Continue reading WooCommerce: Display Order Delivery Date @ Checkout
