How do I create a WooCommerce audio table?

Difficulty: Beginner
Time: 30 mins

Goal:
Using this A-Z guide you will be able to easily create audio tables like these on your own website:

*Screenshots. Show a Lite or PRO tag on corner of the images.*

Knowledge required:
You need to know the basics of WooCommerce. In case you are not familiar with it, please see some guides on WooCommerce first. Learn how to install it on your site and create some products. After that you can come back to this guide. It will cover everything else in detail.

Plugins required:
– WooCommerce
WooCommerce Product Table Lite
– Or, if you want truly professional results and all the PRO exclusive features, invest in getting the premium WooCommerce Product Table PRO for your website. Note that some features in this guide are clearly marked as WCPT PRO exclusive.

Table of contents

You can use these links to quickly jump to any specific section of this guide.

  • Creating the products
    • Adding attributes – Album, Artist, Genre, New / Trending
    • Adding a preview audio track
    • Adding the purchasable audio track
    • Adding custom fields – Duration, BPM, Lyrics
    • Adding category
  • Creating the product table
    • Adding columns to the table
    • Adding navigation options – Result count, Sortby
    • Creating a mobile optimized responsive view

WCPT PRO (premium version) exclusive features:

  • Adding navigation filters to the table
    • Duration
    • BPM
    • Tags
    • Album
    • Artist
    • Genre
    • Special badges: New, Trending
    • Adding result count next to filter options
  • Waveplayer integration
  • Replace the shop page grid with a table
  • Adding a popup showing song lyrics
  • Adding a download button for the song preview or sheet music file
  • Display specific product in a table based on attribute, IDs or custom fields.

Creating the products

We will be adding the below listed properties to our products. But you are not limited to these properties. When you are done with this guide you will know how to add absolutely any property to your product table.

  • Attributes – Album, Artist, Genre, Special badge (like New and Trending)
  • Custom fields – Duration, BPM, Lyrics

If you are not familiar with Attributes or Custom Fields, that is not a problem because this guide will cover how to create both of them, so just follow along.

Attributes

What are WooCommerce attributes?
In WooCommerce attributes are basically product properties like Album or Artist for songs or Color and Size for clothes, etc.

You need to tell woocommerce the names of the properties that you want to add to your products and the possible values for these properties. For example suppose you want your products to have properties like Album and Artist. In that case you need to create WooCommerce attributes Album and Artist. Once you have created these attribute, your product settings pages will have the option to add Album and Artist for the product.

For more details on Attributes, you can read the official woocommerce documentation on the topic here.

In case you are unsure about this concept of Attributes, don’t worry. As you follow along this guide, the concept of attributes will become very clear.

How to add WooCommerce attributes?
Go to Admin menu > Products > Attributes.

This is your woocommerce attributes page where you will create global attributes for your products.

Whenever you need to add a new attribute (property) for your products you will come back to this screen and create the attribute here.

All the attributes you have created in the past are also listed on this page. You can come back to this screen any time to edit or delete your attributes or create new attributes for your products.

Right now your attributes table may be empty if you have never created any woocommerce attributes on your website before. But the above screenshot shows you the attribute page with several attributes already added in it.

As you can see, on the attributes page there is a form with the title ‘Add new attribute’. We will now use this form to create a new ‘Album’ attribute. Enter the following details in the form (see reference screenshot below):

Name: Album
Slug: *leave this empty and it will be auto-generated*
Enable archives: Checkmark this option

Once you click the ‘Add attribute’ button at the bottom of the form the page will refresh and this Album attribute will be added to your table of attributes.

In the same way that you have created the Album attribute with its options, now create these other attributes and options:

  • Artist
  • Genre
  • Special badge

By the end your product attributes page should look like the following screenshot:

Create an audio product

Now that we have the option to add Album, Artist, Genre and Special badges to our products, let’s go about creating our first audio product.

Go to Admin menu > Products > Add new. This will open the settings page for our new product.

Now give your audio track any name like ‘Back in black’.

Then scroll down to the ‘Product data’ section of the page.

In the Product data section > General tab set a ‘Regular price’ eg: $10

Now open Product data > Attributes tab. Here we will add properties (Album, Artist, Genre, Special badge) to our product.
At the top of the Attributes tab you will find the attribute dropdown with an Add button next to it. This dropdown will help us add attributes to our product.

Click on the dropdown and you will see the Attributes that we have created listed as its options. This dropdown is going to help you select which attributes to add to your product.


Select the Album option and click on the Add button next to the dropdown. A loading sign will appear and then the Album attribute will be added to the Product data > Attributes tab. Now click on Add new button (see screenshot below) to assign an album to this product.

This will open a modal where you need to enter the name of the Album, for example. For example, ‘Back in black’ (in this example the song and album name are the same). Then press OK to add this Album name to your product.

Now you should see the Album name added to the Attributes tab like the below screenshot:

Now in the same way, using the dropdown add the other attributes to your product as well:
Artist: AC / DC
Genre: Hard rock
Special badge: New

By the end, your Product data > Attributes tab should look like this:

Adding a preview audio track

First prepare a preview audio file for the product. For the purpose of this guide, just use any small audio file. Then go to Admin menu > Media > Add new and upload the audio track there.


Once the audio is uploaded, click on the Edit button like in the screenshot below:

This opens the settings page for our media file (the audio track). You need to copy the File URL highlighted in below screenshot:

Now go back to your audio product’s settings page and scroll down to the ‘Product short description’ section. Ensure the Visual tab is open. Then paste the audio track URL in the textarea. The URL is going to be automatically converted into an audio player.

Adding a purchasable audio track

@TODO

Adding the category

@TODO

Publish the product

@TODO – re-do the screenshot with

Now click the Publish button so that this product is published on your site and then view the product on the front end. You will be able to see all the attributes for this product on its page. Reference screenshot (using the Twentysixteen theme):

Create a second product
Now let’s create another product. Repeat the same process as above. Only this time the properties will be:

Name: Thriller
Regular price: $15
Album: Thriller
Artist: Michael Jackson
Genre: Disco
Special badge: Trending

Here is a screenshot of the Product data > Attributes tab for our second product:

Note on adding attribute values
If you are trying to add an attribute value that you have previously added for another product, then you cannot use the Add new button to add this attribute value to your current product. The Add new button will throw an error if you try adding an attribute value that was previously create. This button is only for creating new values.

Instead if you have already created the attribute value before then you need to click on the values input box, and a dropdown will appear showing all the previously added attribute values, and you have to select the value you want to add to the current product.

For example, in the below screenshot from the second product’s settings page, you can see the Album attribute. When the values input is clicked, it shows the options Back in black and Thriller since these 2 options have been added to our products previously.

So once you have used the Add new button to create a new attribute value, in the future, if you need to give another product the same attribute value, then don’t click on the Add new button, instead click on the values input box and just select the previously created attribute value you want to add to your new product.

WCPT PRO + Name Your Price integration

WooCommerce Product Table PRO offers out-of-the-box integration with the official Name Your Price plugin!
The two plugins work very well together. So now you can combine the best woocommerce product table plugin with the best woocommerce name your price plugin!

As part of this integration you will be able to show your Name Your Price fields in your product table (integration demos).

What is the ‘Name Your Price’ plugin?

The Name Your Price plugin offers excellent facilities for shops that wish to give their customers the option to set their own price for the products that they are purchasing.

In addition, the plugin will let you define minimum and maximum price for your products and offer the customer a suggested price as well.

So if you are interested in creating a shop where customers enter their own prices for the products (within a pre-set range), then you should definitely check out this plugin.

Please use the following links for more information:

Form mode

You can create a form on any page where visitors can select navigation filter values. When they submit the form, the will be redirected to the shop page where the filters will be applied.

This PRO exclusive facility is useful when you want to place a WCPT table navigation form anywhere on your site (for eg: on the homepage), and make its results appear on the Shop page when the form is submitted.

Please note this is only possible when you have replaced the product grid on your shop page with a product table using the archive override facility.

Using form_mode=”true” on any WCPT table shortcode will hide the product table, leaving just the navigation section visible. To complete its form look, you can also add the ‘Apply / Reset’ element in the table navigation section.

When the visitor selects values in this form and submits it, they will be redirected to the shop page where the product table will show results based on options they selected in the form.

Please remember that the filters in the form should be a subset of the filters on the shop page. If the site visitor selects filters in the form that are not available on the shop page, then those filters will not be applied to the results on the shop page. So while you can have more filter options on the shop table, you should not have less filters on the Shop page than on the form. For example, if you have a Price range filter in the form, then you need to have a Price range filter in the Shop table as well, otherwise the price range will not be applied when the user tries to select a price range in the form.

In the above screenshot, the form shortcode is placed on a page where we want the table navigation to appear without the table.
This screenshot is from wp admin > product tables > settings > archive override. It shows that a table shortcode is being used to generate a table for the shop page. This table will override the default product grid on the shop page.
Here you can see the form generated by the shortcode in the first screenshot. You can also see in this screenshot that a range value has been selected for the ‘Range test’ filter in this form. It is then submitted.
When the above form is submitted it leads the visitor to the Shop page where the ‘Range test’ filter is applied on the table on the Shop page. It was possible for the filter to be applied here only because the same filter also exists in this table as well.

Multi range slider (for CF & Price filters)

The multi-range slider available for custom field and price filters (PRO facility) makes it convenient for site visitors to select several numeric options in one go. There is a workaround for attribute filters as well.

This option works for custom fields and price. If you are store the information as an attribute, you need to copy it over to a custom field to use this facility.

Attribute filter workaround

The multi-range slider is not available for attribute filter right now. This is due to complications with the way woocommerce stores data for product attributes which makes it inefficient for this purpose.

Instead, what you can do is to store the specific attribute as custom fields as well on each product. Now you can use that custom field to provide a multi range slider filter (as well as sorting if you need).

Going to each product page and saving the attribute as a custom field can be time consuming. There are more efficient ways to accomplish this, covered in this doc.

Once you have the attribute saved as a custom field, you can proceed with creating a custom field filter and using the multi-range slider in that element.


Settings to create custom field range slider

The settings for Price range filter are very similar.

How to duplicate attribute to custom field?

Certain facilities like sorting and range slider filter are only possible with custom fields, not attributes. There are more efficient ways to duplicate attribute to custom field than going to each product page. In this doc we will cover 3 convenient methods.

Going to each product page to duplicate the attribute to a custom field can be time consuming. There are more efficient ways to accomplish this task:

Note: Always take a database backup first!

Method 1: Import / export products

  • Use the woocommerce import / export product facility to first export the products as a CSV file. This file can be viewed as a spreadsheet via Excel (Windows) or Numbers (Mac).
  • In that exported CSV file, products are listed in rows and their properties are listed in column. You need to create a new column that will contain a new custom field for the products. This new column needs to have the heading ‘Meta: *attribute name*’ where your need to replace *attribute name* with the name of the actual attribute (Color, Size, etc) or custom field name that you want to use. Before continuing with this step, please refer to the ‘Important notes on creating the new meta column’ section below.

  • After you have added the new meta field column to the file, you need to save the file as CSV. Now import this modified csv file into your site again. During import, ensure you check the option to ‘Update existing products’. After the import process (could take some time depending on the number of products and properties) you should have the new custom field prepared for each product based on the mtea column you created in the import file.

Important note on creating the new meta column:

In the exported excel file please notice 2 things:

  • Attribute information is split over multiple columns: Name, Values, Visible, Global, Default. Only the Name and Values column are relevant to us here, so we will ignore the rest. The Name column helps us identify which attribute(s) this column pertains to and the values are needed to be copied over to the new duplicate meta column.
  • Second thing to notice – in the above screenshot Attribute 1 name column only contains the Color attribute. So you might be tempted to simply duplicate its values column, rename the heading of the duplicate to Meta: Color and be done with the process. While this may work in this particular case, please keep in mind that the attribute columns in your export file might contains information about multiple attributes in the same column.
  • For example, in the screenshot below notice that the ‘Attribute 2 name’ column contains 2 distinct attributes – Size and Logo. So, in this case, duplicating the ‘Attribute 2 value(s)’ column to create a new meta column for Size attribute will be a mistake. As you can imagine, such a duplicate column will also contains values for Logo attribute. So, you will need to be careful that only relevant values are copied over to the new meta column.
  • In this example, to create a meta column for the Size attribute, we can duplicate the values column, but then we need to carefully go over the column values in our duplicate and delete the values that are not related to Size.

If you have any confusion about this method and need more clarity please do not hesitate to write into support to receive prompt assistance with this.

Method 2: Bulk product editor plugin

This method may be a little slower than the previous one, but users might find this simpler. There are several woocommerce bulk product editor plugins available that will allow you to edit several products at a go using a simple UI. Some notable ones:

The above links are for the free versions of the plugin. Some features are only available in the PRO version.

Method 3: Automate via PHP Code

You can also write PHP code to create a solution that automatically duplicates your current attribute values to custom fields as well as ensures future attribute values also automatically get duplicated to custom fields without any additional updates required at your end.

In many ways this is the best solution, but it requires programming knowledge and since the solution works on its own into the future, it is important the code doesn’t have errors that can cause problems later on.

Such code is not in the scope of this doc. Please contact an experienced PHP dev or write in for a custom solution if you want to go ahead with this method.

ToolTip

The ToolTip element offers excellent potential to improve your table presentation! This doc includes element introduction, benefits, style tips and special notes.

Purpose

The ToolTip element offers excellent potential to improve your table presentation. Consider the following:

– The tooltip element basically increases the available surface area in which you can present data. This is especially helpful when fitting the table into narrower screens. Now you can present the same information, in a smaller space. 

– When you need to display large chunks of text like excerpt or some specification, you do not need to spoil your table layout. You can still keep a neat column based layout while packing the text chunk in tooltips. 

– Tooltips can be used to provide special notes, explanation about data highlights. You might be using an icon or image to represent a property and a tooltip to provide additional context for clarity.

– Information that is nice to include but not really essential can be presented in tooltips so that precious user attention is focused first on the most important bits of data.


Styling

Both, the label and the content part of the tooltip can be individually styled. You can also style the elements that you place inside the tooltip.

In some cases you might like to make the label background transparent, for example when displaying an exclamation icon or an image in the label. 

You can also set a max-width for the tooltip content section in case of broader / narrower content.


Special notes

Element condition

The toolTip element provides a Condition section (same as other column elements). This section lets you toggle element based on certain criteria. You can leverage this to place multiple tooltip elements in your columns and only display them when specific criteria are met.

Relabeling terms

Attribute terms can be relabeled using the ‘Custom term labels’ section in the attribute element. This can be a smart place to use tooltips if additional information needs to be provided for the element.

Enable archive override on Elementor PRO (and other page builders)

Using WCPT PRO’s archive override facility to replace product grids with tables as well as an Elementor PRO template for product archives? Learn how to easily make the two work together.

Time required: 4 mins

Note: This article was written with a focus on Elementor PRO. However, a very similar solution applies to other template builder plugins like Beaver Builder. You can use the same shortcode [wcpt_elementor] for most other theme builder plugins as well. On any archive page or template you can use the shortcode: [wcpt_elementor] to print out the corresponding archive table (as per your settings in wp admin > product tables > settings > archive override). So, just delete the default product grid element from the page builder template and replace it with this shortcode. WCPT PRO 2.2.0 onward you will also be able to use the shortcode [wcpt_archive_table] for this purpose instead.


Elementor PRO offers users the facility to create their own custom templates for their site. Some users may wish to use this facility to create custom templates for their product archive pages.

In case you are also using the Archive Override facility included in WCPT PRO you may face an issue with your product table not showing up on the custom product archive page created with Elementor PRO.

This issue occurs because their Elementor PRO template system overrides WCPT PRO’s archive override facility.

You can confirm this by temporarily deactivating Elementor PRO on your site. You will find that on product archive pages your product tables start appearing again when Elementor PRO is deactivated.  

Below, you will find instructions on how to resolve this conflict.

Before we being please note, this tutorial assumes you have already done the following two:

  1. Using Elementor PRO you have created a template with display condition to appear on Product Archive pages only. If you have a template to override all archives, not just product archives, then you need to first create a new template that only overrides Product Archives. The instructions in this tutorial are to be applied on this Product Archives template only.
  2. You need to configure your WCPT Archive Override facility to assign tables to different product archive pages. If you have not done this, product table will not appear on your archive pages even after you have followed the other instructions here.

Once you have ensured the above two requirements have been met, please follow these steps to resolve the conflict:

1. In Elementor, go to your product archive customization screen page. 

2.  Delete the ‘Archive Products’ section from your template.

3. In your Elementor panel > Elements section search for ‘Text’. The Text widget element will come up on the screen. Drag and drop it on your template, below the title (where the Archive Products element was placed earlier).

4. In the settings of the Text widget element enter [wcpt_elementor]. This special shortcode will print your product table on the page according to your settings in WP Admin > Product Tables > Settings > Archive Override.

In case you have any difficulty following this guide, please contact support.

Download button

Using WCPT PRO you can easily create download buttons in your table giving users the option to download files related to the product. You can provide any file type for download such as a PDF brochure / mp3 audio preview / mp4 video trailer / software zip file.

You can provide multiple download buttons in the same table row. Therefore you can provide download links for different files associated with the product, such as different versions of the audio track.

Create download button

First, for each product you need to create a custom field with the same name like download-1 and provide the download URL in the value of that custom field. 

If your site has ACF installed the custom fields section might not appear. In that case just create a text field (not URL field) using ACF. 

Once you have created the custom field for a few Create a button element in your columns and use the following settings:

Externally hosted files

If your file is being hosted from another domain, then it is not always possible to use this method to provide a download. Due to the CORS specification,  most browsers will not allow this.

However, a workaround exists for 2 very popular hosting choices:

Google drive

Please check the guide here and follow the steps to generate download links for your google drive files.  

Dropbox

Please check this guide to create a direct download link for your dropbox hosted files.

Style tips

WCPT provides you styling options at various levels to ensure you can highly customize your table’s style as per your needs.

For general styling purposes please use the product table > Style tab and apply styles from there. You can apply styles that specifically target Laptop, Tablet or Phone size devices.

In order to style individual columns go to the Column > Cell template > Design section and apply your column specific styles there.

 Likewise you can apply unique styling to specific elements as well via the element’s settings > Style for element.   

Column width

You can give each columns a fixed width. For example, if you want to give the columns width 20%, 40% 20%, 20% (total should be 100%) then you need to go to the design settings for each column and give it the percentage width. 

If you are manually setting widths for each column in this manner please take note of responsive view of your table. If you do not have tablet / phone specific columns setup then the custom widths will be applied to the columns on narrowers screens as well.

Column text align

To set the text align for the table heading and cells from a central place try the table settings > Style > Laptop style > Headings | Cells > Text align.

If you need to set different text align for individual columns you can do that from the Style settings of the individual columns.

Columns cells vertical align

You can decide how the content in adjacent cells align with each other through the vertical align property.

Force overrides

Sometimes themes apply aggressive styling that can override the styling set through WCPT. The common case is setting font color and size for cells. Please use:

.wcpt-heading {
font-size: 18px !important;
font-color: black !important;
}

.wcpt-cell {
font-size: 16px !important;
font-color: black !important;
}

Change the color and font size to what you need. For further assistance please contact support.

Table heading

.wcpt-heading {
color: #000 !important;
padding: 15px 5px !important;
font-size: 16px !important;
}
@media(max-width: 1099px){ /* Tablet style */
.wcpt-heading {
color: #000 !important;
padding: 15px 5px !important;
font-size: 16px !important;
}
}
@media(max-width: 800px){ /* Phone style */
.wcpt-heading {
color: #000 !important;
padding: 15px 5px !important;
font-size: 16px !important;
}
}

Navigation (above table)

Header navigation section sample CSS:

.wcpt-header {
padding: 10px 15px;
background: white;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
}

Filter dropdown text styline  sample CSS:

.wcpt-filter .wcpt-dropdown-option {
font-family: Tahoma !important;
font-size: 16px !important;
color: black !important;
}

.wcpt-filter .wcpt-filter-heading {
font-family: Tahoma !important;
font-size: 16px !important;
color: black !important;
}

Product addons – only show short text field

If you have a ‘short text’ product add field attached to your products and wish to display it in your tables you need to follow the following steps:

  1. Add a Cart Form element to one of your columns
  2. In the settings of this cart form element, in Additional CSS Class add: wcpt-product-addons-only-short-text-field
  3. Now in the table settings > Style > CSS, enter the following code:
.wcpt-product-addons-only-short-text-field {
vertical-align: middle !important;
}

.wcpt-product-addons-only-short-text-field > *:not(form),
.wcpt-product-addons-only-short-text-field > form > *:not(.wc-pao-addon),
.wcpt-product-addons-only-short-text-field > form .wc-pao-addon label {
display: none !important;
}

.wcpt-product-addons-only-short-text-field > form .wc-pao-addon,
.wcpt-product-addons-only-short-text-field .wc-pao-addon-wrap {
padding: 0 !important;
margin: 0 !important;
}

Cart form – only show attribute dropdowns (and price)

If you need to show your attribute dropdowns in a column and do not wish to show other elements like price or add to cart in that column you can follow this guide:

  1. Add a Cart Form element to one of your columns
  2. In the settings of this cart form element, in Additional CSS Class add: wcpt-only-attributes
  3. Now in the table settings > Style > CSS, enter the following code:
.wcpt-only-attributes {
  vertical-align: middle !important;
}

.wcpt-only-attributes  > *:not(form),
.wcpt-only-attributes  > form > *:not(.variations):not(.single_variation_wrap),
.wcpt-only-attributes  > form .single_variation > *:not(.woocommerce-variation-price),
.wcpt-only-attributes .woocommerce-variation-add-to-cart {
  display: none !important;
}

.wcpt-only-attributes > form,
.wcpt-only-attributes > form .variations {
  margin:0 !important;
}

.wcpt-only-attributes .woocommerce-Price-amount {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #66a918 !important;
}

If you need to hide the price as well, please use:

.wcpt-only-attributes .woocommerce-Price-amount,
.wcpt-only-attributes .single_variation_wrap {
  display: none !important;
}

Global search shortcode

/* Height */
.wcpt-global-search__form,
.wcpt-global-search__category-selector-facade,
.wcpt-global-search__category-selector-facade,
.wcpt-global-search__submit-wrapper {
line-height: 56px !important;
height: 56px !important;
}

/* Input Field */
.wcpt-global-search__keyword-input {
border-color: #CDDC39 !important;
font-size: 16px !important;
}

.wcpt-global-search__keyword-input:focus {
border-color: #AFB42B !important;
}

/* Dropdown */

/* -- background */
.wcpt-global-search__category-selector-wrapper {
background: #CDDC39 !important;
font-size: 16px !important;
}

.wcpt-global-search__category-selector-wrapper:hover {
background: #AFB42B !important;
}

/* -- text */
.wcpt-global-search__category-selector-facade {
color: rgba(0, 0, 0, 0.75);
font-size: 15px;
}

/* Submit Button */

/* -- background */
.wcpt-global-search__submit {
background: #CDDC39 !important;
}

.wcpt-global-search__submit:hover {
background: #AFB42B !important;
}

/* -- icon */
.wcpt-global-search__submit-icon {
color: rgba(0, 0, 0, 0.75);
stroke-width: 3px;
}

/* -- text */
.wcpt-global-search__submit-text {
font-size: 15px;
color: rgba(0, 0, 0, 0.75);
}

Variation table

WCPT PRO provides you the facility to create a variations based table. However, you cannot mix product variations with variable products and simple products in the same table. A variations table only contains product variations from a single variable product.

Please see the product variation demo here.

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 when some variations are not available.

Important notes about the 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. 

Ordering your product variations

Your variations table will follow whatever sorting instructions you have given it in table settings > Query. So please use the following settings to make the variations follow the same order as the backend:

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.

Show variations on the 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. 

Add variations by SKU

If you need to add variations to your product table based on their SKU, then remove the ids=”parent id” shortcode attribute mentioned above. And instead, use 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 variation product table to product pages via PHP

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 add to cart form from variable product pages you can use 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.

Variations table in Elementor product template

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.