Category: WooCommerce Tips

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!

WooCommerce: Let Customers Complete a Processing Order

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!

WooCommerce: Check If Product Is A Subscription

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!

WooCommerce: Retain Field Values @ Checkout Reload

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!

WooCommerce: Replace Variable Price With Active Variation Price

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 solution, 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!

WooCommerce: User Can Only Purchase A Product Once

In the era of online courses, subscriptions, custom-made products and product personalization, it may happen that you need to limit a specific WooCommerce product sales. For example – users may only purchase a trial 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 before proceeding with the order.

Enjoy!

WooCommerce: Remove “Clear” Button @ Variable Product Page

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!

WooCommerce: Disable Single Search Result Redirect

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!

WooCommerce: Display Prices Inc + Ex Tax

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, or by installing our Mini/Plugin, 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!

WooCommerce: Display Customer Address @ Order Pay

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!

WooCommerce: Automatically Register Guest Checkouts

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!

WooCommerce: View Thank You Page @ Order Admin

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!

WooCommerce: Truncate Tag List @ Single Product Page

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!

WooCommerce: Split Shop Page By Category

Well, this is gonna be a big one for you. When you start having lots of products and lots of product categories, the shop page becomes either messy or unrepresentative, because it may show just the latest 16 products on page 1 when you have dozens of categories and a much wider range of products…

As usual, there are plugins for that – first one that comes to mind is Nested Category Layout by Skyverge – but today I wanted to see how doable it was to code it, and how many lines of PHP were required.

So, if you wish to switch the WooCommerce shop page display from “products” to “a given number of products for each parent category”, here’s the fix. Enjoy!

WooCommerce: Sync Billing Name & WP User Name

When someone places an order via the WooCommerce checkout, there is a function (process_customer) that saves the checkout first & last name to the customer Billing address (WooCommerce). The same function also overwrites that same WP user first & last name (WordPress).

The same happens when someone updates the Billing address via the My Account edit address tab. There is a WooCommerce function (save_address) that copies Billing first & last name to the WP user first & last name.

You’d think that was sufficient to keep billing names and WP user names in sync – well, nope. You can also update billing first & last name from the user edit profile page (WP dashboard). In such case, WP user first & last name is NOT updated, and billing and user names are not in sync.

Today, we’ll study some code to make that happen, so that you never have to worry again about inconsistencies. Enjoy!

WooCommerce: Display Variations’ SKU @ Product Admin

I find it quite annoying that variable products display an empty SKU cell in the WordPress > Products admin page even if their variations may have one available.

Today, we go fix that. With this simple snippet, your variable products will display the SKU of each variation, and if there is none, empty brackets (so, it’s easy to identify if any variation is missing its SKU).

So, let’s see how it’s done. Enjoy!

WooCommerce: Add Custom Field to “Quick Edit”

WooCommerce product custom fields are possibly the most used customization from what I’ve seen over the years on clients’ websites.

Adding custom fields to the product backend is pretty straight forward (including the input fields to be used for editing their values), however there are two additional areas where you need to do more work in order to allow for custom field editing: the “Quick Edit” and the “Bulk Edit” sections (WordPress Dashboard > Products).

We already saw how to allow a new custom field to appear in the Bulk Edit section, so this time we’ll talk about the Quick Edit window. So, how do we add a custom field in there (WordPress Dashboard > Products > Hover on a given product > Quick Edit)?

Well, here’s a fully working snippet for you. Enjoy!

WooCommerce: Hide Price If Product Out of Stock @ Frontend

Sometimes, the nature of ecommerce businesses requires some extra features. Thankfully, WooCommerce allows to customize pretty much everything based on whatever condition.

Today, we’ll see how to hide prices for out of stock items, on the shop, categories, archives, loops and single product page.

Think of an art gallery which sells unique art pieces, and doesn’t want to let users know for what price sold an item. Or maybe an online business that often runs discounts – why reveal at which price sold an item that is now out of stock? Of course, there are way more case scenarios – I’d be curious if you shared yours in the comment area.

But for now, copy and paste the snippet and that’s it, you’re good to go. Enjoy!

WooCommerce: Remaining Stock @ Order Emails

This is a neat customization, directly requested by a WooWeekly subscriber who needed to literally show the remaining stock quantity for each ordered item to store managers, in order to have an immediate idea of low/zero stock quantities after each order.

If that’s not clear, simply take a look at the screenshot. In my dev site, I ordered a product that originally had stock quantity = 1. In the “New Order” email (thanks to the snippet below), beside the order item quantity of 1, there is also a “(0 remaining)” notice that clearly displays the item’s current stock level.

Cool, ha? So, let’s see how that’s coded. Enjoy!

WooCommerce: Stock Quantity Suffix e.g. “sq. in.”, “Kg”, “boxes”, etc.

Each WooCommerce business is different, which means customization is required to adapt the store to unique specifications.

A clear example is the stock quantity. Not all stores can display the standard notice “11 in stock”. The display could change to “11 Kg in stock” if stock is based on weight. Or maybe “11 boxes in stock” or “11 pairs in stock” in case the package description is useful UX-wise. Also, “11 m³ in stock” if the business sells volumes.

Either way, this is a nice trick to display a “stock quantity suffix” in your WooCommerce Single Product Page. Enjoy!

WooCommerce: Display Selected Variation Info (price, weight, etc.) @ Single Product Page

We already saw how to get the “Variation ID” from the single product page once product attributes dropdown are selected. In that tutorial, we ran a jQuery “change” event once “input.variation_id” got updated.

However, that only gives us access to the variation ID. What if I need to read the variation price, stock quantity, SKU, weight, and so on? Well, in such case, we need different code. Enjoy!