Category: Documentation

You can make the product table heading sticky / freeze it in place as the visitor scrolls the page. You can also make any number of columns at the sides of the table sticky using the product table plugin’s shortcode options.

Check out our spare parts product table demo where the table heading has been made sticky and so are the columns on the sides of the table.

Freeze product table heading

To make the woocommerce product table’s heading sticky / fixed in place you can use these shortcode options (screenshot from table editor):

You also have the option of creating an “offset” for the sticky heading row. This is useful when you already have a sticky / fixed element at the top of your website page such as a mega menu and you don’t want the product table heading to be stuck behind that sticky element. In such a case you can use the offset option to push the sticky table heading down a little so it is visible to visitors. Here is the shortcode option information from the product table:

Freeze product table columns

You also have the option to freeze the columns at the left and right edges of the product table. This is especially useful when you have a product table with many columns which is causing the product table to overflow horizontally and hide the last columns.

You can select how many columns from the left and right end of the product table you wish to make sticky. Here are the relevant shortcode options to make table columns sticky:

This facility is useful when you have created a product table template that you are re-using on different pages to print different sets of woocommerce product results from the same table by changing the shortcode options, but some of the columns end up being empty when the products being displayed in the table are not related to the empty columns’ property. In such a case use this facility to automatically hide the empty columns.

Use case example scenario

For example let’s say you have created a product table with this shortcode:

[product_table id="123"]

Now you are using this same product table on different pages to print different sets of product results on each page by changing its “category” shortcode option. Let’s say you are using these shortcode variations for the product table to show products with category “clothes” and “books”:

[product_table id="123" category="clothes"]
[product_table id="123" category="books"]

Problem to resolve

Now suppose the product table has a column displaying “book author” which is useful when you are displaying woocommerce products with the category “books”. And you have another column in the same table called “size” which is useful when showing products with category “clothes”.

But this creates a problem – when you are showing category “clothes” through the product table the “book author” column remains empty as it is irrelevant to products with category “clothes”. And while showing “books” category through the product table the “size” columns remains empty as it is irrelevant to books.

Solution via this facility

To fix this issue you can use the hide_empty_columns option that is going to automatically hide all empty columns in the table. You just need to make a small modification to both your product table shortcodes like this :

[product_table id="123" category="clothes" hide_empty_columns="true"]
[product_table id="123" category="books" hide_empty_columns="true"]

Now the “size” column will simply not appear when showing products with “clothes” category via the product table and the “book author” column will not appear when showing books through the same table as this facility detects and removes any empty columns from the table.

Facility information in table editor

The product table plugin provides several shortcode options to make it easier for you to create fewer tables while displaying wide variety of product results from the same table template. Information for this specific shortcode options is listed in the table editor at this location:

Facility in the table editor

This facility is now also provided in the table editor itself. Go to the table’s settings →  columns →  more options →  use the auto-hide empty columns option.

PHP API

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.

↳ To initialise the element you can use the javascript event wcpt_after_every_load that is run once on the .wcpt container when page first loads and upon every AJAX request for fresh product results. You can also use the trigger wcpt_layout that is run more often, every time the size of the table changes due to internal elements or browser resize. Both events are described further in the Javascript API section on this page.

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.

Example code:

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;
}

↳ Variation table

If you have created a variation table and each line of the table is displaying a separate variation then you need to use this filter hook to modify the variation query args: wcpt_variation_query_args

Example code:

add_filter( 'wcpt_variation_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.

Example code:

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;
}

Modify product price

The prices displayed in the product table are run through the following filters. Each filter gets two arguments, the original price figure and the product.

Price filter	Purpose
wcpt_product_get_lowest_price	Get the lowest price in case of variable products.
wcpt_product_get_highest_price	Get the highest price in case of variable products.
wcpt_product_get_sale_price	Get the sale price in case of products that are on sale.
wcpt_product_get_regular_price	Get the regular price for the product.
wcpt_product_get_price	Affects the price considered by the element conditions system, not displayed anywhere.
wcpt_product_is_on_sale	Get the sale status of the product. Toggling this will change the product sale status. Its first argument is sale status, second is product.

Here is an example where we reduce the price of a specific product in a specific product table:

add_filter('wcpt_product_get_regular_price', 'apply_custom_price_in_table', 10, 2);
function apply_custom_price_in_table($price, $product)
{
  // get the current table's data
  $table_data = wcpt_get_table_data();

  // check if the table id matches the one we want to modify
  if ($table_data['id'] == 63) {
    // check if product id matches the one we want to modify
    if ($product->get_id() == 37) {
      // make changes to the price
      $price = $price - 10;
    }
  }

  return $price;
}

Keep in mind in the above example we have not put this product on sale, only reduced its regular price. To put the product on sale we will need to use the above mentioned filters “wcpt_product_is_on_sale” and “wcpt_product_get_sale_price” as well.

Whitelist url params over AJAX

By default the plugin will not allow random parameters over its AJAX calls for security and compatibility reasons. If you need to whitelist specific url parameters that need to be carried across all AJAX calls, then use the function wcpt_permit_param to add your custom parameters to the plugin’s url parameter whitelist.

Example code:

add_action('init', 'whitelist_custom_wcpt_params');
function whitelist_custom_wcpt_params()
{
  wcpt_permit_param('myparam1');
  wcpt_permit_param('myparam2');
}

---

JavaScript API

AJAX results loaded

The event wcpt_after_every_load is triggered on the .wcpt container once upon initial page load, and each time the table is refreshed with new product results after AJAX requests for navigation are completed.

Example code:

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

Layout

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

Example code:

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

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. 

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. 

• 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.

WooCommerce Product Table PRO’s 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:

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:

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.

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 table
• Toggle child row
• Freeze column
• Toggle property list
• Show info in tooltip

‘2 column’ woocommerce product table

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]

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]

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]

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]

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. 

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.

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

Settings to create Custom Field range slider

Note: The settings for Price range filter are similar.

Premade filter options

In addition to the range slider you might like to provide more pre-made filter options with min-max values. Such as this:

For this go to the settings of the same Custom Field Filter you have created and in its section called ‘Filter Options’ use the Add an Option button to create pre-made min-max range options for the filter. Reference screenshot:

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 (meta data) 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 for that property as well.

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:

BEAR – Bulk Editor and Products Manager Professional for WooCommerce by Pluginus.Net

PW WooCommerce Bulk Edit

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

Purpose

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

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

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

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

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

---

Styling

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

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

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

---

Special notes

Element condition

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

Relabeling terms

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