2 Ways to Сreate WooCommerce Product Variations Tables

Let’s talk about variable products.

It’s such an important topic, isn’t it? If you use WooCommerce for your website to sell goods, I assume a lot of you guys have variable products. They’re really common, and they need to be presented in a way that draws in consumers and makes choosing easy. 

In this article, I will discuss the anatomy of product variations and the tools to create them.

Table of Contents

• Why Do We Need Variation Tables?
  • Anatomy of WooCommerce product variation from a business perspective
  • Product variations: the technical breakdown
• Creating WooCommerce Variation Tables Using JetProductTables Plugin
• Creating WooCommerce Product Variations Tables Using JetEngine
• FAQ
• Wrapping Up

Why Do We Need Variation Tables?

Let’s start from the beginning: why do we actually need variations and variation tables? To make this work, it helps to dive a bit into how WooCommerce product variations operate. Let’s see what they are, speaking from two different perspectives: business and developer. 

Anatomy of WooCommerce product variation from a business perspective

WooCommerce product variations are a game-changer for stores that need flexibility. Instead of listing each version of a product separately, you can bring them all together in a single listing, whether you’re offering different sizes, colors, materials, or styles. Here’s how it all works under the hood.

At the central point of WooCommerce variations are attributes – basically, the options or characteristics that define the different versions of a product. Think of things like size, color, or material; they can be set up as “global attributes,” which means they can apply to any product in your store (like standard colors or sizes) or as “custom attributes,” which are specific to one product. 

For instance, if you’re selling T-shirts, “Color” and “Size” might be the attributes, while a hardware store might use attributes like “Length” or “Material.”

Once you’ve set up your attributes, you can create combinations of them to build each specific version of the product. 

For example, a T-shirt with three sizes (S, M, L) and three colors (Red, Blue, and Green) would result in nine variations (like “Small Red” or “Large Green”). These variations can be customized individually with their own prices, stock levels, SKUs, and even photos, which is great if certain options are more popular or need unique handling. This way, you can offer specific prices, manage inventory, and set shipping for each unique combination.

Each variation can also include custom details, like a unique image, which helps make it visually clear to customers what they’re getting when they select a specific color or size. This feature alone can help your product pages look much more polished and tailored since customers will see exactly what they’ve selected.

Finally, WooCommerce pulls all this information together on the product page. Once you’ve set everything up, your customers will see dropdowns (or other selectors) that make choosing the right product version simple and clear. When a customer picks a combination, the page updates automatically to show the right image, price, and availability for that specific version. This streamlined layout helps shoppers quickly find the option they want without clicking all over your site.

Product variations: the technical breakdown

Understanding how product variations are made “under the hood” is important to understand how to fetch them and do other manipulations with them. 

Product variations as post types

In WooCommerce, each product variation is stored as a product_variation custom post type, with its parent product being the variable product of the type product. This parent-child relationship is key:

• Parent product (variable product) is the main product of type product with “variable” as the product type.
• Child variations consist of each variation of this product being a product_variation post linked to the parent by the post_parent field.

This structure allows WooCommerce to efficiently manage variations as individual entities that still belong to a single parent product. 

Here is a simple example of how you might query these child posts by the parent post ID (which is “123” in my example):

$parent_product_id = 123;
$variations = get_posts(array(
    'post_type' => 'product_variation',
    'post_parent' => $parent_product_id,
    'numberposts' => -1,
));

Product attributes

Attributes can have the nature of custom taxonomies and custom fields. 

• Global attributes: when you add global attributes through the WooCommerce settings (e.g., “Color” or “Size”), WooCommerce creates a taxonomy for each attribute. These taxonomies are typically prefixed with pa_ (e.g., pa_color, pa_size).
• Local/custom attributes: for attributes created specifically for a single product, WooCommerce doesn’t create a taxonomy. Instead, these attributes are stored directly in the product’s metadata.

Each attribute term (like “Red” or “Large”) is then applied to variations via taxonomy term relationships, stored in the wp_term_relationships table. This way, WooCommerce can quickly find and display relevant product options.

As I’ve already mentioned, the main variable product is the parent post (product post type), and each specific variation (e.g., “Red, Large” or “Blue, Medium”) is a child post of that variable product.

Each variation has its own metadata to store specific details unique to that version, such as:

• Price fields: _regular_price, _sale_price;
• SKU: _sku;
• Stock information: _stock, _manage_stock;
• Shipping details: _weight, _dimensions;
• Attributes (variation-specific): though the attribute values are connected through taxonomy terms, WooCommerce also stores the chosen attribute values in metadata fields prefixed with attribute_. For instance, attribute_pa_color for the color selected in the variation.

Product variations in the database:

• wp_posts table stores each variation as a product_variation post linked to the variable product via the post_parent field.
• wp_postmeta table stores metadata for each variation, including prices, stock levels, SKUs, and selected attribute terms (like attribute_pa_color).
• wp_terms, wp_term_taxonomy, and wp_term_relationships tables manage global attributes. Each global attribute is a taxonomy, and the selected terms (like “Red” for color) link to specific variations through term relationships.

This information will be helpful if you want to fetch particular variations using Query Builder or programmatically. 

Creating WooCommerce Variation Tables Using JetProductTables Plugin

The JetProductTables plugin is made to display WooCommerce products and their variations, so it can be called a WooCommerce variation table plugin as well. It’s specifically useful for adding product variations to a single product template. 

To add a variation table to your Single product template, first install the JetProductTables plugin. Then go to WooCommerce > Settings > ProductTable tab and start creating. 

There are two ways to do it. 

The first one is you can go directly to generate a shortcode by pressing the “Generate Shortcode” button and do all the settings there. 

Also, you can add, delete, and arrange columns in the main editor, save them as a preset, and then use them multiple times while generating a shortcode: the design of the columns will be as you saved in the preset. 

Useful links: 

Note that you should choose “Product Variations” and select “Current product” when generating the shortcode if you want to create a list of the variations for a current product and use it on the Single Product template.  

After that, you can paste your shortcode to your Single Product template. In the example below used in this video, I’ve pasted it to the JetWooBuilder’s template.

In addition to the standard attributes taxonomies terms, I used the “Product Meta” column in my example, where you can insert any meta field name (including custom fields). I used the WooCommerce-specific “total_sales” meta key that shows the number of sales this product has. Mine has zero, so it returns zeros in this column. 

You can also make a table of product variations and publish it on any page if you select “Specific product IDs” or “Specific product SKUs.” Note that the list of all the variations will be generated, not a table with parent products where you can select variations.

Creating WooCommerce Product Variations Tables Using JetEngine

This method is not that straightforward, but it’s definitely cool for those who love Query Builder and the full flexibility it offers. 

I will use Query Builder and JetEngine’s Dynamic Tables module. 

Actually, this combination of tools is very effective in fetching dynamic filterable WooCommerce product tables with simple products, and there’s a specific query type – WooCommerce Product Query. 

However, in the case of the product variations table for WooCommerce, I will use a Posts Query type with the post type “Variation.” 

In the Post & Page tab, go to the “Parent ID” input, click on the database icon, and choose the “Current ID” macro. This is required if you want to display a list of product variations for a particular product and paste the variation table into the Single Product template. But if you want to use the table somewhere else, don’t use this macro or choose another one that matches your needs. 

You can go through other tabs of the Query Builder and specify more things if you want. 

Save the query, and let’s build a dynamic table. 

Activate the Dynamic Tables module, go to JetEngine > Tables Builder, create a table, and select the query that we’ve just created. Press the “Re-fetch data” button. 

I want to display five columns: 

1. title;
2. attributes;
3. price;
4. the “Add to Cart” button;
5. cross-sale products (just to demonstrate some of the features of the Dynamic Tables Builder). 

When creating columns, don’t forget to press the “Regenerate Preview” button to see the results. 

Go to the Columns tab and create a column. These are the settings for the columns:

Title

• Column Content: Raw Value;
• Data Source: Post/Term/User/Object Field;
• Select Field: Title. Note that you should use the Post section, NOT the WooCommerce because we used the Post query type. 

Attributes

• Column Content: Raw Value;
• Data Source: Post/Term/User/Object Field;
• Select Field: Excerpt. (This post type saves the combination of attributes for variations as an excerpt.)

Price
(Price is stored as the meta field, so we need to fetch it.)

To add the currency symbol, activate the Customize Column Output toggle and add your currency, while the  “%s” is the macro for your value. For example, $%s for USD.

• Column Content: Raw Value;
• Data Source: Post/Term/User/Object Field;
• Select Field: Post ID;
• Now, activate the Customize Column Output toggle and insert this code:

<a href="?add-to-cart=%1$s&redirect=checkout" class="button quick-buy">Quick Buy</a>

Of course, you can change the label (Quick Buy) and the CSS class if you want. 

Cross Sell
(Related products are also stored as the meta field, so we need to fetch it.)

• Column Content: Raw Value;
• Data Source: Post/Term/User/Object Field;
• Select Field: leave untouched;
• Custom Field Key: insert _crosssell_ids. 

You will see the list of IDs. But let’s turn them into product titles and active links. To achieve it, activate the Filter Callback toggle and select the “Get post/page link” from the list. 

Enjoy the result on the preview:

As you can see, the preview shows many variable products. However, once you insert the table into the Single Product template, it will display the variations only for that particular product. 

Now, if you use JetWooBuilder, insert the Dynamic Tables widget to your Single Product template (it also works with Block Editor and Bricks). 

Here is the result on the front end (I didn’t do any styling or layout adjustment, as my goal is just to show you the table):

To style the table, open the Design tab of the table editor or wrap your values with any HTML to add CSS classes; just activate the Customize Column Output toggle.

But that’s not all. You can use templates instead of the “Raw Value” – in this case, you will be able to add various JetWooBuilder or Elementor Pro widgets and display them inside the table cells. To create a template, go to JetEngine > Listings/Components and follow this tutorial.  

JetEngine’s Dynamic Tables also work well with JetSmartFilters. 

FAQ

Wrapping Up

WooCommerce product variation tables can make shopping a lot easier for customers by showing all product options in a neat and organized way. 

For some stores, it’s a nice-to-have feature, but for those with lots of product choices, it can be a game-changer. In this article, I covered the basics of setting up variations and shared two ways to build product variation tables using Crocoblock tools.

In the case of the JetProductTables plugin, it’s quite quick and intuitive. In the case of JetEngine’s Tables Builder, it’s more flexible and probably suitable for seasoned web developers.