How to show variations as single products in WooCommerce
The standard WooCommerce product page is perfect for selling simple products. However, it isn’t ideal for selling products that have lots of variations.
There are tons of stores that sell products with dozens of variations. They need a way to show single variations of WooCommerce products to increase their visibility and make it easier for customers to add them to their cart.
In this tutorial, we’ll explain how you can show variations as single products in WooCommerce. We’ll also show you how to display variations individually from different categories in separate tables.
Why you might want to display variations individually
Out of the box, WooCommerce variations are displayed in a dropdown menu on the single product page.
This means that customers have to go to the single product page and click the dropdown menu to see the variations, select one, and add it to cart. And, if a customer wants to purchase multiple variations of the same product, they have to select the correct variation and add it to cart.
A better way to do this is to display WooCommerce product variations as single products:
You can see a working example of this page here.
Here are some examples of products that have many variations:
- Hardware goods such as pipes, washers, and screws are generally available in different sizes and materials
- Skateboard decks are available in different dimensions
- Stationery items such as paper or envelopes is available in different sizes and hues
For these types of products, showing single variations is the best way to sell them. It increases the variation’s visibility and also makes it easy for customers to purchase multiple variations of the same product.
This is particularly true for stores that sell both simple products and variable products such as grocery stores. Products with variations – such as cereals, coffees, and rice – often get buried with the rest of the products.
From the store manager’s perspective, it’s easier to manage a few products with multiple variations rather than creating multiple simple products.
In addition, showing product variations as single products is also a great way to reduce friction from the purchasing flow. As a result, customers can add as many variations to their cart as they’d like instantly.
Check out this tutorial for more information on how to display WooCommerce variations in a table
How to show variations as single products in WooCommerce
Here, we’ll show you how you can use the WooCommerce Product Table Ultimate plugin to display variations as single products on your WooCommerce site.
For this tutorial, we’ll assume you already have a WordPress site set up with the WooCommerce plugin installed. We’ll also assume you have some variable products added to your online store.
Step #1: Install the WooCommerce Product Table Ultimate plugin
The WooCommerce Product Table Ultimate plugin enables you to show single variations in a table layout along with product details. You can choose the columns you’d like to show on the front-end.
Customers can then tick the checkboxes next to the single products they’d like to buy and add all of them to the shopping cart in one click.
Get the WooCommerce Product Table Ultimate plugin and install and activate it on your WordPress site.
Then, navigate to WooCommerce > Settings > Product Table Ultimate > License and enter the license key in the ‘License Key’ box. Click the ‘Save Changes’ button to continue.
Step #2: Configure WooCommerce show single variations settings
The next step is to configure the WooCommerce Product Table Ultimate plugin’s settings. This determines how the product table with variations is displayed on your website’s front-end.
Head over to WooCommerce > Settings > Product Table Ultimate.
Make the following configurations to create a front-end table layout that lists product variations:
The columns field allows you to show specific columns in the front-end product table. For instance, you can list the product’s name, price, and add to cart button.
You can do this by entering
name, price, add-to-cart in the ‘Columns’ field.
Add to cart column
The ‘Show quantities on add-to-cart column’ field enables you to show quantity selectors in the product table. If you want to let customers set the quantity of the product variations they’d like to buy, you’ll need to set this option to ‘Yes’. This will add a quantity field next to the add to cart button in the table.
You can use the ‘Products sources’ field to display specific WooCommerce products in the table. The dropdown list shows all the available options which include all, callback function, categories, and tags.
The ‘Variations display’ field lets you show WooCommerce products with variations. The display options for variable products include ‘Redirect to parent page’, ‘As separate rows’, and ‘As dropdowns in parent row’.
Set this option to ‘As separate rows’ to show single variations.
Order table by
You can choose the sort order of the product table using the ‘Order table by’ option. The available sorting options include product ID, title, price, date, popularity, rating, and menu order.
The ‘Order table by’ field lets you display the products in ascending order or descending order using the dropdown menu.
Products per page
Use the ‘Products per page’ field to enable pagination and choose how many WooCommerce product variations will be displayed on a single page. If you want to list all of the products on a single page, simply disable pagination by setting this option to ‘0’.
Enable add selected button
If you want to have a checkbox before each row in the product table, simply set the ‘Enable add selected button’ field to ‘Yes’. This will enable customers to browse through the table, select multiple products, and add them all to their cart with a single click.
Step #3: Display variations as single products on the front-end
So far, we’ve set up the Product Table Ultimate plugin and configured its settings to display WooCommerce product variations in a table.
You can show the product table on your site’s front-end using a shortcode or by using a Gutenberg block.
The first thing you need to do is create a new page to add the table to. You can do this by going to Pages > Add New from the WordPress admin panel and entering a title for your page.
Using a shortcode
This method of displaying the table on your website’s front-end involves adding the
[product_table_ultimate] shortcode in the classic text editor.
When you’re done, click the ‘Publish’ button.
Using a Gutenberg block
You can also display the table of variations on your site’s front-end by adding a block to the Gutenberg editor.
Click the ‘New Block’ icon and add the ‘Product Table Ultimate’ block to the text editor. You can modify its parameters from the ‘Block’ menu on the right.
After you’re done, preview the page on the front-end. It should display a neat table with WooCommerce product variations that customers can browse through and add to cart.
How to display variations within different categories as single products
Depending on the types of products you sell, you might need to display products from some categories in one table and products from different categories in a separate table.
For this, you’ll need to split the product table into separate sections based on product categories.
For example, if you sell hardware goods, you might consider displaying nuts, washers, bolts, and screws in one product table (called Nuts and Bolts) and electrical connectors, lighting fixtures, and wire in another product table (called Electrical Supplies).
Instead of displaying all the products in one product table, you can create a separate product table for each WooCommerce category. All you have to do is enter a special parameter in the shortcode which tells WordPress which category to show in that table.
But first, you’ll need to find the ID number of the WooCommerce category you want to display. To do this, open a new tab and go to Products > Categories to view a list of all of your WooCommerce categories.
When you hover over a category, you’ll be able to see a URL for that category page at the bottom of the screen which includes the ‘tag_=ID’ followed by a number which is the category ID. The screenshot above shows the ID number of ‘Nuts and Bolts’ is 85.
Modifying the shortcode
If you’re using a shortcode, change it to
[product_table_ultimate source="categories" categories="85"].
source=“categories” means the product table will show products from specific categories. And the
categories=”85” parameter implies that it will show products from the category with the ID 85.
Modifying the Gutenberg block
Alternatively, if you’re using the Gutenberg block, you can do this using the ‘Block’ menu on the right.
- Select ‘Categories’ in the ‘Product Source’ option using the dropdown.
- Enter ‘85’ in the ‘Categories’ option. You’ll also be able to display multiple product categories in a product table by entering a comma-separated list of category IDs in this field.
After you’re done, update the page and preview it. It should now list products from the specified categories only.
Optimizing your WooCommerce product page for products with variations can help you:
- Increase product variation visibility.
- Make it easier for customers to discover and purchase product variations.
- Enhance the customer’s shopping experience on your online store.
Using the WooCommerce Product Table Ultimate plugin, you can create a front-end table to display variations individually. As a result, you’ll be able to increase sales.
Ready to show variations as single products and increase sales? Get WooCommerce Product Table Ultimate today!