Here’s a collection of tips, snippets and articles to answer your biggest WooCommerce customization questions. You can use the search button above to refine your search, or alternatively click on one of these popular WooCommerce customization tags: Checkout page, Single product page, Cart page
You might also want to visualize the WooCommerce “hooks” in case you’re a little more familiar with coding – here’s the link to the popular “Visual Hook Guide Series“, where you can find all the WooCommerce PHP actions in a user-friendly way :)
If you wish to subscribe to our weekly WooCommerce email roundup, click here. Otherwise, enjoy the latest articles on this page!
Ok, I may need an English language refresher… But the point I was trying to make was that yes, there is a way to switch the number of columns in the WooCommerce shop page, however that’s static.
What if I wanted to show 5 columns of products on large desktops, 4 columns on desktops, 3 on tablets and 2 on smaller devices? Well, this “dynamic” behavior is – this time around – managed by CSS. Let’s see how it’s done!
Continue reading WooCommerce: Switch Shop Columns Responsively
Today’s snippet is a helpful shortcut for getting the list of customers in your WooCommerce website. This may be necessary during customization, especially if you need tailor-made features for administrators and shop managers in the backend or frontend.
How did I find out about the solution below? Well, our job is mainly copy/paste from online forums or read thoroughly the WooCommerce core files on a daily basis – so it must’ve been one of the two. Enjoy!
Continue reading WooCommerce: Get List Of All Customers
The WooCommerce “Order Again” button displays for ‘completed’ orders on the Thank You page and View Order page. That’s a pity, because it would be useful to show it on the My Account > Orders page as well, as a custom “action”, same as the “View”, “Pay” (if pending), “Cancel” (if subscription), “Edit” (custom snippet), “Confirm” (custom snippet) buttons.
The good news is that we can code it ourselves! And just reuse most of the code we already wrote, as well as rely on the WooCommerce “listener” for the existing “Order Again” button. Enjoy!
Continue reading WooCommerce: Order Again Button @ My Account > Orders
The Storefront theme is one of the most popular WooCommerce themes. As of today, it has 200,000 active installations and 4.5/5 ratings, as well as a great overall performance.
But sure, you can’t win them all. Storefront is missing an important feature: the top bar. That’s a pity, because most ecommerce themes have either a dedicated widget area or somewhere you can add content in the theme options.
So, let’s go fix that. Here’s how to add a top bar with a background to your Storefront theme. Enjoy!
Continue reading WooCommerce: How to Add a Top Bar to Storefront Theme
Exactly. By default, when you search for orders in the WordPress > WooCommerce > Orders backend, using a SKU will give you 0 results. Which is pretty poor for a store manager.
Let’s change this. Despite the code is a little complex, all you need is a simple copy & paste. Enjoy!
Continue reading WooCommerce: Search Orders By SKU @ Admin
When you add a custom My Account tab, or when you’re not happy with the default My Account tabs order (Dashboard – Orders – Downloads – Addresses – Payment methods – Account details – Logout), you may need to change things around.
Here are two super simple snippets to achieve just that: reorder the My Account tabs, so your customers never miss that super important My Account section. Enjoy!
Continue reading WooCommerce: Reorder My Account Tabs
You can use a shortcode or block in order to display the WooCommerce products on sale. However, what if you wanted a proper “product category” called “Sale” – and where you didn’t need to manually assign this category to each product?
Basically, how do we display all the discounted products in a custom category called “Sale”, without doing any manual work?
Here’s a super quick tutorial. Enjoy!
Continue reading WooCommerce: “Sale” Category (Automatic)
We already saw how to show product categories in the Cart, how to display a category in the Shop page, but we never talked about showing ALL the product’s categories in the Shop / Category / Tag / Loop pages.
On top of that, we’ll also study the wc_get_product_category_list() function again, which is a super useful shortcut to get all the categories for a given product. Enjoy!
Continue reading WooCommerce: Display Product Categories @ Shop
An order can be marked as “completed” only by the WooCommerce store manager – manually. In certain cases, this operation may be automatic i.e. for downloadable orders.
However, what if we want our customers to complete (confirm) their processing order instead? Well, this is quite easy: we display a “CONFIRM ORDER” button under My Account > Orders, and on click some code triggers the status change. Enjoy!
Continue reading WooCommerce: Let Customers Complete a Processing Order
We’ve already found out how to check if a WooCommerce product is simple, variable, grouped… Today we add more conditional tags as we study which WooCommerce “product types” are included within the official WooCommerce Subscriptions extension.
There are two new product types in such case: “Simple Subscription” and “Variable Subscription”, with the difference being you can offer multiple billing periods within the same product page (choice between daily, monthly and yearly for example) with the latter.
So, how do we know if a given product ID is a subscription, and also whether it’s a simple or variable one? Here’s the quick solution – enjoy!
Continue reading WooCommerce: Check If Product Is A Subscription
Go to WooCommerce Checkout as a logged out user. Fill out billing name, surname, address, email and phone. Change your mind and go back to Cart. Return to Checkout. Billing name, surname, email and phone (basically everything but the address) are gone!
But hey, this annoying WooCommerce flaw is about to go away with a few lines of code. Either reload the Checkout page or go back to it later – your info will still be there (as long as you haven’t cleared your cache/cookies and the WooCommerce session hasn’t expired of course).
Enhoy!
Continue reading WooCommerce: Retain Field Values @ Checkout Reload
Surprisingly enough, variable products with a price range display two prices: at the top right you find the “parent” product price, displayed as a range; but once you select a variation, a second price appear just above the variation add to cart. Somewhat confusing.
In today’s snippet, we’ll see once and for all how to replace the top right variable product price with the one of the current variation, while also hiding the variation price. Therefore, you’ll see a single price on the single product page for variable products! Enjoy!
Continue reading WooCommerce: Replace Variable Price With Active Variation Price
In the era of online courses, subscriptions, custom-made products and product personalization, it may happen a scenario where a user can only purchase a product once in their lifetime.
In this short tutorial, we will see how this is done.Clearly, the user must be logged in in order for the code to trigger, so this applies to stores that require checkout login in order to proceed with the order.
Enjoy!
Continue reading WooCommerce: Only Allow to Buy a Product Once
As soon as you select a product attribute (by default, this is a dropdown right above the variation add to cart button), a “Clear” button appears beside the dropdown/s in order to reset the selection/s and start anew.
As usual, some WooCommerce store owners may require to hide/delete such link, and this is why your truly is here: why “display:none” stuff with CSS when you’re not actually removing it completely from the code? Which means, there must be a PHP way.
And, once again, here comes a 1-line snippet. Enjoy!
Continue reading WooCommerce: Remove “Clear” Button @ Variable Product Page
You have a WooCommerce product called “VREIUTERTKXYU“. You search for “VREIUTERTKXYU” (exact match). WooCommerce, by default, redirects you to the single product page as there is only 1 possible search result (as opposed to sending you to the search result page).
In today’s tutorial, we will be deactivating this WooCommerce function and go back to the normal (at least, to me) behavior: even if there is an exact match in a search (single search result), we still want to display the search page.
The screenshot that follows gives you a working proof, once the snippet you find below is active. Enjoy!
Continue reading WooCommerce: Disable Single Search Result Redirect
The WooCommerce settings allow you to show prices including OR excluding tax. But what if we want to show both at the same time e.g. “$100 inc. tax – $89 ex. tax”?
Well, by combining the snippet below with the snippet I already coded for variable products price range, you can achieve exactly that.
Yes, in theory you could add a WooCommerce suffix via the settings, but unfortunately WooCommerce wraps such suffix in a “small” HTML tag and therefore the whole content is smaller in size, including the second price.
In this tutorial, we’ll see how to add a suffix via PHP instead, and specifically at how to add the price including tax if your store displays prices excluding tax. Enjoy!
Continue reading WooCommerce: Display Prices Inc + Ex Tax
The WooCommerce Order Pay page URL is generated by the store admin while creating a manual order from the backend. This URL is then forwarded onto the client, where they can pay for the order and complete their purchase.
The other annoying thing about the order pay page, together with strict page permissions, is the fact that the Order Pay page shows no customer billing/shipping address whatsoever. The customer needs to trust in you 100000%, because they’re about to submit a payment without knowing whether they’re paying for the right thing.
Let’s see how we can add the billing/shipping customer address at the top of the Order Pay page. Please note that printing personal data on a public URL is dangerous, so you need to make sure you don’t share the Order Pay URL with anyone but the customer in such case.
So, here’s a quick fix for you. Enjoy!
Continue reading WooCommerce: Display Customer Address @ Order Pay
A disclaimer first: please make sure this is legal in your country and also that your checkout visitors are aware they will become registered customers without explicit consent (i.e. without ticking a “create an account on this site” checkbox).
So, yeah, there is a way to turn guest checkouts into registered customer ones. Also, there is a neat WooCommerce function to bulk add all past guest orders to a new customer (wc_update_new_customer_past_orders).
Of course, “Allow customers to place orders without an account” must be enabled in your WooCommerce settings, otherwise you’re not allowing guest checkouts and the snippet will be irrelevant.
So, here’s the fix. Enjoy!
Continue reading WooCommerce: Automatically Register Guest Checkouts
I’ve been testing for over an hour but finally I found a way to make this work. When you are in “Edit Order” view under WordPress Dashboard > WooCommerce > Orders, there is a dropdown of “Order actions”: “Email invoice”, “Resend new order notification”, etc.
A major problem I’ve always had while troubleshooting or working on the WooCommerce thank you page was that I had to build that URL by hand in order to view it again or to avoid placing yet another test order (it follows the format e.g. https://example.com/checkout/order-received/214008/?key=wc_order_aHB6YrmLOZIKP).
Well, from today, you can access that order thank you page URL directly from the “Order actions” dropdown. Enjoy!
Continue reading WooCommerce: View Thank You Page @ Order Admin
If you use WooCommerce product tags, it’s possible that a product may belong to 10 or more of them. When that happens, the single product page displays a long list of tag links, which may take too much space (see the below screenshot to visualize this).
Today’s snippet is indeed a way to truncate that list to – say – 3 tags only, and add a “+” to show the rest upon click. In this way if the customer is really interested in that they can expand the view, otherwise tags will take up a single line only. Enjoy!
Continue reading WooCommerce: Truncate Tag List @ Single Product Page