WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now

I just spent the last 3 days in Porto with another 2,300 WordPressers at the first in-person WordCamp Europe since Berlin 2019. I had a blast, held a nice (yet long) workshop, spoke to many, but got tired too soon.

Later on, I realized that that tiredness was something more serious – in fact I tested positive against COVID for the first time in my life, and I’m now in self-isolation hoping it won’t last long… Another 7 days without my kid – send help!

Anyhow, what really struck me at WCEU 2022, and based on various chats and some data that I’ll share below, is that the WooCommerce ecosystem is in trouble.

A nicer way to put that? WooCommerce is not moving forward as fast as it should, and unless some key issues are addressed right now, in a few years time we all may pay the consequences.

Please note, this is not a rant. It’s a proper analysis, full of actionable information.

@ WooCommerce team - if you're reading this - my plan is to give you constructive feedback and tell you what the community (really) thinks, needs and wants, so that you can get a better picture of the current situation. I know you've already started working on this, so this is just a recap/reminder and a way to get the whole community realigned. 

In this post, I will share my worries, my fears, the current WooCommerce issues, some data I collected at WCEU 2022 and then a list of actionable solutions that may be implemented in order to clear the backlog and get back on track – asap. Enjoy!

Continue reading WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now

WooCommerce: How to Split Variable Products Into Simple Products

If you sell simple products with no variations like books or software – the standard WooCommerce product page is enough and an ideal solution for your WooCommerce store. However, it isn’t the best solution for stores that sell variable products with multiple product variations. 

A variable product comes in different variations. A simple example is clothing items, including a shirt – with multiple variation attributes like size, color, and pattern. So, if a shirt is a variable product – a medium-sized shirt, small-sized yellow shirt, or large-sized printed shirt are its product variations.  

Thus, a product variation is the final product choice of the customer once they select multiple attributes belonging to a variable product. 

By default, WooCommerce displays all your variable products as just that – products with multiple different variations on its shop page. However, you might need a way to display each product variation as an individual product on your WooCommerce shop page to improve customer experience, search functionality and increase overall sales. 

So, in this article, we’ll see different ways through which you can split your variable products to show them as a single variation product on your WooCommerce store. But first, let’s see how this process can help your store’s bottom line. 

Continue reading WooCommerce: How to Split Variable Products Into Simple Products

WooCommerce: Why Use A Product Configurator Instead of Variations

One of the biggest marketing trends in recent years is the increasing shift towards delivering customized and personalized product experiences to customers. 

Customers are increasingly looking for online and eCommerce stores that provide order customization options for gifting purposes and the ability to add their personal and unique touch to their orders. While 90% of the U.S. customers find the idea of personalization appealing – impersonal shopping experiences frustrate 71% of customers

Thus, as a WooCommerce store owner – it’s important to strive and meet the increasing consumer demands to prevent dissatisfaction, improve their shopping experiences and increase the overall sales.  

This article will see some easy yet impactful ways to deliver a personalized customer experience and order customization. But first, let’s see how it can benefit your WooCommerce store. 

Continue reading WooCommerce: Why Use A Product Configurator Instead of Variations

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 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

WooCommerce: How to Add Custom Fields to Variations

When selling products on your WooCommerce store – you want to provide as much product information as possible to your customers. This is especially because, unlike a physical shop or a brick and mortar store – your online customers cannot physically touch or experience the products before buying them. 

Hence, providing additional information and keeping customers informed about the multiple facets of your products is essential. And an effective way to enhance customer experience is by adding custom fields for product variations. 

Product variations are product attributes – including the product’s size, color, pattern, texture, and style. On the other hand, WooCommerce custom fields allow you to add additional data for individual products – to display on a single product page. 

Custom field variations let you add data unique to an individual product – which can include anything from the product’s ISBN, additional product specifications, radio buttons, and checkboxes. Thus, custom fields for product variations could either mean: 

  • Fields to display additional product variation’s information, or 
  • Fields to accept customer input to customize the product variation through dropdowns or radio buttons. 

So, in this article, we share simple yet efficient ways to add custom fields to product variations. But, first – let’s see how adding fields for product variations help your WooCommerce store. 

Continue reading WooCommerce: How to Add Custom Fields to Variations

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!

Continue reading WooCommerce: Remove “Clear” Button @ Variable Product Page

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!

Continue reading WooCommerce: Display Variations’ SKU @ Product Admin

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!

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

WooCommerce: Top 7 Variation Swatches Plugins

Variation swatches are kind of a no-brainer. While this type of plugin is not typically classified as essential, I would argue that it is if you’re trying to build a world-class online store.

I am assuming, of course, that you don’t want to go through the work that these developers have gone through smoothing out the folds and wrinkles that inevitably arise when building even the most innocuous extension to WooCommerce.

The fact of the matter is that colors and images are a lot more compelling than text on a screen, so – whether it’s your own store or a client’s – why pass up the chance to increase the likelihood of a conversion? 

All of these plugins let you get started briskly, easily, and freely; are available in premium and free versions; and, trust me when I say, there is a good reason for each and every one of them to appear on this list, whether it’s because of the feature base, price, or aesthetic preferences. 

So without further ado, drum roll please…

Continue reading WooCommerce: Top 7 Variation Swatches Plugins

WooCommerce: Disable Attribute Select Unless Previous Is Selected (Variable Products)

On the single product page for a variable product, multiple dropdowns display so that users can select their desired attribute choice.

In certain cases, you’d want them to follow the exact top-to-bottom attribute order while they’re selecting a specific variation. With that I mean that you want them to select the first attribute first, then the second, then the third… basically you want to disable the “next attribute select dropdowns” unless the previous select changes to a value that is not null.

Better shown in an image than said, so here’s the GIF, and with that the PHP/jQuery snippet. Enjoy!

Continue reading WooCommerce: Disable Attribute Select Unless Previous Is Selected (Variable Products)

WooCommerce: Rename “Select Options” Button @ Shop Page

The WooCommerce shop page displays variable products with a “Select Options” button by default. However, if you’re looking to change it to something else (such as “View Product“) then I’ve got a useful snippet you can put to use.

Of course you can change the text to anything you like, by simply replacing the relevant string inside the snippet below. Enjoy!

Continue reading WooCommerce: Rename “Select Options” Button @ Shop Page

WooCommerce: Switch Image Background On Color Variation Selection

You could upload 10 images, one for each color of your variable product… or you could be slightly smarter and simply upload 1 “blank” image, and then when the user selects a color trigger a background color change!

Easier to code than to explain, so let’s take a look at the screenshot below (image must be a PNG with transparent background) and the PHP snippet. This could be a time-saver, enjoy!

Continue reading WooCommerce: Switch Image Background On Color Variation Selection

WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown

A nice way to avoid user frustration is to never let them pick a product / variation that is out of stock, only to realize later they can’t purchase it.

A variable product comes with a “select dropdown” on the single product page, from which customers can pick their favorite variation. Problem is that ONLY after selecting this they will find out about price, stock status and may be able to add to cart.

Today, we’ll completely disable (grey-out) those select dropdown options (variations) that are out of stock, so that users don’t waste time and only pick one of those that are in stock. Enjoy!

Continue reading WooCommerce: Disable Out of Stock Variations @ Variable Product Dropdown

WooCommerce: Always Show Single Variation Price @ Single Product

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!

Continue reading WooCommerce: Always Show Single Variation Price @ Single Product

WooCommerce: Get Currently Selected Variation ID

We’ve seen a lot of PHP so far on Business Bloomer – WooCommerce after all is a bunch of PHP files! However, sometimes PHP is just not enough, mostly when you need to work with variable products and the “currently selected variation”.

In fact, WooCommerce uses jQuery (a JavaScript Library) to handle variations on the frontend and show conditional content (variation price, description, add to cart) based on the dropdown selection. So, to detect the current variation ID we must use jQuery as well. Here’s how!

Continue reading WooCommerce: Get Currently Selected Variation ID

WooCommerce: Add Custom Field to Product Variations

Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page.

Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable product). So the question is: how do we add, save and display a custom field for each single variation?

Continue reading WooCommerce: Add Custom Field to Product Variations

WooCommerce: How to Display Variations with Color / Size Buttons?

Displaying product pages nicely is the entrepreneur’s dream.

Good UX means a much higher probability the interested customer is going to add to cart and complete the checkout.

However, WooCommerce variable products come with annoying dropdowns for each attribute (color, size, style, etc. depending on what options you have set up). And as you’ve already got a hint of my personal opinion, dropdowns are UX-killers.

Today, we take a look at handy plugins you can use to display product options (variations) in a user-friendly way. I’ve used these on many websites and they’re pretty reliable. As usual, it’s just the click of a button!

Continue reading WooCommerce: How to Display Variations with Color / Size Buttons?

WooCommerce: Display “FREE” Instead of $0.00 Price

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.

Continue reading WooCommerce: Display “FREE” Instead of $0.00 Price

WooCommerce: How to Add to Cart Multiple Variations at Once?

This is a very common issue for B2B / Wholesale WooCommerce website managers. In these case scenarios, clients usually need to add to cart multiple variations to cart on the same page, without refreshing it each time.

For example, a clothing wholesale client wishes to order 100 Medium, 150 Large and 50 Small t-shirts without having to switch dropdown/swatch choice, click on 3 add to cart buttons and wasting time.

Thankfully, there are WooCommerce plugins for that. And today I give you a few premium choices.

No matter whether each variation is displayed in a table and has its own add to cart button or there is a single add to cart button for all variations – ordering more products at the same is a breeze!

Continue reading WooCommerce: How to Add to Cart Multiple Variations at Once?

WooCommerce: Display Variations’ Stock @ Shop Page

Thanks to the various requests I get from Business Bloomer fans, this week I’m going to show you a simple PHP snippet to echo the variations’ name and stock quantity on the shop, categories and loop pages.

Of course, if “Manage stock” is not enabled at variation level, the quantity will be null, and therefore the returned string will just say “In stock” or “Out of stock”.

Enjoy!

Continue reading WooCommerce: Display Variations’ Stock @ Shop Page