Product tables improve shopping experience and sales

Let’s explore the impact of product table layout on your shop. How it helps enhance the shopping experience on your site, increases sales and gives your e-commerce shop a clear edge over the competition.

What is a product table?

By default WooCommerce only displays products in a grid layout with each product represented in a cell. This is a very limiting layout and not at all the ideal way to display products for most stores. 

While browsing the product grid if your shopper wishes to explore any product further they have to click on the product cell and go to the product page and repeat this tedious exercise for each product that they may be interested in. This is a slow process, and makes browsing and comparing products harder. Therefore they are also less likely to make purchases with such a shop layout.

A product table layout (see demos) is meant to increase sales by making it much quicker and easier for your shoppers to compare and find the products they want, and buy them immediately right from the shop browsing page. Which is why a well prepared product table layout can have a huge impact on your shop conversions and give you a major advantage over competition. 

The traditional grid layout of products is only suitable for products that are heavily image focused, and the other product properties have little to no impact on purchase decision. And with WooCommerce Product Table PRO’s addon called Grid Table View Switcher you can even give your shoppers the option to switch between grid and table layout while browsing your products. This gives your prospective customers the best of both worlds, putting them in a better position to explore and purchase products from your store. 

Do you need it?

WooCommerce Product Table PRO is capable of creating a table as well as list like view.

Examples of pure table view: Demo 1, Demo 2, Demo 3

Examples of list like view: Demo 1, Demo 2, Demo 3

For many product types such as food, spare parts, music, electronics, gaming cards, etc it is absolutely essential to provide a table or list like view in order to let the shoppers easily browse the products in the fastest, most convenient way.

And for all other product types it is highly beneficial to give your shoppers the option to also view the products in a table / list view even if you keep the grid view as the primary layout on your site. 

Great shopping experience is absolutely essential for increasing product sales. Which is why the product listing should be top notch on any web shop. It should be easy for your prospective customers to browse your products and quickly find the ones they want. Which is why a product table / list layout option should definitely be available on every web shop. Not providing your shoppers the right browsing experience can lead to unnecessarily lost sales. On the other hand by making shopping easier on your site you get a great edge over competitors.

Which is why a product table layout, at least as the secondary layout if not primary is essential for any e-commerce shop looking to boost profits. 

How to set it up on your site?

It is very easy to set up a new product table on your website or even replace the existing product grids on your site with tables using WooCommerce Product Table PRO. 

You can get started with your first product table within a couple of minutes using built-in presets (see preset getting started video). You can also download any of the plugin PRO demos and install them on your site. These pre-built tables are fully customisable so you can modify them as per your site requirements. Or you can create a custom table from scratch if you wish. 

The plugin provides clear step by step tutorials that anyone can follow along and are designed to help you get started immediately. As well as documentation, and FAQs. And you also have the option of email support if you have any special questions to clarify. 

WooCommerce Product Table PRO users have set up fantastic product table shops on their stores to improve their sales and so can you! 

You can start with the free version of the plugin right now, which is useful for getting started but limited. Then progress to the PRO version for exclusive features aimed at greatly improve shopping experience and product sales at your store.

How do I create a WooCommerce Spare Parts shop?

With this quick and easy guide you can create the perfect woocommerce spare parts shop today itself. Zero coding knowledge required. We will be using simple visual tools so absolutely anyone can follow along.

Examples of woocommerce spare parts product lists

Following are examples of product list layout for woocommerce spare parts shop. Once you have covered this guide it will be easy for you to create such product list layouts (and much more) on your woocommerce spare parts shop:

Create the basic woocommerce spare part product

If you don’t known how to create woocommerce products, please see this tutorial video which will quickly cover the topic. After that you can follow along these steps:

  • Create a new woocommerce product and add the spare part name and price.
  • You may also add information about that spare part in the content section of the product and image thumbnail. 

Add other spare parts properties to your woocommerce product 

  • You may also like to add other properties to the spare parts such as length, width, maker etc. For this you can use global woocommerce attributes. And add the attribute terms to your spare parts product.

Create a woocommerce product list layout for your spare parts shop

  • First, you need to purchase, install and activate the WooCommerce Product Table PRO plugin on your site. We will use this plugin to create the spare parts list.
  • Now you may like to watch the quick and simple how to use tutorial video for this plugin so you can start using it right away.
  • For immediate results the plugin provides you downloadable demos that you can setup on your site right away then customize them how you want. So go ahead and install a downloadable spare parts demo on your site: Demo 1, Demo 2. See FAQs > Other > How do I import the PRO version downloadable product table demos to my site?
  • Then watch the how to modify preset tutorial video to start customizing your product table the way you want.

Setup product table navigation

  • If you are using a downloadable demo then the navigation would already be setup for you. If you wish to modify the navigation simply watch the product table navigation tutorial. Then change the navigation filters in the ways that you want.

– Optional tips –

  • You may also like to add an automatic count for each of the attribute filter options in the navigation. For this please see FAQs > Navigation > How do I dynamically hide empty filter options (adaptive filtering) that have no results? How do I show filter count?
  • If you are using global woocommerce attributes in your spare parts products and you have printed these attributes in the table columns then you can also connect the filters options with the attributes in the table for easier navigation. See FAQs > Navigation > How do I link category and attribute elements with their filters so that clicking them activates their corresponding filter?

Product CSV file download option

All major online spare parts stores provide the option to download their product list in a CSV file format as well. This options is usually provided via a ‘Download CSV’ button placed above the product list.

This is a powerful facility because once your visitors download the product data in CSV file format they can open it in specialized spreadsheet software like Excel, Google Docs and many others. These software allow quick sorting, searching and filtering through the product data as well as taking print outs and sharing information if needed.

WooCommerce Product Table PRO provides this CSV download facility so you can easily set it up for your product list as well. You can also select the exact product properties that are permitted to be downloaded in CSV format making this facility excellent for online spare parts stores.

Create a favorites list facility

Popular spare parts shops and established e-commerce shops in general always provide their shoppers with the option to add different products in a ‘favorites list’. They provide this options because it is known to help increase sales on the site. This ‘favorite products’ facility makes it much easier for your shoppers to pick out and keep track of their preferred spare parts, quickly find these particular products when they return to shop in the future and buy items from their favorite list at any time.

You can easily add this favorite products facility to your product table by following these steps:

  • Purchase, install and activate the simple favorite products addon on your site.
  • Then use the step by step setup guide to help you create a page to show the visitor’s favorites list on your site and provide the ‘add to favorite’ button in your spare parts list.

How do I create a WooCommerce Wine Shop?

With this simple A-Z guide you can quickly create a great woocommerce wine shop today itself. No coding knowledge required. We will only use simple tools so anyone can following along.

Examples of woocommerce wine shop product lists

Below you will find examples of woocommerce wine shop product lists. Once you have followed this guide you will be able to create such woocommerce wine lists on your site as well:

Create the basic woocommerce wine product

In case you are not yet familiar with creating woocommerce products please see this tutorial video. Then follow these steps:

  • Create a new woocommerce product and add the wine name and price.
  • You may also add information about that wine in the content section of the product and image thumbnail. 

Add other wine properties to your woocommerce product 

  • You may also like to add other properties to the wine such as country, region, brand, type etc. For this you need to create global woocommerce attributes. Then add the attribute terms to your wine.

Create the woocommerce product list layout for your wine shop

  • First, you need to purchase, install and activate the WooCommerce Product Table PRO plugin on your site. We will use this plugin to create the wine list.
  • Now you may like to watch the quick and simple how to use tutorial video for this plugin so you can start using it right away.
  • For immediate results the plugin provides you downloadable demos that you can setup on your site right away then customize them how you want. So go ahead and install a downloadable wine demo on your site: Demo 1, Demo 2. See FAQs > Other > How do I import the PRO version downloadable product table demos to my site?
  • Then watch the how to modify preset tutorial video to start customizing your product table the way you want.

Setup product table navigation

  • If you are using a downloadable demo then the navigation would already be setup for you. If you wish to modify the navigation simply watch the product table navigation tutorial. Then change the navigation filters in the ways that you want.

– Optional tips –

  • You may also like to add an automatic count for each of the attribute filter options in the navigation. For this please see FAQs > Navigation > How do I dynamically hide empty filter options (adaptive filtering) that have no results? How do I show filter count?
  • If you are using global woocommerce attributes in your wine products and you have printed these attributes in the table columns then you can also connect the filters options with the attributes in the table for easier navigation. See FAQs > Navigation > How do I link category and attribute elements with their filters so that clicking them activates their corresponding filter?

Create size variations for your wine products

You may like to provide your customers the option to buy your wine bottles in different sizes such as 750ml, 1.5L etc. Only follow these steps if you do need to provide different bottle size options:

  • Create a new global attribute called ‘Bottle size’ and add terms to it based on sizes such as 750ml, 1.5L etc. 
  • Turn your wine product into a Variable product by going to its Product data settings and selecting the option. If you are not familiar with this you can read more about variable products here.
  • Create size based variations for your wine product based on the Bottle size global attribute. Then add different prices for the variations based on the size of the bottle.
  • Now your wine store customers will be asked to select the bottle size while adding the wine to their shopping cart. Optionally you can also place the ‘Select variation’ element in any column of your product table to provide the size option dropdown inside the table itself. 

Create a favorites list facility

Popular wine shops and established e-commerce shops in general always provide their shoppers with the option to add different products in a ‘favorites list’. They provide this options because it is known to help increase sales on the site. The favorite wine list facility makes it much easier for your shoppers to pick out and keep track of their preferred wines, quickly find these particular wines when they return to shop in the future and buy items from their favorite list at any time.

You can easily add this favorite products facility to your product table by following these steps:

  • Purchase, install and activate the simple favorite products addon on your site.
  • Then use the step by step setup guide to help you create a page to show the visitor’s favorites list on your site and provide the ‘add to favorite’ button in your wine list.

How do I create a WooCommerce Audio Store?

Using this guide you can easily and quickly create a great woocommerce audio store product list on your website right now. Anyone can follow along, no coding knowledge required. This is a complete step by step guide and we will only use simple tools.

Examples of woocommerce audio store product lists

Below are some examples of woocommerce audio store product tables / lists. By following this guide you can easily create such audio track lists on your site as well:

Create the basic woocommerce audio product

If you are not familiar with creating woocommerce products, please see this tutorial video.

  • Create a new woocommerce product and add the song name and price.
  • Optionally you can also add the song description and image thumbnail as well. 
  • In ‘Product data’ settings check mark ‘Virtual’ and ‘Downloadable product’ options.
  • In the ‘Downloadable files’ option add the audio file customers can purchase.

Add other audio product properties 

  • To add other song properties like Artist, Genre, Mood, etc create global woocommerce attributes.
  • For numeric properties like BPM that need to be filtered by range create new custom fields.
  • Upload the audio preview file to site Media, create a new custom field in the product and add the preview file’s URL to this custom field.

Create woocommerce product table for your audio store

  • Purchase, install and activate the WooCommerce Product Table PRO plugin on your site.
  • Watch the basic how to use tutorial video to begin using the plugin right now.
  • To help you quickly get started the plugin provides the option to start with preset tables. Create a new product table and start with a ‘Table’ type preset.
  • Watch the how to modify preset tutorial video to start customizing your product table.
  • Add columns to your product table to show the audio product’s properties through Attributes and Custom Field elements in the product table.
  • Add the audio player button in any column of your product so visitors can use the play button to listen to the audio file. See FAQs > Other > How do I add an audio player button in my product table?

Setup product table navigation

– Optional tips –

  • For numeric fields like BPM that were stored in custom fields you can create range filters.
  • You can add an automatic count for each attribute filter option in the navigation. See FAQs > Navigation > How do I dynamically hide empty filter options (adaptive filtering) that have no results? How do I show filter count?
  • If you are using global attributes you can also connect filters options with the attributes in the table for easier navigation. See FAQs > Navigation > How do I link category and attribute elements with their filters so that clicking them activates their corresponding filter?

Create multiple license type options

Most audio sites provide option to purchase different license types such as regular, extended, etc. Only follow this step if you need to provide different license types.

  • Create a new global attribute called License and add terms to it based on license types such as regular, extended. 
  • Turn your audio product into a Variable product in its Product data settings. You can read more about variable products here.
  • Create variations for your product based on the License global attribute and add different prices for each license variation.  
  • Customers will be asked to select license type while adding product to cart. You can also add the ‘Select variation’ element to your product table to give license option dropdown inside the table itself. 

– Optional steps –

Note: At this point you already have a basic audio table on your site. Rest of this guide is optional. But the following steps will further improve your audio product table thus increasing the chances of sales by giving your audio site visitors a great shopping experience!

Create favorites playlist

Popular audio shops always provide their site visitors the option to add various audio tracks to their favorites playlist. Because this greatly helps sale conversions on the site. The favorite playlist facility makes it easier for your potential customers to pick out audio tracks they like, quickly find these tracks when they return to shop in the future and buy from this favorites list at any time.

You can add the favorites playlist facility to your product table easily by following these steps:

Audio footer player

Popular audio store also provide a smart footer audio player that is activated when any audio track is played on the site. While footer audio player is not part of WooCommerce Product Table PRO’s own facilities, it has integration with another 3rd party plugin that provide this facility called WavePlayer. You can see a demo of this integration here.

  • Get the WavePlayer plugin, install and activate it on your site.
  • Use the setup guide to add the waveplayer to your product table.

Developer API

API for developers to modify the plugin output. Contains PHP filters and JavaScript events.

PHP

Modifying templates

Create a folder wc-product-table in your child theme and add your custom template there.

Adding custom elements

Add the Shortcode element in a table column. This element parses shortcodes entered in it and prints the output in the table in each row. The current row product is help in global variable $product. So you can use that context to generate your markup. Create a custom shortcode to print out your custom output. Use the Shortcode element to print out the markup.

Modifying element settings

You can modify the settings of any product table element programatically. Every table element will be run through the filter: wcpt_element before the plugin processes its HTML markup based on its settings.

This filter provides one argument to the callback function:
$element – An array containing all the element’s settings.

Within your callback function you can also refer to the global $product variable to access the current product. This global $product variable will hold a different product each time a new product row is being printed. So your callback function can make changes to the element specific to the current row product.

To ensure that you are targeting the correct element, you need to check that the $element[‘type’] matches the specific element you wish to modify before modifying the markup.

For example, if we wanted to add some text before the ‘Category Filter’ element we would use this code:

add_filter('wcpt_element', 'wcpt_custom__modify_element_settings', 100, 1);
function wcpt_custom__modify_element_settings( $element ){
  if( $element['type'] == 'category_filter' ){
    $element['single'] = 'true';
  }

  return $element;
}

Another way to identify the specific element is to go to its settings and give it an HTML Class and in your callback function check if $element[‘html_class’] matches the HTML class that you are targeting.

Modifying element markup

After the plugin has processed the HTML for any table element, it will run the markup through a filter before printing it. You can hook in here and completely modify the markup for the element. The filter is: wcpt_element_markup

This filter provides two arguments to the callback function:
$markup – HTML markup generated by the plugin for this element.
$element – An array containing all the element’s settings.

Within your callback function you can also refer to the global $product variable to access the current product. This global $product variable will hold a different product each time a new product row is being printed. So your callback function can make changes to the element specific to the current row product.

To ensure that you are targeting the correct element, you need to check that the $element[‘type’] matches the specific element you wish to modify before modifying the markup.

For example, if we wanted to add some text before the ‘Category Filter’ element we would use this code:

add_filter('wcpt_element_markup', 'wcpt_custom__modify_element_markup', 100, 2);
function wcpt_custom__modify_element_markup( $markup, $element ){
  if( $element['type'] == 'category_filter' ){
    $markup = '<span>Custom text</span>' . $markup;
  }

  return $markup;
}

Another way to identify the specific element is to go to its settings and give it an HTML Class and in your callback function check if $element[‘html_class’] matches the HTML class that you are targeting.

Modifying table markup

The complete table markup is passed through the wcpt_markup filter.

Modifying table query args

All the table query args are passed through the filter: wcpt_query_args

This filter provides one argument to the callback function:
$query_args – An array of query args for the product table query.

Code example of hooking into this filter:

add_filter( 'wcpt_query_args', 'wcpt__custom_query_args' );
function wcpt__custom_query_args( $query_args ) {
  $table_data = wcpt_get_table_data(); // table data

  // modify query args here

  return $query_args;
}

Modifying products fetched by table query

The product results received through the table query are passed through this filter: wcpt_products

Please keep in mind this set only contains the products displayed on the current page, not the entire result set for the table. So if the product table has 100 products, and only 10 displaying per page, then this result will hold the current 10 products.

This filter provides one argument to the callback function:
$products – A WP_Query object with query args and product results for current page of the table.

Code example:

add_filter( 'wcpt_products', 'wcpt__custom_product_result' );
function wcpt__custom_product_result( $products ) {
  $table_data = wcpt_get_table_data(); // table data

  // modify products here

  return $products;
}

JavaScript

AJAX results loaded

Once upon initial page load, and each time AJAX result markup is loaded on the page, the event wcpt_after_every_load is triggered on the container .wcpt

Code example:

  $('body').on('wcpt_after_every_load', '.wcpt', function(){
    var $this = $(this);
    // do something with $this (markup container)
  })

Layout

The event wcpt_layout is triggered on .wcpt each time the table is forced to re-layout. For example, initial page load, screen resize, AJAX results loaded, variation selected, etc.

Code example:

  $('body').on('wcpt_layout', '.wcpt', function(e, data){
    var $this = $(this);
    // do something with $this (markup container)
  });  

WCFM + WooCommerce Product Table PRO

WCFM is the best wordpress plugin available today for setting up your woocommerce marketplace. If you need a solution that is fast, simple and reliable then look no further. 

And now you can also show your WCFM products in a table on the vendor shop and category pages!

WooCommerce Product Table PRO is perfectly integrated with WCFM to meet this requirement. 

Using the two plugins together you can create the perfect shop experience for your prospective customers. 

Example of product table on the vendor shop page instead of default product grid.

Support

Got any questions about this integration? Feel free to contact support for a prompt response! If at any point while using the plugins you have questions about the integration please write in.

About WCPT PRO

WCPT PRO is the best software in the product table genre and offers unbeatable features and integrations. Please visit the plugin homepage to know more about it. 

While there is also a free version available called WCPT Lite, this WCFM integration as well as other exclusive features are only part of the premium version of the plugin – WCPT PRO.

Add a ‘Download CSV’ button to WooCommerce Product Table

Allow your prospective customers to download the product data in a CSV file making the purchase decision more convenient for them. You can control the list of product properties that will be downloaded.

WCPT PRO users can provide their prospective customers with the facility to download product information in CSV format. You can also control which product properties are downloaded in this CSV file. 

woocommerce product table download csv button

Having the products in a CSV file gives your customers the ability to view the product information in MS Excel, Google sheets and other spreadsheet programs. They are then free to explore the data with specialised software, putting them in a better position to make a purchase decision. 

It also makes it easy for your customers to print out the product data for later access or for sharing with others.

Following is a list of important pointers regarding using this facility:

  • To add the Download CSV button in your table navigation, go to your table’s settings > navigation > click on +Add element > select the Download CSV element. 
Add Download CSV button to your woocommerce product table
  • Open the settings of this ‘Download CSV’ element. You will find by default it has 3 product property columns assigned. Modify this list to include the properties that you need to show on the CSV downloadable file. 

In the following example we add a new property column to the CSV. We are adding a CSV column for the attribute ‘Maker’ and giving it the same heading ‘Maker’.

  • Remember to give each CSV column a heading as well. This heading will show up in the downloaded CSV file and give context to the viewer. 

  • The option to download products from all result pages can be significantly more resource intensive. For this reason most large product database sites like Mouser only provide current page products in the downloaded CSV file. Do test downloads of the CSV file and consider if the performance is adequate.

Create a ‘Child Row’ in your woocommerce product table

The child row facility let’s you show additional product information in a separate child row below the main product row when visitor clicks a toggle button.

WCPT PRO’s exclusive child row facility is a great UI addition to your table. It helps keep the table neat and compact while allowing visitors to quickly access additional information. Please see preview gif:

add a child row in your woocommerce prodcut table
When the toggle button is clicked the child row is revealed with additional information about the product.

The child row UI

The child row facility lets you show additional product properties in a separate child row below the main product row in a table. This child row is hidden when the page is initially loaded and it is only revealed when the visitor clicks on the toggle button at the beginning of the parent row. 

Child row content source

The content of the child row is taken from specified columns of the product table. These source columns (that you select) are hidden in the product table initially. And their content is displayed in the child row when the visitor clicks on the toggle button.

For example let’s say you have a product table with five columns. You can assign the last three columns as the child row source. Accordingly these three columns are going to be hidden initially. And the content of these columns is going to be displayed in the child row when it is revealed using the toggle button. 

Assigning columns as child row source

To assign table columns as child row source, you must first give names to the columns in the editor. See example of naming columns in the editor:

Here we are naming first column ‘img’ and second column ‘item’. In the same way you need to name all your table columns.
Add child row to any woocommerce product table

Once you have named your columns you can use the following options in your shortcode to assign child row columns:

laptop_child_row_columns=”Name 1 | Name 2 | Name 3″
tablet_child_row_columns=”Name 1 | Name 2 | Name 3″
phone_child_row_columns=”Name 1 | Name 2 | Name 3″

So, for example, if we have a product table with the ID 123, it’s shortcode would normally be:

[product_table id="123"]

We can assign any of this table’s columns as the child row source by modifying the shortcode like this:

[product_table id="123" laptop_child_row_columns="Name 1 | Name 2 | Name 3"]

In the above example columns with names: Name 1, Name 2 and Name 3 are going to be hidden from the initial table view and displayed inside the child row only.

To specify child row columns for tablet and phone view we can extend the shortcode like this:

[product_table id="123" laptop_child_row_columns="Name 1 | Name 2 | Name 3" tablet_child_row_columns="Name 1 | Name 2 | Name 3" phone_child_row_columns="Name 1 | Name 2 | Name 3"]

Child row column width and order

By default each cell inside the child row gets 100% width. But if you want, you can assign custom % widths to the different cells. For this you need to modify the previously mentioned shortcode option to add custom widths as well. Next to each name inside the shortcode you need to add ‘: 50%’ and replace 50% with the percentage width for that cell inside the child row.  

For example:

[product_table id="123" laptop_child_row_columns="Name 1: 100% | Name 2: 50% | Name 3: 50%"]

In the above shortcode we are asking for the column with the name ‘Name 1′ to have 100% width inside the child row, while Name 2 and Name 3 columns’ cells should have only 50% width each. 

Child row with freeze column and heading

The child row facility works perfectly even if the table is in horizontal overflow mode. It also works well if the heading table heading has been frozen using laptop_freeze_heading=”true”

However, the child row facility cannot work if the table left column is frozen. For example if you are using: laptop_freeze_left=”2″ to fix the left 2 columns in place.

Create mobile responsive woocommerce product table

Create product tables that are as convenient to use on phones as laptops. Make it easy for your prospective customers to browse and purchase products from their phones.

Now you can easily create a responsive woocommerce product table that looks and functions great on phones and tablets as well! WooCommerce Product Table has all the facilities you need to create a great phone browsing experience and increase conversions from mobile traffic.

With more and more e-commerce activity shifting to phones it is necessary to ensure your tables are mobile friendly. WooCommerce Product Table PRO was built ground-up with mobile responsiveness in mind. It is the only product table plugin that offers multiple responsive modes so you can select the view that perfectly suits your product tables and create a great tablet and phone browsing experience for your prospective customers.

Absolutely anyone can follow along and increase conversions from mobile traffic. No programming experience is required.

Using this document you will be able to create product tables that are just as convenient to use on phones as on laptop.

Note: Please see the woocommerce product table plugin tutorial series first for clarity on using the plugin. The tutorials are especially designed to help you get the most out of the plugin in the least time.

Below you will find different ways you can present your table in responsive mode with explanation on how to attain each of these responsive views. You can select the view that is most suitable for your table and follow instructions to achieve it.

Jump to section:

‘2 column’ woocommerce product table

Create your responsive woocommerce product table
Table shows 2 columns in phone view. First column has image and second column shows other properties in one row each. All information is neatly displayed.

This is a simple way to create your responsive woocommerce product table. It is used by many e-commerce sites because it is effective at packing information into small screens.

In the Phone Columns section create 2 columns. In the first column create a Product Image element. In the second column, place all the remaining table elements in separate rows. 

In the case of tables with large amounts of data, you can choose to add only the essential information in the Phone Columns and let the site visitors use the product link to see more information on the product page. This responsive strategy is used by major sites like Mouser.

For further details please see tutorial 1 > Phones columns.

‘Toggle child row’ in your responsive woocommerce product table [PRO version exclusive]

Woocommerce product table with child row for phones
The ‘Child Row’ facility is used to display hidden table columns in a separate child row.

Using the ‘Child row’ facility you can hide some of the table columns when the table is viewed on phones and provide a toggle button to reveal these hidden columns in a separate child row below the main product row. This is a quick and easy way of creating a responsive woocommerce product table.

So, for example, let’s say you have 6 columns in the laptop view of your product table. But on phones you might want to show just the first 2 columns, and hide the content of the other columns in your child row. Your site visitor can access this additional information by clicking the toggle button.

Please see the Child Row doc for more information on this facility. 

Freeze a product table column in responsive mode [PRO version exclusive]

Woocommerce product table with freeze column on phones
First table column is frozen in phone view.

This method is useful if it is necessary to show multiple columns even on small devices. Perhaps in cases where the customer needs to view properties in columns for quick comparison.

Now you can freeze the first column in your phone table view by adding phone_freeze_column_left=“1” to your shortcode. Customer will be able to horizontally scroll the table while the first column stays in place. 

In some cases the fixed first column may be too wide and taking up too much space in Phone view, making it difficult to see the other columns while scrolling. In such a case you can limit the width of the first column. For this, go to your table’s settings > style > css and copy paste the following:

[phone]
.wcpt-cell:first-child {
  max-width: 100px !important;
}
[/phone]

In the above code modify the value 100px to adjust the column width. 

Use ‘Property List’ element to show more / less properties [PRO version exclusive]

Responsive woocommerce product table with toggle
The Property List element can be used to conveniently display additional product properties with a show more / show less button.

This method is a modification of the ‘2 column table’ method and adds a convenient toggle button to show more properties in your responsive woocommerce product table. 

Create two columns in the Phone Columns section. In the first column place the product image element. In the second column place the Title element. Then add another row inside the second column. In this row add a Property List element.

You will be adding the remaining product properties and their labels in this Property List element. 

Here is the advantage of the Property List element:

  • Allow customers to use the show more / show less buttons. Keep the UI neat and compact while letting customers easily see more properties.
  • Centralised controls for styling all the property labels and values from one place
  • Conditionally print the labels. If a property doesn’t exist for a specific product, the label doesn’t have to be printed. 

You can see the Property List element being used in the Audio demo – 4 when you view it on phone. While the laptop view has several columns, on phone most of the information is displayed through the Property List element instead.

Use ‘ToolTip’ to show more information [PRO version exclusive]

Woocommerce product table with tooltip
The tooltip element can be used to hide chunks of text and let users access it when they need. As a result the phone table view is kept neat and compact.

The tooltip element is useful when you have large chunks of text to display in the product table such as the Excerpt element. 

Placing the chunk of text directly in the table can spoil the view. In such a case you can create a ToolTip element in your table and then add the element inside it.

This way you can avoid messing up the neat table layout on small screen devices while the visitor can still conveniently access the additional information in the tooltip.

To see this in action, please check out the Food demo – 4 on laptop and then phone. The table in that demo is set to show only 2 columns on phone. And the product short description and tags are placed inside a tooltip to provide a compact view.

Please see the ToolTip doc for more information on how to use this element. 

How do I create a WooCommerce audio table?

The perfect tutorial to help you create brilliant audio product tables for your website. This is the most detailed step by step guide to display your woocommerce audio products in a table using the ‘Woocommerce product table’ plugin.

Absolutely anyone can follow along with this convenient tutorial. No coding knowledge is necessary. It covers how to create a free woocommerce audio table as well as information on adding premium features for a more professional setup.

@FIX
– Adding excerpt preview audio – use the Add Media button in the section itself.

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:
(The following information can be easily found online)
You need to know the basics of WooCommerce. In case you are not familiar with it at all then please see some guides on setting up WooCommerce first. Most importantly, you need to know how to create basic products in WooCommerce (official woocommerce guide).
After you are familiar with the basics of WooCommerce, then you can come back to this guide. It will cover absolutely everything else in great detail related to creating your audio products and displaying them in your custom product tables.

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 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
    • Create a second product
  • Creating the product table
    • Adding columns to the table
    • Adding basic navigation options – Result count, Sortby
    • Creating a mobile optimized responsive view

WCPT PRO (premium version) exclusive features:

  • Adding advanced 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

Now we will add a preview track to our audio product. This is not the file that the visitor will get upon purchase. This is the preview file that they will be able to listen to in the table before deciding to purchase the product.

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

To add the purchasable audio track to your product, go to the product’s settings page > product data > In the top menu of this section checkmark Downloadable. This is going to add new download related options in Product data > General tab. Refer to screenshot with highlights:

Now we will use the new ‘Download files’ option (highlighted above) to add our purchasable audio file to the product.

Click on Add Product data > General > Download Files > Add File. This will add a new panel above it with options to enter File name and File URL and a ‘Choose file’ button.

Use the Choose file button to open up the media upload modal. This modal has 2 table – Upload files and Media Library. The first tab lets you upload a file and the second tab lets you select a file that you have previously uploaded.

So you can either upload the audio file using the Upload files tab or else if you have previously added the file to your site’s Media Library then use the Media Library file to locate and select the file. After you have uploaded / selected your file, a button with the label ‘Insert file URL’ will be enabled at the bottom right of the modal. Use it to attach the audio file to your current product.

After you click the Insert file URL button the Media modal will be closed and you will return to Product data > General tab. In the Download files list > File URL > the audio file URL will have been automatically entered. Now you just need to fill out the ‘File Name’ field that is next to it.

Once you have completed these steps, you have successfully attached a purchasable audio file to your audio product.

Adding the category

Now let’s assign our product a category. Refer to the following screenshot where we create a new category called Audio and add it to our website as well as assign it to the product.

Once you have done this, the category Audio will appear in the Product Categories list for all products in the future, and you can simply checkmark it in the list. So you don’t have to recreate the category each time you create a new audio product.

Publish the product

Now click the Publish (or Update) button on the top right hand side of the product settings page so that this product is published on your site. Once you do this, it will be ready to be viewed on the front end of your site and customers will be able to purchase the product from your site.

There are multiple links on the page that you can use to view the product on the front end. Reference screenshot:

On the front end page you will be able to see all the attributes for this product on its page. Reference screenshot (using the official TwentySixteen theme):

As you can see, all the product information is made available on the site front-end.

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

Also add a downloadable track and a preview track as described earlier.

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 simply click on the values input box and select the previously created attribute value you want to add to your new product.

Creating the product table

Now that we have prepared a couple of audio products, we are ready to build our woocommerce product table and display our audio catalog to our prospective customers.

Note: This guide will not cover the basics of setting up a product table because that is already thoroughly covered in the WooCommerce Product Table tutorial series.

So in case you have not checked the plugin tutorials, please take a moment to do so. The tutorial series is especially written to help you get the most out of the plugin in the least time possible. It covers all the plugin fundamentals using step by step guides, annotated screenshots and videos so that absolutely anyone can follow along.

Once you have had a quick overview of the tutorial series you will be ready to proceed further with this guide. In case you are unsure about any steps in this guide you can always go back to the tutorial series to get more details on the facility.

Now let’s create a new table by going to wp admin > product tables > add new table.

— screenshot —

First, give the new table a name like Audio table and in Query > Navigation > select the Audio category. Then click the Save settings button. This will publish our table. Now we can proceed with adding columns and elements to our table to displaying product information.

Note: If you are unsure about how to create table columns or add elements to your columns, please take a moment to visit this tutorial. It will quickly cover the topic in detail.

Next, open the columns tab and create 7 new columns for your table with these elements:

Column 1
Heading: Name
Cell template: Title

Column 2
Heading: *leave empty*
Cell template: Attribute: Special badge

Column 3
Heading: Track
Cell template: Excerpt

Column 4
Heading: Artist
Cell template: Attribute: Artist

Column 5
Heading: Album
Cell template: Attribute: Album

Column 6
Heading: Genre
Cell template: Attribute: Genre

Column 7
Heading: Buy
Cell template: Button (Link: Add to cart via AJAX)

Here is a video you can follow along to create the columns:

— video —

Adding basic navigation options – Result count, Sortby

Before proceeding further, please check the WooCommerce Product Table navigation tutorial. That will cover all essential aspects of the table navigation. Not only will the navigation tutorial make it easy for you to follow along this section of the audio table guide, but you will also be able to customise your own table navigation through the information it offers.

Now go to the table’s settings > Navigation and see the below screenshot for essential information on this section.

Use the ‘+ Add Element’ button in the header row to add 2 new elements to your product table navigation:

  • Result count
  • Sort By

Creating a mobile optimized responsive view

Now we will create a small screen optimized view for your product table.

Go to the table’s settings > columns > phones columns > here create 1 new column.

Within the column create 8 rows using the + Add Row button.

Add elements to each of the rows like this: