WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

The complete guide to WooCommerce variable products

Here’s an overview of what we’re covering in this article. Just click on the heading to jump straight to the section.

WooCommerce variable product example and definition

A variable product is a product type in WooCommerce that allows the product to be divided into different variations that a customer can choose from. A typical example would be a shirt which is available in different sizes and different colors. The customer doesn’t just choose ‘Shirt’; they choose the medium shirt in red.

WooCommerce has several other product ‘types’. These include:

• Simple: This is the basic product type, and for many people, it’s all they will ever need. Simple products are usually physical objects, i.e. you’ll need to ship them, and they don’t have any options. A typical example would be a book.
• Grouped: This is a more complex product type, which combines related products into a single ‘grouped’ product.
• Virtual: A virtual product doesn’t need shipping. It could be something abstract, like a service.
• Downloadable: Again, not a physical product. A typical example would be a plugin.

Some of these ‘types’ are very similar to each other, and many people wonder what the difference is between a grouped product and a variable product. To explain that, we’ll continue with our shirt example from above – that’s a variable product. 

A grouped product, however, would be a whole outfit – the shirt, the pants, the shoes, etc. They can be grouped together for many reasons – they come from the same line, or they are often bought together.

What is the difference between a variable product and a variation?

So having cleared up what a variable product is, we now need to understand what a variation is. And to understand what a variation is, we need to know what an attribute is.

What is a WooCommerce attribute?

Attributes are ways of grouping products. You can create an attribute like ‘Size’ and then configure terms under the attribute, like ‘Small’, ‘Medium’, and ‘Large’, in order to display them in the product table.

In the example of the shirt above, we might have our product, the Shirt, which is available in the following sizes: ‘Small’, ‘Medium’, and ‘Large’. In this case, the attribute is ‘Size’.

Continuing with our shirt example, we have variations according to the ‘Size’ attribute. We create our product, Shirt, then assign it the ‘Size’ attribute. Finally, we create variations for the product according to the attribute terms. These are our variations: ‘Small’, ‘Medium’, and ‘Large’.

It starts to get more complex if we have more than one attribute assigned to a product. Continuing the shirt example, we could assign an additional color variation and now, our shirt is available in all sizes and all colors. This leaves us with a lot of combinations, :

• Small, Red.
• Small, Blue.
• Small, Green.
• Medium, Red.
• Medium, Blue.
• Medium, Green.
• Large, Red.
• Large, Blue.
• Large, Green.

All these combinations are separate variations of the product. Yikes.

Why use variable products in WooCommerce?

Although it can potentially feel confusing to have so many combinations of your product, it’s really useful to be able to manage these as variations. With a simple product that doesn’t have any variations, you can manage stock, price, and SKU, at the product level.

With variable products, however, you can manage data for each individual variation. This means that you can track inventory for your small, red shirts separately from your large, green shirts and make the according changes when a variation is out of stock.

In total, you can manage the following data for each variation of your product:

• Product image
• SKU
• Enabled
• Downloadable
• Virtual
• Manage stock – toggle this on or off to manage stock for the individual variation
• Regular price
• Sale price
• Stock status
• Stock quantity
• Allow backorders
• Weight
• Dimensions
• Shipping class
• Tax class
• Description

What is the difference between variations and attributes?

Hopefully, I’ve answered this question above. But just to clarify: an attribute is a way of defining information about a product – like Size; variations are the specific instances of an attribute – like Small, Medium, Large.

You can think about it another way. Take a look at the screenshot of a product page below.

The attribute is the label for the dropdown field: i.e. ‘Size’; the variations are the options inside the dropdown field: i.e. ‘Small’, ‘Medium’, ‘Large’.

Creating your first variable product: A step-by-step guide

Now, armed with all this knowledge, we can look at how to add product variables in WooCommerce.

Step 1: Create your attribute and its terms

We saw above that for each variable product, we must have at least one attribute. So before creating your product, you need to create your attributes.

Create the attribute

1. Go to WooCommerce > Attributes
2. In the ‘Add new attribute’ form on the left, just enter the name of your attribute in the ‘Name’ field (e.g. ‘Size’)
3. Click ‘Add attribute’

Your attribute has been created and you can see it listed in the table on the right.

Add the attribute terms

1. Click ‘Configure terms’ in the ‘Terms’ column of your attribute
2. In the ‘Add new…’ form on the left, enter the name of your first term (e.g. ‘Small’)
3. Click ‘Add new…’
4. Repeat for each term

When you’ve finished, your table of terms will look something like this:

Step 2: Create a WooCommerce variable product

With your attributes ready, you can create your variable product.

Create a new product

1. Go to Products > Add New
2. Enter your product title and any other information you like
3. Now you can set the ‘Product Type’ field in the ‘Product Data’ tab to ‘Variable product’

For more detail on adding products in WooCommerce, check out this tutorial.

Step 3: Add your attributes to your variable product

Now it’s time to define which attribute(s) you want to use in your variable product.

Add an attribute

1. Click the ‘Attributes’ tab in the ‘Product Data’ section
2. In the ‘Custom product attribute’ dropdown, select the name of your attribute
3. Click ‘Add’

Define the attribute terms to use

1. Assuming you want to use all the terms you’ve defined for your attribute, click the ‘Select all’ button
2. Select the ‘Use for variations’ option
3. Click ‘Save attributes’

Step 4: Add your variations

Now your attributes have been added to your product, you can define your variations. In this example, we’ll add variations for all our attributes.

1. Click the ‘Variations’ tab in the ‘Product Data’ section
2. Select ‘Create variations from all attributes’
3. Click ‘Go’

WooCommerce will add a product variation for each attribute.

You can see each variation listed.

Step 5: Editing your variations

You can edit variations individually or in bulk.

Edit individual variations

To edit an individual variation:

1. Click on the variation to expand its panel
2. Edit the required parameters
3. Click ‘Save changes’

You can see from the screenshot above all the parameters that you can edit for each variation.

Bulk editing variations

It’s highly likely that you’ll want to edit certain, if not all, parameters for your variations in one hit. For example, the price for each variation might not vary so you want to be able to set the price for all variations in one action.

To edit all variations in one go:

1. Click the ‘Add variation’ select field
2. You’ll see a long list of possible actions – select the one you want
3. Click ‘Go’

Depending on the action you’ve chosen, you’ll get an additional pop-up box to enter a value. And if you want to see how you can create a bulk variations form, check out our handy guide on the topic.

Product variation images

You can upload an image for each variation. When the user selects that variation, the main product image will switch to the variation image.

To upload a product variation image:

1. Click the blue image icon
2. Select the image

It’s pretty simple.

(By the way, if you want to display swatches for variations, you can check this guide from RexTheme).

Step 6: Set default variation

Finally, you might like to set a default variation for the customer when they arrive on the product page.

1. In the ‘Default Form Values’, set a default variation for each attribute
2. Click ‘Save changes’

A WooCommerce variable product on the front end

Let’s take a look at the example we’ve used throughout this article: the shirt with colour and size attributes.

Once we’ve created all our variations, we can view the product on the front end. Note that there are two dropdown fields, one for each attribute.

You can see some other information too:

• Price range: in this example, I’ve set some shirts to be more expensive than others. WooCommerce therefore displays a price range under the title showing the customer the minimum and maximum they can expect to pay for the product
• Stock information: under the product attribute fields you can see information about how many items for the selected variation are in stock
• Add to cart button: the add to cart button will be disabled until a variation is selected

If you want, you can also list product variations as a table and it’s going to look like this:

Enhancing WooCommerce product variations

Now, we’ve covered the standard WooCommerce settings for variable products in depth. But you might find that these still don’t meet your exact requirements.

Let’s look at two ways to make your variable product even more powerful and feature-rich by using a WooCommerce variable product plugin.

Adding extra fields to WooCommerce variable products

A popular requirement is to be able to customise products in WooCommerce. This is a step further than having product variations in that it allows customers to create their own personalised versions of products.

This is often achieved by adding input fields to product pages – e.g. you can let a customer define text to be engraved on your product by letting them fill in a text field. The text is captured as part of the product and you, as store owner, receive it as part of the order. You can find out more about the ins and outs of customising products in WooCommerce here.

You can add customisable elements to product variations using the WooCommerce Product Add Ons Ultimate plugin.

Using a WooCommerce plugin

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

Plugins in WooCommerce are great for business owners who want to customize their store and offer a better experience to customers. They can also give you greater control over the product display and fix common issues such as WooCommerce variations not showing properly or at all.

For example, WooCommerce Product Add-Ons Ultimate allows you to add extra options to your configurable products and display items as child products. You can also choose to add different options to different variations. So, in the shirt example, we’ve used throughout this article, we could add the option for users to have some custom text stitching done, or even to upload a monogram.

However, we might want to limit the customisation options to certain variations. Perhaps the stitching will only work with certain colour shirts. Using WooCommerce Product Add Ons Ultimate, it’s possible to add custom options to different variations.

Another possibility is to display variations as single products. This option is great for products that have too many variations such as hardware goods or stationary items.

Providing more information about variations

WooCommerce already does a great job of allowing you to create variation-specific information. As well as all the product data, like price, stock, etc, you can also write separate descriptions for each variation.

One drawback is over variation stock control, however. Many users want the ability to disable or grey out variations that are not in stock. WooCommerce Better Variations gives you this ability.

Better Variations – a WooCommerce variable product plugin

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Imagine that in our shirt example, the Medium Green variation was sold out. With WooCommerce Better Variations, we can show that to the customer more clearly than standard WooCommerce does.

Better Variations also gives you the chance to set a ‘back in stock’ date that you can display to the customer, just so they know exactly when their item will be available to purchase again.

So, those are two examples of a WooCommerce variable product plugin that you can use to extend your shop’s capabilities.

Get the most out of your store with WooCommerce variable products

Hopefully, this article has given you plenty of pointers about what a variable product is. In addition, it should also have helped give you ideas about how to use variations.

Variable products shouldn’t be too difficult to use, once you get the hang of them. If you need to extend them with some extra functionality, consider the WooCommerce Product Add Ons Ultimate and/or Better Variations plugins.

So, any questions, just leave a comment below.

The post WooCommerce Variable Products: How to Increase Your Store’s Potential appeared first on Plugin Republic.

However, for many WooCommerce store owners, the process of setting up these grid layouts can be a bit perplexing.

In this article, we’ll guide you through the advantages of using product grids and introduce you to the top six product grid plugins available in 2023. Additionally, we’ll provide a quick tutorial to get you started using our personal favorite plugin. By the end of this read, you’ll be well-equipped to navigate the world of product grids with confidence.

Why is a well-organized product grid essential?

A well-organized product grid plays a crucial role in WooCommerce, and its significance cannot be overstated. Let’s start by understanding what a product grid is: it’s a layout where multiple products are neatly showcased side by side.

Now, why does this matter? Imagine walking into a well-arranged store where items are displayed logically. Similarly, a well-organized product grid creates a seamless user experience, making it effortless for customers to explore and compare products. This convenience translates into a potential boost in sales – when customers find it easy to navigate and compare, they’re more likely to make purchases.

The benefits go beyond usability. A polished product grid elevates your site’s appearance, enhancing your brand’s impact on customers. The impression of professionalism and attention to detail goes a long way in building trust and customer loyalty.

Beyond appearances, a well-organized product grid also contributes to better website performance and improved SEO. Search engines appreciate structured content, leading to better search rankings and visibility for your store.

While some WooCommerce themes offer basic grid layouts, you might find them limiting. Here’s where dedicated product grid plugins come in. They provide enhanced options for displaying products, including improved layouts and advanced features like filtering – features that might surpass what your theme offers. Additionally, these plugins empower you to extend product grids beyond the standard shop page, allowing you to display them on your homepage or other landing pages, thus enhancing the overall shopping experience throughout your store.

Discover the top 6 must-have product-grid WordPress plugins for 2023

Let’s dive deep into the top 6 must-have product-grid WordPress plugins so you can decide on the right one for your eCommerce store.

#1. WooCommerce Product Table Ultimate

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

The WooCommerce Product Table Ultimate plugin offers a comprehensive solution for displaying your products in a table-style layout, which gives your customers the ability to view and add several different products to their cart at the same time.

While the plugin doesn’t strictly offer a product grid display, the table layout offers comparable and even superior benefits, as product tables are compact and packed with information. This means you can use columns to show more details about your products, making it easy for customers to compare without needing to visit many product pages. Unlike the regular grid view, there are no limits to how much info you can include.

The robust plugin lets you display either all of your shop’s products in a product table, products from specific categories, or only products with specific tags. In addition to improving your shop’s navigation, you can also let customers use filters and sorting options to quickly and easily find the product they’re interested in.

Store owners can add product tables anywhere using shortcodes or override the default WooCommerce shop and category pages. This makes it a versatile solution that lets you add customizable product tables to any part of your online store.

The WooCommerce Product Table Ultimate plugin is a great option for shop owners who are looking for a professional, easy-to-use plugin to enhance product display. Product tables created using the plugin are fully customizable and can be displayed anywhere on your WooCommerce site, making it the ideal option for most online stores.

#2. WooCommerce Better Variations

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

The WooCommerce Better Variations plugin stands out as another essential addition to your WooCommerce toolkit, specifically tailored to enhance how product variations are showcased on your online store.

This user-friendly plugin streamlines the presentation of product variations into a grid layout. This layout is designed to simplify the ordering process for customers who intend to purchase multiple variations in larger quantities. Instead of relying on a standard, generic dropdown menu provided by the default WooCommerce plugin, shoppers can now access all the relevant variation details within a single view.

Additionally, WooCommerce Better Variations comes equipped with a set of built-in tools for managing product variations. For instance, you can easily highlight items that are out of stock and automatically position them at the bottom of the dropdown list. This strategic arrangement ensures that customers primarily encounter in-stock variations at the top, not only enhancing their shopping experience but also reducing the likelihood of order errors on your WooCommerce site.

Tailored for online stores boasting an extensive range of product variations, this plugin offers improved variation management and presents them in a conversion-focused grid layout. Ultimately, this approach bolsters sales figures while concurrently enriching the overall user experience of your online store.

#3. WooTabbed for WooCommerce Products

WooTabbed for WooCommerce Products by Quantum Cloud is a professional WooCommerce product grid solution that’s not only easy to use but also offers a wide range of customization features out of the box.

With over 10 different mobile-friendly pre-made designs to choose from, you can create a professional-looking product grid within a few minutes. You can customize the product grid to include specific products from your online store and set colors according to your brand’s unique aesthetics.

Additionally, the plugin comes with a responsive widget that lists your categories and subcategories on product pages. The lists are fully collapsible and let your customers quickly navigate to product or product category pages when shopping from your online store.

WooTabbed for WooCommerce Products is a good option if you’re looking for a premium plugin with a customizable product grid display and additional features such as collapsible category link widgets.

#4. Essential Grid Gallery

With the Essential Grid Gallery plugin, you can choose from over 50 different templates for setting up a gallery product grid on your WooCommerce site, making it a simple solution for quickly creating product grids.

This plugin gives you the functionality to add videos to your product grid galleries, and you can import online videos from the most popular platforms such as Instagram, YouTube, and Vimeo.

Essential Grid Gallery is a solid plugin option for businesses that want to display product grids using videos and images to create a more interactive shopping experience for their customers.

#5. Product Carousel Slider & Grid

The Product Carousel Slider & Grid plugin lets you display your shop’s products in two ways: a carousel slider or a product grid.

The simple plugin allows you to create a grid or carousel slider to display your products anywhere on your WooCommerce store. This not only helps enhance product display on your WooCommerce site but also makes it easier for shoppers to quickly browse through multiple products without having to navigate to other pages.

Additionally, the Product Carousel Slider & Grid plugin also comes with built-in add-to-wish capabilities. This can help you encourage customers to make more purchases.

The Product Carousel Slider & Grid plugin is a great option for online stores that want to display their products using attractive carousel sliders and product grids.

 #6. SeedProd

SeedProd is a full-fledged page builder for WooCommerce and WordPress websites that also lets you create beautiful, responsive product grids.

It comes with over 200 templates for setting up important WooCommerce pages without having to code a single line yourself. You can also fully customize how your product pages look and feel according to your brand’s unique aesthetics. Using SeedProd Blocks, you can add professional-looking product grids anywhere on your eCommerce store within a few clicks.

SeedProd is ideal for store owners who want tons of functionality and are willing to pay a much higher price than plugins designed to only build product grids.

How do you create a product grid in WooCommerce?

Let’s take a look at how you can install the WooCommerce Product Table Ultimate plugin and set it up for your online store:

Once you get the plugin, navigate to Plugins → Add New from the WordPress admin panel and upload the .ZIP file to your site before clicking on the Install Now button.

Click on the Activate this plugin link to continue. Now, navigate to WooCommerce → Settings → Product Table Ultimate and click on the Licence link from the top. Then paste the license key given to you at the time of purchase in the text field.

Click on the Activate button and then the Save Changes button to continue.

Now that the WooCommerce Product Table Ultimate plugin is installed and activated on your WooCommerce site, you can start creating product grids.

You can create product tables or product grids anywhere on your online store and customize which columns appear in the grids.

You can choose to add or remove columns including thumbnails, product titles, SKUs, descriptions, stock-level attributes, and product categories. This way, you can display custom-looking product grids that display enough product information for your customers to make informed purchase decisions. Thanks to the plugin’s filtering capabilities, all columns can be sorted by your customers which lets them quickly find the products they need.

For instance, if your shop contains a lot of products, showcasing all of them in a single product table or product grid may overwhelm your customers. However, with sortable columns and filters, customers can quickly navigate to the product they’re interested in purchasing.

Additionally, you can also choose which products appear in your product grids and replace the default WooCommerce pages including the shop and category pages with a product grid layout.

With a product table or grid created using the WooCommerce Product Table Ultimate plugin, you can let your customers easily purchase several units of multiple products at the same time and proceed to the checkout page.

Customers can use customizable dropdown lists to select their desired quantities, check the box next to the products they want to purchase, and then add all of them to their shopping cart at once using the add-to-cart button. This not only helps improve the shopping experience on your online store but also encourages your customers to spend more when shopping from your online store.

Take your store to the next level with WooCommerce Product Table Ultimate today!

A well-organized product grid used to display your WooCommerce products not only boosts the visual appeal of your online store but also helps increase sales for your business. While product grid displays are useful, product table layouts are another great alternative to the grid view as they are more information-dense and compact.

With so many WooCommerce product grid plugins to choose from, deciding on a single one can be a challenge, However, we recommend using the WooCommerce Product Table Ultimate plugin because it’s the best solution for stores that want an easy-to-use plugin that offers a lot of customization options.

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

Ready to start building product tables on your WooCommerce site? Get WooCommerce Product Table Ultimate today!

The post 6 must-have product grid WordPress plugins for 2023 appeared first on Plugin Republic.

However, any glitches or errors with your product variation display can have a detrimental impact on your site’s usability and even lead to lost sales. To maintain a seamless shopping experience and maximize conversions, it’s crucial to promptly troubleshoot and resolve any issues with WooCommerce variations not showing.

In this article, we’ll cover some of the most common issues with WooCommerce product variations not displaying properly and how to fix them. Then, we’ll provide some top tips for enhancing your product variation display with the help of some highly recommended plugins.

Common WooCommerce product variations issues

WooCommerce product variations play a pivotal role in offering customers a diverse range of choices when shopping online. Properly displaying these variations is vital for providing a seamless customer experience and maximizing sales potential. When variations are showcased correctly, it enhances product visibility, encourages user engagement, and ultimately boosts conversion rates.

Conversely, encountering issues with product variations not displaying properly can have adverse effects on your online store. Here are the most common issues WooCommerce store owners face when it comes to displaying product variations:

• One of the common problems is the variations tab not showing correctly in the product data section of the WooCommerce backend, which hinders the store owner’s ability to configure and manage product options efficiently.
• On the front-end, customers may face challenges when variation featured images or data fail to display correctly, leading to confusion and potential frustration during the shopping process.
• Some or all variation options may not appear on the front-end, limiting customers’ ability to make personalized choices.

The major reasons behind the WooCommerce variation display not showing are incorrect settings, theme or plugin conflicts, and your version of WordPress, WooCommerce, or specific plugins being out of date. In the next section, we’ll dive deeper into how you can resolve these common issues on your WooCommerce site.

Step-by-step guide to fixing WooCommerce variations

Resolving most of the issues with WooCommerce variation display is often straightforward to do, even if you’re not very tech-savvy. Let’s go over the main steps for identifying and fixing issues with product variations in WooCommerce, starting with the two most likely culprits:

Missing price for variations

One of the most common reasons for product variations not displaying is the absence of prices for those variations. If you’ve created variations but haven’t assigned prices to them, customers won’t see the options when viewing the product. To fix this:

• Go to the product editing page in WooCommerce.
• Navigate to the “Variations” tab.
• Ensure that each variation has a valid and appropriate price assigned.

Variation marked as out of stock

If a variation is marked as out of stock, it won’t be displayed to customers who are browsing your store. To address this:

• Access the product editing page for the affected product.
• Visit the “Variations” tab.
• Check the stock status of each variation. If a variation is out of stock, either update the stock quantity or mark it as “In Stock” if applicable.

Verify product variation settings

If your product variations have assigned prices and are in stock, then it could be you haven’t configured your variations correctly. Follow these steps to verify and configure your product variation settings:

1. Accessing the product edit page:

• Log in to your WooCommerce admin panel.
• Navigate to the “Products” tab and select “All Products.”
• Locate the product for which you want to manage variations and click “Edit.”

2. Configuring attributes and terms:

• Within the product edit page, navigate to the “Attributes” tab.
• Ensure that you’ve selected the appropriate attributes for your product. If you need to create a new attribute, you can create a global product attribute by going to WooCommerce>Products>Attributes. Alternatively, you can create a custom product attribute directly in the product page backend, by following the steps below:
  • Click the “Add” button next to the “Custom product attribute” dropdown.
  • Provide a name for the attribute, such as “Logo.”
  • Add attribute values (e.g., “Yes” and “No”) that are relevant to your product.
  • Check the boxes to make the attribute visible on the product page and available for variations.

3. Adding variation details:

• Scroll down to the “Variations” section on the product edit page.
• Choose the “Create variations from all attributes” option and click “Go.”
• WooCommerce will generate variations based on the attributes and terms you’ve set up.
• Review each variation to ensure accurate pricing, inventory levels, and other relevant details.

4. Saving changes:

• Once you’ve configured your product variations, click the “Update” button to save your changes.

e. Preview and test:

• Visit the product page on your WooCommerce storefront to see how the variations are displayed to customers.
• Test the functionality by selecting different attribute combinations and verifying that prices and availability update accordingly.

Check theme compatibility

If there are integration issues between your current theme and WooCommerce, it could lead to problems with displaying variations. The best way to check this is to test with a default WooCommerce theme:

• To isolate the issue and determine if it’s related to your current theme, temporarily switch to a default WooCommerce theme like “Storefront.”
• Visit your website and navigate to a product page with variations. Check if the variations are displayed correctly with the default theme.
• If the issue is resolved with the default theme, it suggests that there might be a compatibility issue with your original theme.

Resolve plugin conflicts

Conflicts between plugins can lead to unexpected behavior, including the incorrect display of WooCommerce variations. To ensure variations are shown as intended, follow these steps to identify and resolve potential plugin conflicts:

1. Update plugins and WordPress core:

• Keeping your plugins, including WooCommerce, up-to-date is crucial for a seamless online store experience. Outdated plugins can lead to compatibility issues.
• Regularly check for updates in your WordPress admin panel under “Plugins” > “Installed Plugins.”
• Update all plugins and the WordPress core to their latest versions.

2. Clear browser cache:

• Browser caching can sometimes cause older code to be loaded, affecting the display of your variations.
• Clear your browser’s cache and cookies to ensure you’re viewing the most recent version of your website.

3. Deactivate plugins methodically:

• To identify a potential conflicting plugin, deactivate all plugins except for WooCommerce.
• Test your product pages with variations to see if the issue is resolved. If it is, you’ve confirmed that a plugin is causing the conflict.
• Reactivate each plugin one by one, testing your variations after each activation.
• If the issue reappears after activating a specific plugin, you’ve likely found the culprit.

4. Update or replace conflicting plugins:

• Once you’ve identified the conflicting plugin, check if an update is available. Sometimes, plugin authors release updates to address compatibility issues.
• If an update doesn’t resolve the conflict, consider searching for alternative plugins that offer similar functionality but are more compatible with your WooCommerce setup.

5. Reach out for support:

• If you’re unable to identify or resolve the plugin conflict on your own, reach out to the plugin’s support team or community forums for assistance.
• Provide them with detailed information about the issue, including any error messages or unexpected behavior you’ve observed.

Regenerate thumbnails

In some instances, you may encounter a situation where product thumbnails within WooCommerce fail to display correctly. This can subsequently lead to the absence of featured images for product variations on your website. If you’re encountering this issue, regenerating thumbnails can often be a simple and effective solution. Follow these steps to regenerate thumbnails for your WooCommerce site:

1. Navigate to the thumbnail regeneration tool:

• Access your WordPress admin panel.
• Go to “WooCommerce” in the left-hand menu.
• Choose “Status.”
• Click on the “Tools” tab.

2. Regenerating the thumbnails

• Within the “Tools” section, locate the “Regenerate shop thumbnails” option.
• Click the “Regenerate” button associated with this option.
• The regeneration process may take some time, depending on the number of products and images on your site.
• Once the process is complete, you’ll receive a notification confirming the successful regeneration of thumbnails.

3. Checking variation images:

• Navigate to a product page that has variations and featured images.
• Verify that the thumbnails and featured images for variations are now correctly displayed.

4. Repeat as needed:

• If you continue to experience thumbnail-related issues, you can repeat the thumbnail regeneration process as necessary.
• Regularly regenerating thumbnails can also be beneficial when you make significant changes to your products or website design.

Enhancing your WooCommerce product variation display with plugins

Using plugins on your WooCommerce site allows you to enhance the display and functionality of your WooCommerce variable products.

While WooCommerce’s default functionality for displaying variations is a good start, it only lets you show variations in a dropdown list. This isn’t the best for product discovery or user experience on your online store.

Next, let’s take a look at two recommended plugins that help you enhance your WooCommerce product variation display.

We’re going to see how both the WooCommerce Product Table Ultimate and WooCommerce Better Variations plugins can help improve the display of your product variations.

Benefits of Product Table Ultimate for displaying variations

The WooCommerce Product Table Ultimate plugin offers an all-in-one solution for enhancing the WooCommerce variations display on your online store.

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

The plugin lets you list your product and product variations in a table-style layout that’s fully customizable. You can display product thumbnail images and other useful product information such as the short description in the product table. This makes it easier for your customers to compare multiple product variations and select the one that suits them the best.

The product tables created with WooCommerce Product Table Ultimate are also filterable and sortable. You can specify the sortable and filterable terms in the plugin’s settings so it offers a seamless product discovery experience for your customers.

In addition to this, you can also display add-to-cart buttons and quantity selectors on the product table. This way, your customers can easily add multiple items to their shopping cart with just a single click.

WooCommerce Product Table Ultimate product tables can be added anywhere on your WooCommerce site via a shortcode or using Gutenberg blocks. You can even replace the default WooCommerce shop or archive page layout with product tables.

Benefits of WooCommerce Better Variations for displaying variations

The WooCommerce Better Variations plugin is a professional product variation customizer that lets you display your WooCommerce variable product options better.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Using the plugin, you can disable and style out-of-stock variations on your WooCommerce site. This way, you can give your customers a clearer view of what is available or makes it easier to identify in-stock product variations.

You can also sort your product variations to prioritize in-stock variations and display them at the top of the dropdown list. This not only helps deliver a smoother customer experience but makes it easier for customers to differentiate between in-stock and out-of-stock variations.

The WooCommerce Better Variations plugin also lets you display your variations in a grid on single product pages of your online store. This way, you can let customers see variation information in one view and select quantities for different variations from the same page.

How to display product variations in a table with Product Table Ultimate

Here, we’ll show you how to display product variations in a table on your WooCommerce site with the WooCommerce Product Table Ultimate plugin.

For this, you will need a WordPress site with the WooCommerce plugin installed along with some products added to your site. You’ll also need the WooCommerce Product Table Ultimate plugin to display your WooCommerce variations in a table-style layout.

Step #1: Install and activate the Product Table Ultimate plugin

Once you get the WooCommerce Product Table Ultimate plugin, navigate to Plugins → Add New and upload the plugin’s ZIP file.

Click on the Install Now button and then Activate this plugin to continue. Once the plugin is installed and enabled, navigate to WooCommerce → Settings → Product Table Ultimate and click on the Licence link from the top.

Enter the license key given to you at the time of purchase and click on the Activate this license button to continue.

Step #2: Configure plugin settings

Next, it’s time to start optimizing the variations display.

To get started, navigate to WooCommerce → Settings → Product Table Ultimate and click on the General link from the top.

Here you can start configuring plugin settings and optimize the product table that your variable products will be displayed in. The Columns field lets you specify the column fields that will appear on your product table. This means you have full control over what appears on your WooCommerce variations product table.

The Show quantities on add-to-cart column dropdown menu lets you specify whether customers can set and add their desired product quantities from the product table to their shopping cart or not. You can also specify which products will be displayed in a table-style layout using the Product Source.

The WooCommerce Product Table Ultimate plugin also lets you show variations as separate rows, dropdown lists in the table itself, or set the table to redirect users to the product page when they select a variable product. You can specify how variations will be displayed in your product tables using the Variations Display dropdown menu.

To provide the best customer experience and facilitate easy variation comparison for your customers, we recommend displaying them as separate rows or selecting the As separate rows option from the dropdown menu.

You can set the order rules and how products will be organized in the product tables using the Order table by and Order fields. You also have the option to display a custom number of products per page on your product tables by customizing the Products per page field.

If you’re letting customers select their variation options directly from the product table, it’s a great idea to display checkboxes to let customers add multiple products to their cart at once. For this, make sure to select Yes for both Enable add selected button and Enable add all button drop-down fields.

Once you’re done setting up the product table, click on the Save changes button at the bottom to continue.

Step #3: Preview

You can display product tables anywhere on your WooCommerce site using shortcodes or Gutenberg blocks.

This way, customers can view multiple variation options for a single product in a table-style format which makes it easier for them to select multiple options at once.

By clicking on a single button, customers can add multiple product variations to their shopping cart and checkout from your online store.

Maximize the impact of your product variations

Product variations are a vital aspect of WooCommerce, allowing online store owners to offer customers a wide range of choices and personalized options. Ensuring these variations display correctly is crucial for providing a seamless shopping experience and increasing sales. Promptly addressing any issues with their display is essential to avoid hindering product visibility and user satisfaction.

To fully harness the potential of product variations, dedicated plugins can be invaluable. Two exceptional choices for enhancing variation displays are Product Table Ultimate and Better Variations:

• The WooCommerce Product Table Ultimate plugin lets you display or list your variations in a table-style layout and display individual product variations in separate rows. This makes it easier for customers to compare multiple product variations and quickly add the ones that suit them the best.
• If you’re looking for a way to list your variations in a grid, WooCommerce Better Variations will do the job. The plugin offers functionality for disabling out-of-stock variations or styling them in a way that’s easily identifiable by customers.

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Ready to optimize the way you display product variations in your WooCommerce store? Get started with WooCommerce Product Table Ultimate and WooCommerce Better Variations!

The post How to fix variations not showing in WooCommerce appeared first on Plugin Republic.

To avoid this, you can grey out out-of-stock variations in WooCommerce so customers can’t add them to their cart in the first place. The WooCommerce Better Variations plugin lets you disable unavailable variations on your WooCommerce store.

In this article, we’ll explain how you can grey out-of-stock variations in WooCommerce using the WooCommerce Better Variations plugin. 

If you’re looking to hide out-of-stock products altogether or disable them, check out our guide here: How to hide out-of-stock products in WooCommerce.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Introducing WooCommerce Better Variations

WooCommerce Better Variations is a simple yet robust plugin that lets you disable, grey out, style and sort your sold-out, unavailable or out-of-stock variations in WooCommerce.

You don’t want to let customers select variations that are out-of-stock on your WooCommerce store. This can result in a poor user experience for your customers as it allows them to add products to their cart and realize later they can’t purchase them.

With this product variations plugin for WooCommerce, store managers can quickly disable and style sold-out variations. For instance, if one of your variations is sold-out, you can grey out the variation and display optional text like ‘Sold out’ next to your out-of-stock variation.

You can also display an optional ‘Back in stock’ date that will let your customers know when they can expect the variation to be back in stock again. Additionally, you can style options by displaying out-of-stock variations in a different color than in-stock variations.  It’s also possible to show out-of-stock variations below in-stock variations for better product visibility using the WooCommerce Better Variations plugin.

Related Tutorial
Find out everything you need to know about WooCommerce variable products and variations here

How to grey out out-of-stock variations in WooCommerce

You can use the WooCommerce Better Variations plugin to grey out out-of-stock variations on your WooCommerce store. 

Here’s what you need to do to disable out-of-stock variations in WooCommerce:

1. Get the WooCommerce Better Variations plugin and install it on your website.
2. Go to WooCommerce > Settings > Better Variations.
3. Tick the checkbox next to ‘Disable out of stock options’.
4. Scroll down to the bottom and click the ‘Save changes’ button. 

This will hide out-of-stock variations on your WooCommerce store. In other words, customers won’t be able to select variations that are out-of-stock. However, they can still select in-stock variations to add to their shopping cart.

Customizing out-of-stock variations

The WooCommerce Better Variations plugin lets you do much more than just disabling out-of-stock variations. You can also customize and style out-of-stock variations in WooCommerce. There are many different ways to customize and style disabled out-of-stock variations to enhance your online store’s user experience.

Let’s quickly step through some of the main ways you can customize out-of-stock variations: 

Add extra text to out-of-stock options

You can add additional text to disabled out-of-stock variations. Your customers will see the unavailability text displayed right next to the greyed-out option.

For instance, if one of your product’s variations runs out of stock, you can grey out the variation option and also display a ‘Sold out’ text right next to it. This can help customers better understand what’s going on. 

Here’s how you can add extra text to out-of-stock options using WooCommerce Better Variations:

1. Go to WooCommerce > Settings > Better Variations. 
2. Tick the checkbox next to ‘Show unavailability text’ and enter ‘Sold Out!’ in the text field right next to ‘Unavailability text’.
3. Scroll down to the bottom and click the ‘Save changes’ button. 

This will display additional text right next to the disabled variation option in WooCommerce. It will look something like this on the front-end:

Allow users to purchase out-of-stock variations

You can let customers purchase out-of-stock variations from your WooCommerce store. One way to do this is by accepting backorders for out-of-stock products. To deliver a good user experience, you can style them differently so your customers know that this order might take a while to reach them.

For instance, for variations that are not available or in stock, you can style the text in blue to let your customers know that they are purchasing out-of-stock variations of your products.

Here’s how you can do that using the WooCommerce Better Variations plugin:

1. Go to WooCommerce > Settings > Better Variations. 
2. Tick the checkbox next to the option ‘Enable Select2’. 
3. Input ‘#0000ff’ in the color picker field ‘Out of stock text color’ for displaying out-of-stock variation options in blue.
4. Scroll down to the bottom and click the ‘Save changes’ button.

This will display out-of-stock variations in blue so users know this will be on backorder if they purchase it now.

Restyle out-of-stock variations in WooCommerce

You can also style your out-of-stock variations in WooCommerce to let your users know that the product is not available. Instead of back-ordering, they won’t be able to purchase the product at all.

For instance, you can use red to display out-of-stock variations for your products. This will let customers know that the product is out of stock and selecting the variation won’t let them purchase it.

Here’s how you can do that in WooCommerce:

1. Go to WooCommerce > Settings > Better Variations. 
2. Check the checkbox next to the option ‘Enable Select2’. 
3. Input ‘#ff0000’ in the color picker field ‘Out of stock text color’ for displaying out-of-stock variation options in red color.
4. Scroll down to the bottom and click the ‘Save changes’ button.

This will display the out-of-stock variations in red so customers can quickly see which product variations are not in stock at a glance. 

How to reorder out-of-stock variations

You can also reorder out-of-stock variations using the WooCommerce Better Variations plugin. This displays in-stock variations options on top of out-of-stock variations. This can help improve your customers’ user experience as they’ll have an easier time adding products to their cart due to the available ones being first and on top of the ones that aren’t in-stock.

Here’s how you can use the WooCommerce Better Variations plugin to do this:

1. Go to WooCommerce > Settings > Better Variations. 
2. Check the checkbox next to the option ‘Enable Select2’. 
3. Tick the checkbox next to ‘Sort options’.
4. Scroll down to the bottom and click the ‘Save changes’ button.

By enabling this option, all of your in-stock product variations will be displayed on top of the out-of-stock variations on the single product page.

Show back in stock date

If you want to let customers know when the product will be back in stock, you can show a back in stock date next to the disabled out-of-stock product variation. This will encourage people to check back at a later date and buy from you then.

If customers know when the product variation is back in stock, they’ll be more likely to check back at a later date. This is particularly useful for online stores that have to restock variations regularly.

Here’s how you can show the back in stock date using the WooCommerce Better Variations plugin:

1. Go to WooCommerce > Settings > Better Variations.
2. Tick the checkbox next to ‘Show Back in Stock date’. 
3. You can also set the ‘Back in stock text’ and hide dates in the past.
4. Scroll down to the bottom and click the ‘Save changes’ button.

After enabling this option, you can now set the back in stock date from the ‘Product data’ section. For each variation, it will display a new text meta box named ‘Back in Stock Date’. This will appear right next to your variations options.

It will look something like this on the front-end:

Create a price matrix for product variations with different stock levels

Want to display multiple product variations with different stock levels in a more attractive way? Consider creating a WooCommerce price matrix! 

A price matrix is a grid or table-style layout that you can use to display your product variations. This format makes it easy for customers to compare variations and get stock information on multiple variations at a glance, which makes purchasing seamless! It is especially useful if you’re selling variations of products with multiple common attributes. 

For example, let’s say you’re selling variations of a t-shirt in different colors, and they’re all available in 3 sizes. Here’s how you can create a WooCommece price matrix using Better Variations in 3 simple steps! 

1. Set up your variations and follow the steps mentioned in the previous sections to add their respective stock details.
2. Go to WooCommerce > Settings > Better Variations. 
3. Select ‘Grid’ as the ‘Display mode’.
4. That’s it!

Since there are 2 attributes (size and colour), your variations will be shown in a grid style. Customers can easily see the stock level for each variation and choose the product quantity they want seamlessly.

Pro Tip: If you want to increase your product variations visibility and want to enable customers to buy many variations of the same product, check out how to display WooCommerce variations as single products.

Conclusion

The WooCommerce Better Variations plugin makes it easy to grey out-out-stock variations on your WooCommerce store. You can also customize and style your out-of-stock and in-stock variations in a variety of different ways. This also helps in providing a much better user experience for your customers.

Let’s quickly recap the key points:

• You can disable out-of-stock variation options so your customers don’t add them to cart later only to find out they can buy them. 
• By styling your out-of-stock variations with different colors, you can take back orders or let visitors know which options aren’t available to purchase.
• You can also encourage people to visit your site at a later date by providing a show back in stock date on out-of-stock variations.

We showed how you can grey out out-of-stock variations in WooCommerce and, hopefully, you’re in a better position now to take things further yourself.

Ready to start disabling out-of-stock variations on your online store? Get the WooCommerce Better Variations plugin today!

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

The post How to grey out WooCommerce variations that are out of stock appeared first on Plugin Republic.

Did you know that listing WooCommerce product variations in your online store can help increase sales for your business? If you’re thinking about adding variations to your existing products, or if you already have product variations but aren’t displaying them in the best way, this article is for you.

There are four main reasons why setting up product variations in your WooCommerce store is a good idea:

•  They increase your sales by offering more options to your customers (for e.g., a customer might not want a watch with a black strap, but will buy the same watch with a brown strap).
•  They improve customer satisfaction by giving them what they want, which can lead to repeat customers.
• They make it easier for customers to add products to their cart and checkout since they don’t need to go to different product pages just to see product variations.
•  They make your site look more professional and well-designed.

In this guide, we’re going to cover the top 10 WooCommerce plugins for displaying product variations.

Why are WooCommerce product variations important?

Product variations are a great way to increase sales. If customers have more options to choose from for the product they’re interested in, they’ll be able to select the exact item they want. This gives them a better shopping experience and boosts the chance of them completing their purchases.

There are many ways store owners can use WooCommerce product variations. For example, if you run an online apparel store, you can offer multiple colour or size options for customers to select before adding a product to their cart. This can help users find what they’re looking for easily when shopping from your online store.

Similarly, you can also use product variations on your online store to facilitate bulk purchases of the same item. For instance, if a customer wants to purchase five t-shirts but only wants three in Medium size and the other two in Small, you can let them add all five t-shirts to their shopping cart from the same page.

In addition to this, product variations are also great for offering product bundles on your online store. For example, you can sell a “Hoodie Pack” that lets customers purchase 3 hoodies at once and choose their desired sizes and colours from the same screen, without having to add each hoodie individually.

Why use a plugin for WooCommerce variations?

WooCommerce comes with functionality to let you create product variations out of the box. However, there are some limitations when it comes to managing and displaying them on the front end of your online store.

A WooCommerce plugin will give you much more functionality to manage and display product variations. You’ll also save a lot of time, headache, and money if you use a readily available plugin compared to coding a custom solution.

What’s more, WooCommerce offers very limited customisability of how product variations look and feel on your online store by default. In fact, you can only display a dropdown menu to showcase product variations. This gives your product pages a plain and bland look. Depending on the WooCommerce product variations plugin you use, you’ll be able to display all product variations in a grid or table or let users view different variations using attractive swatches.

Another major limitation of default WooCommerce is that it makes it difficult for you to inform your customers which variations are in stock and which aren’t. This can lead to a confusing and disappointing customer experience when users order something your online store doesn’t actually have in stock. Some WooCommerce product variation plugins solve this by making it possible for your customers to see which variations are in stock, so they don’t end up placing orders for out-of-stock products from your online store.

Top 10+ product variations plugins for WooCommerce

When deciding on a plugin, it’s important to consider the kinds of products you stock, how many variations you have for each product, how often your products go out of stock, and other important factors such as budget and tech support.

Here, we’ll list the top 10 best product variation plugins for WooCommerce that offer slightly different features from each other. We’ll dive deeper into the key features of each plugin so you can choose the best solution for your online store.

#1. WooCommerce Better Variations

WooCommerce Better Variation offers a complete solution for managing and showcasing product variations on your online store.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

The plugin offers two main features that make it super useful for WooCommerce sites. For starters, you can set clear differentiation between variations that are in stock and those that are out of stock. The plugin lets you disable or grey out out-of-stock products while also giving you the option to add optional text and a “back-in-stock” date. This is a great way to enhance the shopping experience on your online store while encouraging customers to check back for product availability at a later date.

Another useful feature of the WooCommerce Better Variations plugin is that it lets you re-style and re-sort variations by giving out-of-stock items a different colour than in-stock items. This way, you can showcase in-stock product variations on top of out-of-stock ones.

In addition to this, the plugin also lets you display all variations for your products in a grid layout. This makes it easier for customers to order multiple variations and multiple products at once as they can clearly see all variations in one view on your shop page. For instance, a customer can order multiple items of a single product in different sizes. This way, if a customer wants to get 2 t-shirts in Large size and one in Medium, they can do that in one click thanks to the grid style display.

In addition to the WooCommerce Better Variations plugin being intuitive and fully compatible with all WordPress themes, it also works really well with the WooCommerce Product Add-Ons Ultimate plugin. This way, users can personalise their products and create their own bundles. You’ll also get the added benefits of displaying product variation options in attractive swatches or custom product variation fields.

WooCommerce Better Variations is a must-have plugin for any WooCommerce store that sells product variations, especially if your online store has lots of variations for each product. This way, you can display them neatly and ensure a solid customer experience by informing customers when specific product variations are out of stock or when they will be back in stock.

Want to get a better idea of how the plugin actually works? Check out the WooCommerce Better Variations demo site, that’s already set up and ready to go.

#2. WooCommerce Product Table Ultimate

The WooCommerce Product Table Ultimate plugin allows you to display your products in a sortable product table that makes it easy for customers to find the product variations they need.

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

Each product can be displayed in a row so you can let customers add multiple products to their cart from a single page, including variable products and products with add-on fields. One great thing about the WooCommerce Product Table Ultimate plugin is that it lets you create and display product tables anywhere on your site without having to touch a single line of code.

That’s not all, you also have full control over the customisability of your product tables. This means you can choose which columns to include such as thumbnails, product titles, SKUs, descriptions, stock level attributes, categories, tags, quantity, and add-to-cart buttons. This also means you have multiple ways you can display product variations on your WooCommerce site.

For instance, you can include a table on a product page that lets customers view all variations of a product at once and select the ones they want to add to their cart within a few clicks. Similarly, you can also create one big product table that displays your entire product catalogue and lets your customers choose between product variations from the same screen.

Additionally, the WooCommerce Product Table Ultimate plugin also lets you offer customers the option to add multiple products to their shopping cart at once by using a checkbox next to each product row. Once customers have selected their preferred variations for each product they want to buy, they can simply click on an “Add all to cart” button.

#3. Swatchly

Swatchly is a simple-to-use plugin that gives you a lot of options to create swatches for displaying product variations on your WooCommerce site.

Using the plugin, you can add up to three different swatch types including image swatches, colour swatches, and label swatches while also having the option to choose between three shapes: square, rounded, or circle.

Another great feature about Swatchly is that it lets you set swatch size, margin alignment, and other design options. This is a great way to make your product pages more professional and ensure your product variations look attractive.

In addition to this, the plugin also lets you enhance the shopping experience on your online store by offering the option to disable out-of-stock variations from swatch items.

#4. YITH WooCommerce Color and Label Variations

YITH WooCommerce Color and Label Variations offers a professional solution for displaying product variations better on your online store.

The plugin lets you add unlimited variations for each item by using product attributes. This allows you to sell products with lots of variations, which makes it easier for customers to select their desired variations quickly. You also spice up the look of your WooCommerce product pages by replacing the standard WooCommerce selects with responsive icons, custom product images, and dynamic labels.

The YITH WooCommerce Color and Label Variations plugin is a great option if you want to add colour swatches to your variable products or are looking to easily add images to every variation you create. 

#5. Variation Swatches for WooCommerce

Variation Swatches for WooCommerce is an intuitive plugin that makes it easy to display swatches instead of the generic-looking WooCommerce variation dropdown menus.

The plugin lets you transform the default variation selects that WooCommerce comes with into radio images, colours, and labels. You also have full control over how your swatches will look on the front end and you can choose from different design styles including rounded swatches or circle swatches.

A standout feature of the Variation Swatches for WooCommerce plugin is that it not only lets you display product variations on the product page itself, but you can also showcase product variations in the quick view on many WooCommerce themes.

#6. WooCommerce Attribute Swatches

WooCommerce Attribute Swatches lets you replace WooCommerce’s variation dropdowns with colour, image, and text swatches.

This plugin is a solid option if you want total customisation of your swatches. For example, you can categorize swatches into groups, such as by having a swatch for plain product variations and a swatch for patterned product variations. You can adjust the colour of your swatches to make sure they match your products. And, if there’s a swatch styling you like, you can choose to assign it to all your products or reuse it on specific products.

Other notable features include large previews for image swatches and tooltip swatch hints which give customers more details about the item. If any of your products are out-of-stock, they will be marked as such on the swatches.

#7. Variation Swatches & Photos for WooCommerce

Variation Swatches & Photos for WooCommerce is a simple-to-use plugin that’s designed to help you replace the default WooCommerce product variations display menus.

You can replace the default dropdown menus with custom-looking product variation swatches and images. This gives you a more visual way of showing different colours, sizes, styles, and other attributes of a product while making it easier for customers to differentiate between different product variation options.

#8. Product Variations Table for WooCommerce

Product Variations Table for WooCommerce is a robust plugin that lets you showcase product variations in a table-style layout on your online store.

By displaying product variations in a table format, you make it easy for customers to filter through all available variations for a product to find the exact attributes they need. This way, they can add the item to the cart directly using the table, making the shopping experience on your online store frictionless.

#9. WooCommerce Additional Variation Images

The WooCommerce Additional Variation Images is a unique product variation plugin that lets you showcase product variations with images and videos.

You can add images and even videos to better visually represent each product variation option on the front end of your online store. This makes it easy for your customers to identify product variations better and helps them differentiate each variation from others.

#10. Variation Switcher in Cart for WooCommerce

The Variation Swatcher in Cart for WooCommerce is also a unique mention in our list as it does something different from most “traditional” product variation plugins.

The plugin makes it possible for your customers to select their product variation options directly from the cart. This helps improve the shopping experience on your online store as this saves your customers the hassle of removing the item and having to find the right product page once again.

#11. WooCommerce Variation Prices

WooCommerce Variation Prices allows you to replace the default price range with any other format.

WooCommerce displays variation prices as range, which is too limited for many stores. WooCommerce Variation Prices improves the display of variation prices by replacing the price range with prices such as “$50+”, “From $50”, or any format you like. You can also replace the dash between the low-high variation prices with anything – e.g. “$50 to $100” or “$50 / $100”. Another useful strategy to draw attention to your pricing is displaying the variation starting price or top price only – e.g.  “$50+” or “Up to $100”.

On top of being able to replace the price range format, WooCommerce Variation Prices also lets you list all variation prices immediately. This way, customers don’t have to select a variation before they can see the price which could potentially improve customer experience. This plugin works with grouped or variable products and is easy to use and set up.

Which WooCommerce product variations plugin do I need?

All the WooCommerce product variations plugins we’ve listed above give you many options for managing and displaying product variations on your online store. However, if you’re looking for one, perfect plugin that lets you optimise your product variations, WooCommerce Better Variations is the way to go.

It’s very important to give your customers better clarity and visibility on your product variations, so they’re able to make quick informed purchase decisions. This is why the WooCommerce Better Variations plugin is the ideal option as it lets your customers know which variants are in stock, which are out of stock, and when they’ll be restocked again.

The WooCommerce Better Variations plugin also facilitates bulk purchases thanks to its “Grid” mode that makes it easy for customers to see how many items are in stock for each product variation. As a result, customers who want to purchase products in larger quantities can easily buy multiple variations of each product in bulk.

With this plugin, your product listings will look aesthetically better, but more importantly, your customers will have a better time buying from your store. This not only helps boost sales but is a great way to encourage more customers to visit your online store again.

Getting started with WooCommerce product variations

Here, we’ll show you how easy it is to set up the WooCommerce Better Variations plugin on your online store and optimise your product variations.

For this, you will need a WordPress site with the WooCommerce plugin installed. You’ll also need the WooCommerce Better Variations plugin to display variations better on your online store.

Step #1: Install and activate WooCommerce Better Variations

First, get the WooCommerce Better Variations plugin and install it on your WooCommerce site. Once you’ve downloaded the plugin’s .zip file, navigate to Plugins → Add New from the WordPress admin panel dashboard.

Upload the plugin to your WooCommerce site and click on the Install Now button. Make sure to activate the plugin before continuing. Once the plugin is installed, navigate to WooCommerce → Settings → Better Variations and click on the Licence link from the top.

Enter the licence key given to you at the time of purchase and click on the Save changes button to continue.

Step #2: Select display mode

With the plugin installed and activated on your WooCommerce site, navigate to WooCommerce → Settings → Better Variations to select the display mode.

Using the DIsplay mode dropdown menu, you can either select the Standard or the Grid display mode. The Standard display mode works great if you want to grey out or disable out-of-stock variations on your online store. You can display custom text and custom back-in-stock text to inform customers when they should check back. In addition to this, using the Select2 section, you can also customise how out-of-stock and in-stock variations look on the front end.

You can display quantity fields for each variation using the Grid display mode. This will let customers select multiple items using the same product page and select their desired variations even when purchasing in bulk.

Once you’re done selecting your variations display mode, make sure to click on the Save changes button to continue.

Step #3: Preview

If you’ve selected the Standard display mode, customers will be able to tell which product variations are in stock and which are not available for purchase.

On the other hand, by selecting the Grid display mode, you can let customers select their desired quantities for specific product variations and add them to their cart at once.

This makes it easier for customers to bulk purchase variable products on your online store.

Add product variations to your store with WooCommerce Better Variations

Displaying product variations using default WooCommerce functionality limits the customer experience and makes your online store look and feel more generic. By using a WooCommerce product variations plugin, you have more ability to manage and display product variations on your online store.

While there are many plugins that let you display product variations on your online store, we recommend using the WooCommerce Better Variations plugin as it’s the perfect solution for all types of WooCommerce sites that have products with extra options or product variations.

The plugin offers an all-in-one solution for managing your product variations better. You can display out-of-stock and in-stock product variations in custom colours, making it much easier for customers to identify products that are available for purchase. In addition to this, the plugin also lets you display product variations in a grid-style layout that’s easy for customers to select exact quantities for variations while also being able to purchase multiple product variations in one click. This is also a great way of offering a full scope of your store’s inventory and delivering a good customer experience on your online store.

Other than WooCommerce Better Variations, the WooCommerce Product Table Ultimate plugin is another excellent choice for displaying product variations better on your online store. You can use it to display all your products in one table, making it much easier for customers to view multiple products and select different product variations for multiple products at once.

Both plugins can be a great help for your ecommerce store especially when it comes to enhancing the overall shopping experience. However, if you’re constantly finding out that your online store’s products are out of stock most of the time, the better option is to get started with the WooCommerce Better Variations plugin first.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Ready to start optimising product variations on your WooCommerce site? Get WooCommerce Better Variations today!

The post 10+ best WooCommerce plugins for product variations appeared first on Plugin Republic.

The reality is that there are many reasons why you’d want to showcase a product, even if it’s out of stock. For instance, you can display the out-of-stock status when the product is temporarily unavailable and will be available for ordering again.

However, if you’re looking to hide out-of-stock products from your online store, there are options. You can use the default WooCommerce options that have limited capabilities or use a plugin to do it for you.

Why would you want to hide WooCommerce out-of-stock products?

In this tutorial, we’ll show you how to hide out-of-stock products in WooCommerce. We’ll use the default options and a plugin that enables you to hide out-of-stock products in the most ideal, conversion-optimised way.

It can be frustrating for buyers to find a product they like only to see that it is unavailable for purchase. This can send a negative signal and make them not buy from your store at all, even if you have other products available that they might be interested in.

As an ecommerce store owner, the last thing you want is to create a negative bias against your online store. Hence, it might be a good idea to hide the WooCommerce products that are out of stock and avoid ruining the shopping experience. You should also consider greying out-of-stock product variations to give customers the most relevant product information.

Let’s take a closer look at some of the reasons why you’d want to hide WooCommerce out-of-stock products from your online store:

• To prevent disappointment. One of the main reasons why you’d want to hide a WooCommerce product’s out-of-stock status is to prevent customer dissatisfaction. You don’t want buyers to add products to their cart only to find out they’re unavailable. Poor inventory management puts out a bad brand image and can have a negative impact on customer retention.

• To ensure optimal customer experience. You want to avoid ruining the whole shopping experience on your online store by letting customers add unavailable products to their carts. By hiding out-of-stock products, you only let customers add products that they can actually purchase. This ensures an optimal interaction with buyers and helps you generate revenue for your business.

• To minimise order cancellations or refunds. By not hiding out-of-stock products, you will see an increase in order cancellations or refunds on your WordPress site. For instance, when a customer receives an email saying they tried to purchase unavailable products, there’s a high chance that the customer might want to get a refund or cancel their order instead of making another purchase from your online store. This way, your business loses potential sales to competitors.

How to hide out-of-stock products in WooCommerce

If your online store is powered by WooCommerce, there are many ways to hide out-of-stock products but we’re going to mention some of the easiest ways to do this. The option you decide to go with depends on your level of tech-savviness and what you’re looking to achieve.

Using default WooCommerce

WooCommerce, by default, offers some product out-of-stock visibility options that you can use to show or hide items from your online store.

Navigate to WooCommerce → Settings → Products. From the Products tab, select the Out of stock visibility checkbox.

This will hide all out-of-stock products from your WooCommerce site so customers cannot add unavailable products to their shopping cart. Click the Save changes button.

It automatically makes your WooCommerce products hidden from multiple sections of your site such as the shop page, single product page, and the related products section. If you want to hide products on specific pages of your WooCommerce site or to make any customisations, you’ll need to use code snippets and edit the functions.php file of your site.

This is not at all recommended unless you’re a developer and are comfortable with troubleshooting bugs and errors in your WordPress site’s code. If you’re not experienced with coding, you’re more likely to break your site and lose orders in the process as your ecommerce store will not be live.

The methods mentioned above involve a lot of tedious work and require you to repeat them for each product individually. It is not a scalable option, nor does it allow for much flexibility, which is essential for creating a unique shopping experience on your online store.

Instead of hiding out-of-stock products, you can showcase the product in your WooCommerce shop without giving customers the option to buy it. In other words, you can remove the “add to cart” button, hide the price, grey out products, make them unselectable, and add a “back in stock” date.

With this solution, you can showcase WooCommerce products that are not in stock while keeping potential customers informed and without making them feel like they’ve been misled. As a result, it helps you retain potential customers and keeps them interested in making purchases on your WooCommerce site.

Using a WooCommerce hide out of stock products plugin

Although WooCommerce offers limited product visibility options, it doesn’t mean you cannot properly hide out-of-stock products from your online store without negatively impacting the customer experience.

This is why it’s best to use a WooCommerce hide out-of-stock products plugin to do this. It’s the easiest and most ideal way to customise out-of-stock WooCommerce products and variable products on your online store.

With so many WooCommerce hide out-of-stock products plugins available, the WooCommerce Better Variations plugin stands out from other similar solutions.

The WooCommerce Better Variations plugin is an all-in-one solution for managing and displaying your WooCommerce products and product variations better.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

You can use it to help your customers better understand what’s in stock and what’s not when they visit your online store. The intuitive plugin lets you disable and style sold-out product variations. This way, you can showcase your WooCommerce out-of-stock products better while ensuring your online store offers a unique to your brand shopping experience.

In addition to this, you can also customise and style both in-stock and out-of-stock products by displaying them in different colours. This gives you more flexibility over how out-of-stock products appear on your shop pages while also offering some control over the products that are in stock.

The WooCommerce Better Variations plugin also features a grid-style layout for displaying product variations on your online store. This not only lets customers see all product variations information in one view but also lets users select quantities for different variations from the same page.

The best part about the WooCommerce Better Variations plugin is that it’s very easy to use, even if you’re not very experienced with coding.

Let’s dive deeper into how you can use the plugin’s robust functionality to customise out-of-stock products in WooCommerce.

Once you have the WooCommerce Better Variations plugin installed on your WooCommerce site, navigate to WooCommerce → Settings → Better Variations.

Selecting the Disable out of stock options checkbox will grey out “out-of-stock” variations and will not allow customers to select the product option.

You can also tick the Show unavailability text checkbox and set a custom text for out-of-stock items.

This way, customers will not be allowed to add products to their shopping cart that are out of stock. Instead, you can inform them to check back soon to purchase the product. However, it’s still important to let customers know when exactly to check back on the out-of-stock products.

You can do this by selecting the Show Back in Stock date checkbox that lets you display a date for when the product will be updated with new inventory. You can also add a custom Back in stock text and choose whether to hide the dates in the past or not.

Once you click on the Save changes button, head on over to the “out-of-stock” product’s edit page.

Select the exact day using the date picker under the Back in Stock Date field. Make sure to click on the Update button to save changes on the front end.

Customers will now be informed about the exact date they can check back to purchase the out-of-stock product that they were not able to add to their cart previously and proceed to checkout.

Additionally, using the three colour fields at the bottom of the page, you can set custom colours for out-of-stock products and make them different from in-stock products. Simply select the Enable Select2 checkbox and use the colour pickers to adjust and set colours for out-of-stock and in-stock product variations.

This makes it easier for customers to differentiate between the two stock statuses and helps offer a more unique shopping experience. It’s also a great idea to showcase the in-stock product options before the out-of-stock ones.

Enable the Sort options checkbox to show in-stock product options first, so customers only see available product options at the top of the dropdown.

This makes it less disappointing to see some of the product variations out of stock while making it easier for customers to tell which products are not available for purchase.

The WooCommerce Better Variations plugin also lets you display your online store’s product variations in a much more attractive and professional way, using a grid-style layout with quantity selectors for each product option. To do this, navigate back to WooCommerce → Settings → Better Variations and select Grid from the Display mode dropdown menu.

You can also choose to show prices and stock status for each product variation option before clicking on the Save changes button to continue.

This not only makes it easier to view each product variation in one view but also allows customers to easily order products in bulk. This is why we also recommend using the WooCommerce Product Table Ultimate plugin to list products in a table and display various fields – including stock attributes – on a single page.

While the WooCommerce Better Variations plugin only applies to out-of-stock variations, the WooCommerce Product Table Ultimate plugin also applies to simple products and their stock levels.

Conclusion

Hiding out-of-stock products on your WooCommerce site is a great way to ensure you don’t display products that are not available for purchase to potential customers. While hiding out-of-stock products is an easy option, there are many ways to also showcase unavailable products without creating a negative user experience. In fact, some even let you create a better user experience on your online store.

This is where the WooCommerce Better Variations plugin stands out, as it helps you create a positive user experience where you can showcase products that are currently out of stock without missing out on sales or leading to cart abandonment.

Here’s what customers have to say about using the robust plugin for their use case:

“This is the only plugin I’ve found that handles out of stock variations well! With the plugin, the out of stock options can be greyed out and made unselectable, or the styling (colour and sort order) of the variations can be altered to make the out of stock options appear at the bottom of the list and they are clearly shown in a different colour with a message. Highly recommended.”

– Laurel E Armstrong de Buisseret from Brommiemods

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Ready to start easily hiding out-of-stock products in WooCommerce without spoiling the shopping experience? Get WooCommerce Better Variations today!

The post Hiding out of stock products in WooCommerce: the easy way appeared first on Plugin Republic.

If you’re like most store owners, you’d want to display the lowest price since buyers are more attracted to low prices. It makes sense to display the main price as “From $19” instead of a regular price range template like “$19 to $25” or the maximum price on the shop page, category pages, and single product pages.

Research about customer behavior regarding choosing product variations suggests:

“As customers are risk-averse and avoid extreme options, they tend to choose the middle, the compromise option. This compromise effect is particularly strong when consumers feel a need to justify their purchases to an imaginary or real third person and when they are unclear about this third person’s preferences. The middle option can be justified the easiest as experiments and think-aloud protocols showed.”

– Source: Simonson, Choice Based on Reasons (1989)

In this tutorial, we’ll explain how you can change the way WooCommerce variation price products show up on the front-end of your online store. Instead of the regular price range, you can show prices starting from the lowest variation price or the sale price.

How to change the price of a product variation in WooCommerce

With WooCommerce, you can manually change product variation prices using the WordPress admin dashboard.

To do this, navigate to Products → All Products and select the variable product you want to edit the regular price or sale price of. If you don’t already have one, you can create variations based on product attributes. Click on the Variations tab under the Product data metabox.

Click each product variation one at a time, set the variation price based on the product attribute value, and then click on the Update button to save changes. You can also set the sale price from the same screen.

This method works pretty well but can be very time-consuming and offers limited customisation options for displaying variation prices for products. You have to set the price manually for each new variation you add.

It’s much easier, faster, and less time-consuming to change WooCommerce variation prices using a WordPress plugin that’s designed to do so. In addition to this, you might also want to further customise your WooCommerce variable products by greying out out-of-stock variations and displaying variations in a grid, with the help of a robust WooCommerce variation price plugin.

How to edit the price of a product variation using WooCommerce plugins

There are many variation price plugins out there but choosing the right one can be a challenge, especially if you’re new to the WordPress space. We recommend using the WooCommerce Better Variations plugin for customising your product variations.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Here’s why:

WooCommerce Better Variations is a plugin designed to power up your variations and help you take your WooCommerce store to the next level. The plugin offers extensive customisation options for product variations without requiring you to add HTML code to your files. You can grey out the out-of-stock products and make them unselectable. Or, you can change the color or sort order of the variations to make the out-of-stock options appear at the bottom of the list and clearly show them in a different color with a message.

This sets the right expectations with customers and helps them make their decision more easily.

In addition to this, the WooCommerce Better Variations plugin also lets you display product variations in a grid-style layout. This lets you offer a unique and user-friendly shopping experience on your WooCommerce site. Customers can select quantities for different variations and see all variation information on one screen. As a result, it makes it easier for customers to place their orders and makes your product pages look unique.

Here’s what users have to say about the robust plugin:

‘Our customers were finding it tough to see what was in stock when multiple attribute variations were in use. This plugin makes it easier for customers to find the right sizes and colours in stock for variations.’

– Jenni Kenyon from K9fitness.dog.

How to customise out of stock products and display product variations in a grid format

Here, we’ll show you how to customise out-of-stock products and display product variations in a grid template using the WooCommerce Better Variations Plugin.

For this, you’ll need a WordPress site with the WooCommerce plugin installed and set up. In addition to this, you’ll also need some variable product types added to your WooCommerce store.

Step #1: Install and activate WooCommerce Better Variations

The first thing you need to do is get the WooCommerce Better Variations plugin and install it on your WooCommerce site.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

After purchasing a copy of the WooCommerce Better Variations plugin, you will receive an email containing a link to the zip file and the license key. Once you’ve downloaded the zip file, navigate to Plugins → Add New → Upload Plugin, and upload the downloaded zip file to your WooCommerce site. Click on the Activate Plugin button to continue.

Now that the plugin is installed and activated on your WooCommerce site, you need to enter the license key provided in the email at the time of purchase. Navigate to WooCommerce → Settings → Better Variations and click on the License link from the top of the screen. Enter your license key in the text field and click on the Save changes button to continue.

Step #2: Configure plugin settings

Now we can configure the plugin settings to start customising product variations and the price display on the front-end. To begin, navigate to WooCommerce → Settings → Better Variations and enable the checkbox next to Enable Select2.

This lets you customise how out-of-stock product variations are displayed on your product pages. You can set the In stock text color, Out of stock text color, and the Highlight background colour. You can also select the check box next to Sort options to automatically show in-stock items at the top. In addition to this, you can also customise the Unavailability text for out-of-stock product variations.

Once you’re done, click on the Save Changes button to continue.

Customers can view the out-of-stock product variations in red color while the available variations will be displayed in green color.

The plugin also lets you display product variations in a grid-style layout. This allows customers to view product variations and select product quantities quickly before adding products to their cart.

To do this, navigate to WooCommerce → Settings → Better Variations and select Grid using the dropdown menu next to the Display mode option.

Once you’re done, click on the Save changes button to continue.

Step #3: Preview

Users will be able to view and select all product variations in a clean table layout on the front-end of your WooCommerce site. The price display will look something like this:

Bonus: Create better product variations in WooCommerce

Since the focus of this tutorial is to create better product variations in WooCommerce, it’s a great idea to create custom product variations and price them differently. To do this, we can use the WooCommerce Product Add-Ons Ultimate plugin.

The WooCommerce Product Add-Ons Ultimate plugin offers an all-in-one solution for creating unique products that help improve the customer’s shopping experience on your WooCommerce store. By offering a personalised shopping experience, you let customers select extra product options before clicking the add to cart button and proceeding to checkout.

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

You can add custom fields such as text, number, textarea, checkbox, radio, select, upload, colour picker, date pickers, name your price, images swatches, and calculation fields to your WooCommerce products. This way, you don’t have to add variations – you can let users customise their orders. It also lets you set a field price for dynamic pricing. The plugin also works for simple products and grouped products.

Let’s dive deeper into how you can use the WooCommerce Product Add-Ons Ultimate plugin to create better product variations in WooCommerce.

Step #1: Install the WooCommerce Product Add-Ons Ultimate plugin

After downloading and installing the WooCommerce Product Add-Ons Ultimate plugin, navigate to WooCommerce → Settings → Product Add-Ons and click on the License tab to activate the plugin.

Enter your key and click on the Save changes button to continue.

Step #2: Display variation-specific fields

The WooCommerce Product Add-Ons lets you display variation-specific fields on your WooCommerce store. This means that a hidden field will only be displayed when the user selects a specific product variation. For instance, you could let users select “Extra fast delivery” if they select the highest-priced product variation.

To do this, navigate to the product’s edit page and select the Product Add-Ons tab from the Product data metabox. Create a new Checkbox field and set field details. Optionally, if you wanted to set dynamic pricing, you could enter a value in the Field price field.

Using the Variations text field, select the variation you want the user to select in order to see this checkbox field. Click on the Update button to save changes.

Step #3: Customise the price label

You can also customise the variable product price label for WooCommerce product variations on your online store without using HTML or CSS. Go to WooCommerce → Settings→ Product Add-Ons and scroll down to the Labels section to customise the price label. You can change this to something like Starting from or From instead of displaying the default price range or the product’s sale price.

Click on the Save changes button when you’re done. Users will be able to see the hidden check field if the selected variation price is the highest-priced option. The price display will look something like the screenshot below:

The WooCommerce Product Add-Ons Ultimate is used and recommended by many WordPress experts. Here’s what one happy customer has to say:

‘This plugin has been a game-changer for us. We sell custom art worldwide and Product Add-Ons Ultimate has enabled us to deliver product personalization on a global scale’

– Miguel Borratxero from CustomPortraits.net

Conclusion

Displaying different prices for variations can help you cater to all types of shoppers. Instead of displaying WooCommerce variation prices in a range, you might want to show the lower price only to encourage buyers to click through to the product page.

The WooCommerce Better Variations plugin simplifies the process of changing WooCommerce variation prices and offers a whole suite of customisation options for your product variation prices.

You can grey out out-of-stock product variations and let customers know when they will be back in stock. It also offers one of the best ways to display product variations in a grid-style layout on your WooCommerce product pages. This lets users view all product variations at a glance and set product quantities before adding product variations to their cart.

And, you can use the WooCommerce Product Add-Ons Ultimate plugin to modify the variable product price labels without messing around with HTML code. This way, you can show a custom label on the shop page, category pages, and single product pages instead of a price range.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

Ready to start customising WooCommerce variation prices on your online store? Get WooCommerce Better Variations and WooCommerce Product Add-Ons Ultimate today!

The post WooCommerce variation price – how to change the way variable price products are shown appeared first on Plugin Republic.

The default WooCommerce shop page displays products with large images, prices, and add-to-cart buttons. This isn’t suitable for all types of products. If customers typically purchase multiple products per sale or if you sell products with variations, creating a WooCommerce price matrix can help you enhance the customer’s shopping experience.

The main benefit of a WooCommerce price matrix is that customers can compare multiple products and their prices from the same screen and make informed buying decisions. They can see prices and stock levels for all variations at the same time – and add multiple variations to the cart in one click. Depending on the types of products you sell (and your target market), you can create different types of price matrices in WooCommerce.

In this tutorial, we’ll show you three different ways to create a WooCommerce price matrix.

What do we mean by a WooCommerce price matrix?

A WooCommerce price matrix is a way to display the prices of products in a table layout or grid on the front-end. There are different types of WooCommerce price matrices that you can create depending on the types of products you sell.

Displaying prices in a matrix format on the front-end makes it easy for customers to make informed buying decisions. It also increases product (and variation) visibility which means customers will be more likely to discover products and add them to their cart. Finally, a WooCommerce price matrix allows you to speed up the purchasing user flow on your online store.

Let’s step through a few examples of online stores that can benefit from creating a WooCommerce price matrix:

• Product catalogs. Grocery stores, stores that sell physical or digital goods, or wholesale stores can benefit from using price matrices for their products. You can use it to list all of your products in a table layout on the front-end. Customers can add products to their cart as they browse the price matrix.
• Product comparisons. Marketplace site owners can use price matrices to display product comparisons of two or more products on their online WooCommerce store. It makes it easy for customers to make informed buying decisions.
• Calculation and lookup tables. Online store owners that sell custom products such as blinds or wallpaper rolls can use price matrices for calculations and lookup tables. This makes it easy for customers to purchase as much as they need instead of pre-determined dimensions only.

Put simply, a WooCommerce price matrix can help you enhance your online store’s user experience for customers and, potentially, increase your average order value.

Method #1: Price matrix for product variations

One way to create a WooCommerce price matrix is by using the product’s attributes. This is perfect for products that have lots of variations. Customers can simply enter the quantity for the variations they’d like to purchase and the price will dynamically update on the single product page.

This way, customers don’t have to use the dropdown to select the variations they’d like to purchase and add them to cart. It’s the easiest way to speed up the purchasing user flow while delivering a good user experience.

To create a WooCommerce price matrix for product variations, you’ll need the WooCommerce Better Variations plugin. You can use it to create a variations grid on the front-end that works as a WooCommerce price matrix.

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

A price matrix for product variations is perfect for store owners that are looking to sell wholesale goods or stores that sell products with lots of variations. It increases variation visibility which means customers will be more likely to purchase more products from your store.

Each variation will have its own quantity field and optionally display price and stock information.

How to create a price matrix for product variations

The first thing you need to do is create a variable product and add the different variations to it. In order to create a grid, your variable product should have one or two attributes. Also, your attributes should be created at Products > Attributes. Custom attributes created at the product level won’t work with this method.

As an example, if you sell t-shirts, your attributes could be Size and Colour. The attributes you decide to go with depend on the products you sell.

The price matrix will look something like this on the front-end:

Customers can use the quantity selectors to enter the number of units they’d like to purchase of each product variation. They can then add them to their shopping cart in one go.

You can check out the demo page here for a working example.

Once you’ve added all of your variations, enter a price, assign stock, and upload images for each one.

Variations price matrix settings

With your variable product created, you can now set it to display variations in a matrix. Go to WooCommerce > Settings > Better Variations and choose ‘Grid’ as the ‘Display mode’.

This will display the variations in a matrix. If you have two attributes, then the variations will be displayed as a table. If you have one attribute, they’ll be displayed in a single column. Each variation will have its own quantity field where your customers can choose the quantity they want without having to laboriously select each variation separately.

You can also choose some other settings. Select whether to display the price and/or stock information under each variation field.

WooCommerce price matrices with product add-ons

If you’re using Better Variations to create your price matrix, you can also use the WooCommerce Product Add-Ons Ultimate plugin to add extra fields. So if you’re selling t-shirts, you might want to allow the option for users to upload a logo or other graphic. The Add-Ons Ultimate plugin makes this easy.

Method #2: Price matrix for product catalog

Another way to create a WooCommerce pierce matrix is by listing products in a table layout. This way, customers can browse through the product catalog and add products to their cart as they go. In addition to this, it increases product visibility. As a result, you’re more likely to sell more products per sale.

This is perfect for simple products and products with variations whether they’re physical goods or digital products. You can configure the price matrix to display whichever product details you’d like. For example, you can choose to display the product title, description, categories, price, and add to cart buttons.

The easiest way to create a price matrix for a product catalog is by using the WooCommerce Product Table Ultimate plugin. This also works for products with variations.

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

It’s perfect for stores where customers are likely to buy more than one item from per sale. For example, stores that sell groceries, apparel, arts and craft supplies, toys, or accessories can benefit from a price matrix for product catalogs.

The price matrix will look something like this on the front-end:

You can also make the columns sortable and allows users to filter on terms like categories, attributes or tags.

How to create a price matrix for product catalog

Once you have products added to your online store, you can create a price matrix for your product catalog. All you have to do is create a new page where you’ll display the price matrix.

Once that’s done, click the ‘New Block’ icon and search for the ‘Product Table Ultimate’ block to add the table to a Gutenberg block. You’ll be able to preview the price matrix on the back-end and edits its parameters from the ‘Block’ menu on the right.

Be sure to check out our demo product to see how it works.

Display price matrix by category

You can also use the WooCommerce Product Table Ultimate plugin to display products in the price matrix based on categories. Configure the Gutenberg block’s settings:

1. Set the ‘Product Source’ field to ‘Categories’ using the dropdown menu
2.  Set the ‘Categories’ field to the category ID you want to display. You can also display multiple product categories in a product table. Simply enter a comma-separated list of category IDs in this field

The price matrix will now only display products from the categories you entered. This is perfect for stores that sell tons of different types of products such as grocery stores and arts and craft supply stores. Store managers can display products from a single category on a page instead of listing all of their products in one price matrix.

Method #3: Product lookup tables

If you sell custom or tailored products that have complex pricing, you can create product lookup tables. The easiest way to create this sort of a price matrix is by using the calculations fields in the WooCommerce Product Add-Ons Ultimate and Advanced Calculations plugins for creating product lookup tables for your products.

Advanced Calculations for Add-Ons Ultimate

Read prices and values from lookup tables

Find Out More

By using product lookup tables, you can calculate the total price of your product based on the customer’s requirements. You can also round up the user measurements to specific values.

Creating lookup tables for your online WooCommerce store is perfect if you’re looking to sell products with custom measurements. For instance, if your store sells wallpapers or blinds then you’ll need a way to accept custom dimensions and quote your customers. Since customers will need exact dimensions, you can use a price matrix or lookup table to determine the correct price they’ll have to pay.

Related Tutorial
Check out our article on WooCommerce calculation lookup tables for more information.

Let’s say you wanted to sell made-to-measure blinds. Once the customer enters the height and width required, the product automatically calculates the price, based on a price matrix, and displays it on the single product page. If you don’t want to provide the exact measurements the customer entered, you can round each value up to the closest predefined value.

Here’s how your price matrix could look:

You can see that we’ve got a table in a spreadsheet with values along the x-axis and the y-axis. In the example above, if the user enters any value between 121 and 140 for the x-axis and any value between 161 and 180 for the y-axis, the table will return a result of 414.

You can use this returned value to set the product price.

Take a look at the demo product here.

How to create product look up tables

First, go to Product Add-Ons > Calculations and upload your CSV file.

Then, create two number fields in your product: one for the width measurements and one for height measurements.

Then you can create your calculation field:

1. Click on the ‘Add Field’ button
2. Choose ‘Calculation’ in the ‘Field Type’.
3. Enter {look_up_table} in the ‘Formula’ field
4. Choose ‘Display As Cost’ in the ‘Action’ field 

Once you’re done setting up fields, you can define the settings for the price matrix.

You just need to confirm the field IDs where the user will enter their measurements. Then select the look up table where you’ll grab the price from.

The demo product looks like this:

When customers set the width and height of their order, the cost of the product will automatically update on the front-end.

Creating a product lookup table or price matrix is an easy way to set custom prices for products. You just need the Advanced Calculations extension for Add-Ons Ultimate and the Pro version of Add-Ons Ultimate.

Conclusion

There are different ways to create a WooCommerce price matrix and it all boils down to the types of products you sell.

To recap:

• If you sell products with variations, you might consider creating a grid that lets customers enter the quantities they’d like to purchase and update the price dynamically.
• However, if you sell simple products, you might want to create a table-style price matrix that works like a product catalog.
• And, if you sell custom or tailored products, you might consider creating lookup tables to quickly calculate the correct price.

The post How to create a WooCommerce price matrix appeared first on Plugin Republic.

In this tutorial I’m going to show you three different ways to create WooCommerce bulk variations forms. A bulk variation form allows the user to add multiple variations of a product to their cart in one go. As an extra feature, your users will also be able to include add-on fields with their variations (if required).

Creating a WooCommerce bulk variations form

Let’s quickly look at what we mean by a bulk variations form in WooCommerce. Essentially, it’s a quick way of allowing your users to order different variations of a product in different quantities.

A simple example would be tee-shirts. Let’s say you’re selling tee-shirts (possibly through a wholesale store) and your customers will want to bulk order different sizes and colours of the same basic tee-shirt.

Related Tutorial
Take a look at this article if you want to create a complete product customiser where users can design their own tee-shirt

With the standard way that WooCommerce works, the customer would need to go to the product page, select their variation, choose the quantity, then add it to their cart. They’d then need to repeat this process for every variation required. It’s highly laborious.

With the methods in this article, customers can add multiple variations of the product to the cart with one click from a single form. It’s a simpler process for the customer which should result in better sales for you. It’s ideal for any store that uses bulk ordering, like wholesale and B2B stores.

So let’s look at these three much better methods.

Method #1: Create a bulk variations form using WooCommerce Better Variations

This is the best method for creating a WooCommerce bulk variations form. It allows you to display quantity fields for every variation in a product that uses one or two attributes. If your variable product has more than two attributes, then take a look at Method 3 below.

Bulk variations form examples

In the screenshot below, you can see a variable product with one attribute. Each variation has its own quantity field with price and stock levels displayed. The user can pick as many of each variation as they like, they add them all to the cart in one click.

There’s a link to a working demo product here.

In this example, the variable product has two attributes.

You can view this demo product here.

How to create a bulk variation form using WooCommerce Better Variations

In this method, we’re using the Better Variations plugin:

WooCommerce Better Variations

Disable, style and sort out-of-stock variations

Find Out More

WooCommerce Better Variations is a simple plugin that gives you extra scope in how you display variations on the product page.

Step 1: Create your variable product

The first step is to create your variable product. Note that to create a grid, the product will need to use two attributes for its variations. In our example, that’s going to be Size and Colour – but it can be any two attributes.

Note that you should create your attributes in Products > Attributes rather than creating custom attributes per product. There is more information on creating product attributes here.

Add all your variations, give them a price, assign stock, etc.

Step 2: Set your display mode

Now you need to set the display mode in WooCommerce Better Variations. Go to WooCommerce > Settings > Better Variations and set the ‘Display mode’ setting to ‘Grid’.

That’s it! Now, all your variable products with one or two attributes will be displayed in a grid.

Step 3: Additional settings

There are some further options that you can use to determine how the bulk variations are displayed.

Mobile layout

Set this to ‘Responsive’ to ensure that your bulk variations table is responsive so that on mobile devices the variations are stacked in a single column.

Set this to ‘Scrollable’ to retain the table layout on smaller screens but allow the user to scroll horizontally and vertically.

Enable images

You can display image swatches next to each attribute term. Enable this option then go to Products > Attributes and select the attribute you’d like to add images to. Edit each attribute term and upload an image.

Show price

Enable this option if you want to display the variation price in the grid.

Show stock

Enable this option to display the stock status for each variation.

Step 4: Bulk variations with product add-ons

Better Variations is compatible with WooCommerce Product Add-Ons Ultimate, meaning that you can add extra fields to your products.

In the screenshot below, you can see a variable product with variations grid, plus extra fields like the option to upload an image and select its placement.

You can see a working demo product here.

Bulk variations with product add-ons

To add extra fields to your variations grid, you’ll need the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

Adding a file upload field

Let’s look at how to add a file upload field as an example.

• Click on the ‘Product Add-Ons’ tab in the ‘Product Data’ section
• Click ‘Add Group’ then ‘Add Field’
• Select ‘Upload’ as the Field Type
• Give your field a name
• You can add a price if you wish

Pricing your add-on fields

Add-Ons Ultimate allows you to assign a price to each add-on field. You can choose whether this price should be multiplied by the number of items in the cart or just applied once.

For instance, you might want to charge the user extra to add a logo to their product. And you might want to charge this for every item they order. To do this, just add a value in the ‘Field Price’ setting. This price will then be multiplied by every item – so if the user chooses 5 of one variation and 6 of another variation, the add-on field will be charged 11 times.

But if you just want to charge a fee as a one-off, you can select the ‘Flat Rate’ option. Perhaps you want to charge a set-up fee once per order – you can do this by enabling the flat rate setting. The charge will be applied as a single fee in the cart irrespective of how many items are in the order.

Method #2: Create a bulk variations form in a grid using Add-Ons Ultimate

In this method, we’ll create a grid of our variations on a product page just using the Product Add-Ons Ultimate plugin. This method has been superseded by Method 1, above, using Better Variations. Method 1 is much simpler but I’ve left this method in the article for completeness.

The grid will look like this:

See how the product’s size and colour variations are now displayed in an easy to read grid? The customer can just enter how many they need of each variation and click add to cart.

As an optional extra, we’ll also look at how to include additional fields on the product page so that your customers can personalise the product. For instance, they can specify some text or image to be printed on the tee shirts.

Let’s take a look at how to create this.

Creating a bulk variations grid

To create a variations grid like this, you’ll need the Pro version of the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

The Add-Ons Ultimate plugin allows you to add extra fields to your products so that your customers can personalise the products. To create our variations grid, we’re going to use a specific feature called ‘Child Products’. This allows you to use other products as extra options within a main product.

Step 1: Create your variable product

The first step is to create your variable product. Note that to create a grid, the product will need to use two attributes for its variations. In our example, that’s going to be Size and Colour – but it can be any two attributes.

Add all your variations, give them a price, assign stock, etc.

For more detailed information about creating variable products, take a look at this article.

Step 2: Create your bulk order product

This method uses two products: the first is your variable product, the second is the main product where you’ll embed the bulk variations order form.

To create your bulk order product:

• Create a new, simple product
• In the ‘Product Data’ section, click on to the ‘Product Add-Ons’ tab
• Click ‘Add Group’ then ‘Add Field’
• Give your field a name, e.g. ‘Order Form’
• Choose ‘Products’ as the ‘Field Type’
• Enter the variable product that you just created in the ‘Child Products’ field
• Select ‘Variations Grid’ in the ‘Products Layout’ field

You’ve now created your WooCommerce bulk variations form. It will look something like this on the front end.

Bonus step: Including product add-ons with your variations form

Many stores want the ability to allow their users to customise products. This can be something like adding a message or gift wrapping through to more complex customisations like uploading files.

Because we’ve used the WooCommerce Product Add-Ons Ultimate plugin to create the bulk variations form above, we can easily add some extra options.

In our tee-shirts example, we’re going to allow our users to specify some text and upload an image which we’ll then print on the tee-shirts.

Adding a text field

To add a text field to the variations form:

• Click on the ‘Product Add-Ons’ tab in the ‘Product Data’ section
• Click ‘Add Group’ then ‘Add Field’
• Select ‘Text’ as the Field Type
• Give your field a name, e.g. ‘Text’
• Optionally, you can add extra parameters like a price for the text field or even a price per character
• If you only want to charge once for the text field, regardless of the quantity of items ordered by the customer, check the ‘Flat Rate’ field. Otherwise the field price will be multiplied by the quantity ordered.

And you can view a working demo here.

Method #3: Create a bulk variations table

Now let’s look at the second method to create a bulk variations form. For this method, we’ll use the WooCommerce Product Table Ultimate plugin. This will allow us to list our products in a table format, making it easy for our users to order multiple items in one go.

Using the same tee-shirts example as above, our page will look something like this:

There’s a working demo page here.

You can see that all the variations are listed in a neat table. The user can select multiple variations and specify quantities for each.

You can get the Product Table Ultimate plugin here:

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

Let’s look at how to use the plugin to list variations in a table.

Step 1: Create your variable product

Just as in Method 1 above, we create our variable product. However, in this case, you don’t need to have two attributes. You could have as many or as few attributes as you like.

In our example, we’ll stick with two attributes: size and colour.

Step 2: Add your product table

Now we can use the Product Table Ultimate plugin to create a table to display our variations:

• Go to Pages > Add New
• Give your page a name
• Add your table. There are two ways you can do this, either via shortcode or block. In this example we’ll use a Gutenberg block
• Click the icon to add a new block then search for the ‘Product Table Ultimate’ block

When you add the block, you’ll see some parameters on the right. The important one for our example is called ‘Variations Display’. You’ll need to set this to ‘As separate rows’.

This will now list each variation on its own row in the table.

There are heaps more features in the Product Table Ultimate plugin. You can find out more in this article on how to display your products in a grid.

Related Tutorial
Check this tutorial on using WooCommerce Product Table Ultimate to create bulk order forms

WooCommerce bulk variations form – recap

Okay, we’ve looked at two methods to create a bulk variations form in WooCommerce. Both methods listed each variation individually, allowing your customers to choose multiple variations and quantities at once.

The first method embedded a bulk variations form on the product page itself and was particularly useful if you wanted to allow the customer to choose some add-ons. This method used the WooCommerce Product Add-Ons Ultimate plugin.

WooCommerce Product Add-Ons Ultimate

Personalise products with extra fields and custom options

Find Out More

The second method listed all the variations in a table. This method made use of the WooCommerce Product Table Ultimate plugin.

WooCommerce Product Table Ultimate

List products in quick and easy order forms

Find Out More

The post How to create bulk variations forms in WooCommerce appeared first on Plugin Republic.