Variable Products Archives - Business Bloomer

WooCommerce: Get All Variations For A Given Product

When you deal with WooCommerce variable products and custom code, you may need to programmatically access all the variations based on a given (parent) product ID.

This post dives into the world of WooCommerce product variations and shows you two powerful PHP methods to retrieve all the variations associated with a specific product ID.

We’ll explore several approaches, and by the end, you’ll be equipped to effortlessly handle variations in your code, based on what exact output you need. Enjoy!

Hide product gallery for variable products?

I’m trying to adjust the product image so that it doesn’t show any thumbnails and only shows the images of the variations when selected. Could someone help with that?

WooCommerce: Variable Product “Cumulative” Stock Quantity

When a variable product stock quantity is managed at variation level, the stock status is either “In stock” or “Out of stock” without any mention of the quantity.

It would be cool, however, and in certain cases only, to show the total stock quantity for all single variations. If variation Red has 3 in stock, variation Blue has 7 in stock and variation Cyan has 10 in stock, I’d like to set the “parent product” stock quantity to 3 + 7 + 10 = 20.

So, how do we do that?

WooCommerce: Programmatically Rename Variable Product Attribute Options

I think the easiest way to explain this customization is with a case study. Go to this variable product page, that I use to sell sponsorship packages on the WooWeekly newsletter: https://www.businessbloomer.com/shop/newsletters/wooweekly-sponsorship/

Now, take a look at the “Start in” attribute dropdown. That’s where a company picks the month for when the sponsorship starts. You will notice that this always displays the next 3 months based on today’s date!

And that’s exactly what I’ve done with the code below. Instead of manually changing the attribute names to “Nov 2023”, “Dec 2023”, “Jan 2024” in October 2023, then changing them again in November, and so on – I’ve come up with a way to rename attribute options dynamically, so that I don’t need to do this every month.

Which means, enjoy, and hope you can make the most of this snippet in case you need it too!

WooCommerce: Disable Payment Gateway By Product Type

Ever wondered if you could toggle payment gateways based on whether a given “product type” is in the WooCommerce Cart? For example, disable PayPal if there are simple subscription products, or enable Stripe only when there are variable products?

Well, with this simple code (and the 2 examples) you find below, you can manage to achieve just that. The second example regards the WooCommerce Subscriptions plugin, as this requires some plugin-specific functions to check for the product type. Enjoy!

WooCommerce: Hide Specific “Additional Information” Tab Attribute @ Single Product

WooCommerce variable products display the list of attributes and their terms in the “Additional Information” tab on the single product page. For example, it will display “Color: red, yellow” and “Size: large, small” if your variable product uses those attribute terms to generate variations.

Yes, you could completely remove the “Additional Information” tab all together, but sometimes you may need to just hide a specific attribute in this table, for whatever reason. Especially when you want to avoid your customers getting confused and abandoning your website.

So, here’s the fix. Enjoy!

WooCommerce: Dynamically Update Variable Product Attributes @ Single Product

If you’re familiar with WooCommerce variable products, variations are generated from product attribute terms (color: yellow & size: large for example). All possible attribute terms are displayed in the “Additional Information” tab of the single product page, so that the customer has an idea of all the possible product options.

However, as you can see from the screenshot below, this information is static i.e. does not change when you select a variation. It would be much more helpful if the attribute information changed from e.g. “Color: red – yellow – green” to the currently selected variation attribute term e.g. “Color: red“.

In today’s quick snippet, we’ll show just that: a combination of PHP and jQuery to make sure that “Additional Information” tab is always updated based on the selected variation. Enjoy!

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!

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.

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.

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

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

WooCommerce: Create Product Programmatically

No matter if this snippet suits your needs or not, it’s still interesting to see how you can create a brand new WooCommerce product programmatically / automatically when a certain even triggers.

In this case studio, we’ll see how to generate a brand new product, set its featured image, price, category, title and a download file as soon as an image is uploaded in the WordPress backend Media section. This would be super useful for photographers for example – simply upload a new image to the WordPress Media Library, and a new product is automatically created.

Of course, you can customize the code and use it with different triggers. For example, you may need to create a new product automatically when each phone product needs always a matching case product, just with a different title. Or maybe you want to tie product creation once an order is placed.

Either way, enjoy!

WooCommerce: Top 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…

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!

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!

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 use 1 image only, 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!