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 markup

Every element printed in the table and navigation goes through the filter: wcpt_element_markup

This filter provides two arguments to the callback:
$markup – The HTML markup generated by the plugin for this element.
$element – The array with element settings based on user input.

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_filter', 100, 2);
function wcpt_custom__modify_filter( $markup, $element ){
  if( $element['type'] == 'category_filter' ){
    $markup = '<span>Custom text</span>' . $markup;
  }

  return $markup;
}

Modifying table output

The table markup is passed through the wcpt_markup filter.


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:

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 woocommerce product attribute to custom field?

Using WooCommerce Product Table PRO’s range slider facility is only possible with custom fields, not attributes. In this doc we will cover convenient ways to quickly duplicate attributes to custom fields on your site.

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. You can use any of the following options to speed up the process:

  • Best option: Get the ‘WCPT Addon: Copy Attribute to Meta’ plugin that can help you automatically copy all attributes to product meta with one click. Sold separately from WCPT PRO.
  • Use the in-built WooCommerce Import / Export facility to modify products in an excel sheet.
  • Use a bulk product editor plugin.

Note: Before following the steps in this guide, please take a database backup first!


WCPT Addon: Copy Attribute to Meta

This is the simplest and fastest way to:

(1) Copy attributes to meta for all your woocommerce products with just one click.
(2) Automatically keep the attributes and meta in sync in the future, with no additional effort.

You can set up this plugin once and forget about it. It will automatically manage copying attributes to meta as your website data changes going ahead, ie, attribute values change or new products are created.

While the next 2 options will also help you copy over attributes to custom fields, you will need to repeat the process of copying attributes to meta each time you make changes to your product attributes.

On the other hand, ‘WCPT Addon: Copy Attribute to Meta’ can copy attributes to meta automatically whenever you make any changes to your products in the future.

This addon plugin is sold separately from WCPT PRO. To get the addon contact support.


WooCommerce import / export products facility

You can read the official woocommerce documentation on this topic here. It covers how to use this woocommerce facility. The following guide further explains how to achieve the specific aim of copying over attributes to meta as per our requirement.

  • Begin by exporting 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.


Bulk product editor plugins

This method is slower than the import/export method described above but some users might find this more convenient as it is simpler.

The following woocommerce bulk product editor plugins will allow you to edit multiple products at one time using a simple UI:

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