You can easily create a product variation table for any woocommerce variable product on your site. This doc will explain all the necessary steps in detail to create your own custom woocommerce variation table. WooCommerce Product Table PRO is the most flexible solution to create product tables for your site and this includes woocommerce variation tables as well!
WooCommerce variation product table demo
Please see a demo woocommerce product variation table here. Reference image below:
Using the variations table you can make it much simpler for your customer to find and purchase the product variation that they need. It offers a far better user experience than the default WooCommerce attribute dropdowns which can be confusing and difficult to use.
Important notes on the variation table facility
- This table will show product variations in separate rows
- The table will only show product variations, it will not show other product types such as variable and simple products.
- You can customize the look and elements of your variation table using WCPT PRO product table editing facilities.
Variation tables can be of any size, they can contains 100s of products if required and support filtering and pagination as well.
To create a product variations table simply create a product table using the product table editor and in the shortcode add the product_variations=”true” attribute and ids= “111” where 111 is ID of the variable product.
[product_table id="123" ids="111" product_variations="true"]
In the above example replace id value with table ID and ids value with the variable product’s ID.
Custom ordering for your WooCommerce product variations
You can give your product variations table sorting instructions by going to the table’s settings > Query > Initial orderby. If you need to give your product variations a special custom order then please see the below reference screenshot and set Initial orderby to ‘Menu order’ and Initial order to ‘Ascending’:
In the backend on the variable product’s settings page > ‘Product data’ section > Variations > you can drag and drop the variations to give them the order you want. With the above ordering settings in place, the product table will show the variations in the same order as the order you have given them in the backend.
Show WooCommerce product variation table on the variable product page
You can place the shortcode in the description or short description of a product to make the table appear on its product page. In this case you do not need to enter the ‘ids’ shortcode attribute as the shortcode will automatically use the current product id if ids is left empty.
So, writing :
[product_table id="123" product_variations="true"]
will be enough in the product description. You do not need to enter ids=”111″ as the plugin will automatically add it.
If you do not want to type in the shortcode on every variable product page, but you need the variations table to show up on all those pages, you can add the shortcode via PHP. This is not part of the plugin facilities however and can be achieved via a custom work request.
Select a group of product variations for your table based on their SKUs
If you need to add variations to your product table based on their SKU, then use the shortcode option variation_skus=”sku1, sku2″. Enter the variations separated by comma. Please see an example shortcode below:
[product_table id="123" product_variations="true" variation_skus="sku1, sku2"]
Add your WooCommerce product variation table to product pages via PHP
If you wish to automatically place your new product variations table on all the variable product pages then you can use this solution. The variation product table will automatically show the products belonging to the parent variable product on that page.
Add the following to your child theme’s functions.php file to add variation table in the product description (in the shortcode replace id=”122″ with your table id):
// wcpt custom: adds variation table in product main description
add_filter('the_content', 'wcpt__custom__variation_table__in_content');
function wcpt__custom__variation_table__in_content( $content ){
global $product;
if(
! empty( $product ) &&
function_exists('is_product') &&
is_product() &&
$product->get_type() === 'variable'
){
$content = '[product_table id="122" product_variations="true"]' . $content;
}
return $content;
}
To add variation table before the product variation form on product pages, use this (in the shortcode replace id=”122″ with your table id):
// wcpt custom: adds variation table above product form
add_action('woocommerce_before_add_to_cart_form', 'wcpt__custom__variation_table__before_form' );
function wcpt__custom__variation_table__before_form(){
global $product;
if(
! empty( $product ) &&
function_exists('is_product') &&
is_product() &&
$product->get_type() === 'variable'
){
echo do_shortcode( '[product_table id="122" product_variations="true"]' );
}
}
To hide the default woocommerce ‘add to cart form’ from the variable product pages you can copy paste this CSS in your child theme’s style.css file:
.product .variations_form {
display: none !important;
}
Only show relevant columns based on current product attributes
Solution 1:
[product_table id="123" product_variations="true" hide_empty_columns="true"]
You can use the hide_empty_columns=”true” facility to hide the table columns which have no values in any of their cells. This is usually a good solution for hiding attribute columns where the cells contain no other content other than the attribute value. But if your column template outputs values even when there is no attribute term, then you need to use the next solution. This can be the case if your attribute element is configured to output a default value if there is no associated term, or if you are using multiple elements in the same column beside the attribute element. In these two cases even if the attribute has no value, there will be content in the column, so it will not be hidden.
Solution 2:
[product_table id="123" product_variations="true" laptop_attribute_columns="3: pa_color | 4: logo" phone_attribute_columns="2: pa_color | 5: logo"]
You can use laptop_attribute_columns to connect columns with attributes. If a variable product does not have one of the attributes listed in laptop_attribute_columns then that attribute’s related column will be removed from the table.
This is very useful when you want to use the same product table on the product pages of different variable products that have different sets of attributes. One product may have attributes Color and Logo, whereas another has Size and Material. Normally you would need to create 2 separate product tables in this case to place on the product pages of these products.
Now you can create a single product table with 4 attribute columns Color, Logo, Size and Material, then use laptop_attribute_columns=”3: pa_color | 4: logo | 5: pa_size | 6: pa_material”
The Format for laptop_attribute_columns value is column number (1, 2, 3…) followed by “:” then the attribute slug. Each set of ‘column number: attribute slug’ is separated by the pound “|” sign so that you can list multiple columns.
So if you have the attributes Color, Size and Material attached to your products and in your table the 3rd columns is for Color, 4th columns for Size and 5th column for Material then you would enter laptop_attribute_columns=”3: pa_color | 4: pa_size | 5: pa_material”
The above shortcode attribute tells the plugin to hide the 3rd column if the product does not have Color attribute, 4th if it doesn’t have Size and 5th if it doesn’t have materia.
If you have a separate set of columns in your table settings for tablet and phone devices then you can fill out tablet_attribute_columns=”…” and phone_attribute_columns=”…” as well.
If in your responsive layout you have not separated the attributes into separate columns and have them in the same column, then you can instead set a condition directly on the element itself to only show it if the product has the relevant attribute. For this open the attribute element’s setting in your table settings, then open its Condition settings section and set an attribute condition.
The slug name for custom attributes is simple ‘Color’ turns into ‘color’. ‘Can Size’ turns into ‘can-size’. For global attributes you need to add ‘pa_’ at the beginning of the slug, so ‘Color’ becomes ‘pa_color’ and ‘Can size’ turns into ‘pa_can-size’ if these are global attributes.
Please feel free to write in to support if you have any trouble with this facility.
Show WooCommerce product variations table in Page Builder product template
Here we will cover how to automatically add the variation table to every single product page on your site that has a variable product with available variations while using a page builder / theme builder plugin.
You can use this method with Elementor, Divi, Visual Composer, Beaver Builder or any other popular page builder / theme builder plugin. In this specific example we are using Elementor. But the same method will work with other page builder / theme builder plugins as well.
In the Elementor product template create a Shortcode element. In this shortcode element enter the variation table shortcode but without the ids=”…” shortcode attribute. WCPT PRO will automatically detect the current product and display its variations in the table.
