Category: Documentation

Add sorting icons in your product table column headings. Your shoppers will be able to sort the products in the table by clicking on the column headings. Products can be sorted based on any product criteria, making it easier for your prospective customers to compare and find products in which they are most interested.

To do this you need to add the ‘Sorting’ element to your column heading.

Sorting by ‘Custom Field’

While sorting by custom field, please note the custom field type – number or text, and choose an option for ‘Sort by’ accordingly. If you select the wrong option, the sorting may malfunction in some cases.

If the custom field values are text type, you must select ‘Custom field as text’

And if the custom field values are numbers, you must select ‘Custom field as number’.

Sorting by ‘Attribute’

Note: Now you can sort by attributes, category and taxonomy using the convenient WCPT PRO v2.3.0+ sorting facilities! The below doc is not needed anymore. It is only left here for legacy purpose.

(You can use the same method described below for sorting by category or other taxonomy)

By default WooCommerce does not allow sorting based on product attributes. So we will use another route to achieve attribute based sorting. We will duplicate the attribute to custom field and then sort the products based on our new custom field that represents the attribute, thus creating the smart illusion that the products are getting sorted by attribute.

To duplicate the attribute to custom field, you can either go to each product’s page and manually do the duplication or choose one of these more efficient methods to vastly speed up the process.

Once you have added a new custom field to each product with the attribute term as the value, you can not sort the column by the custom field, and in effect, it will appear as if the column is being sorted by an attribute.

You can see the same system working very well for the WCPT PRO demos.

Let’s take an example: In the following screenshot from the ‘Courses’ demo, consider the ‘Subject’ column. ‘Subject’ is a WooCommerce attribute for the products in this table. However, you can see the sorting is working for this column.

Each Course product has a term set for the ‘Subject’ attribute.

Each Course product is also given a ‘Subject’ custom field with a corresponding value matching the attribute term for the product.

The custom field section can be revealed on any product editor page by using the ‘Screen Options’ tab at the top right of the page. The custom field section will appear further down on the page.

For more information on how to set custom fields, please check the WordPress documentation on custom fields.

Continuing with our example: Now in the table settings > Columns, in the heading of the Subject column, a ‘Sorting’ element is added. It is configured to sort the column by ‘Custom field as text’ when the heading is clicked. And the ‘Custom field’ is set to ‘Subject’.

And therefore, the column becomes sortable by the WC attribute ‘Subject’.

Using WooCommerce Product Table PRO you can replace the default WooCommerce product grid on your shop, search, category, attribute, tag and other product archive pages with a product table or list.

The table automatically shows the correct products for the current page. For example, a Shoes category page will show only shoes, while the shop page will show the normal shop results.

Enable Archive Override

1. Go to Product Tables → Settings in your WordPress dashboard.
2. Open Show Product Table On Shop Pages.
3. Set Replace product grids on archive pages to On.
4. Select your table under Default override table.
5. Save the settings.

Your selected table will now replace the WooCommerce product grid across the supported product archive pages.

Use different tables on specific pages

The Default override table is used unless you select a different table for a particular archive.

You can choose separate tables for the shop and search pages, or expand the category, attribute, tag and brand sections to configure more specific overrides.

You do not need to create a separate table for every category. The plugin automatically loads the products belonging to the current archive page.

Using Elementor, Divi, Bricks or another theme builder?

If a theme builder controls your WooCommerce archive template, place the following shortcode where the products should appear:

[wcpt_archive_table]

Remove the theme builder’s existing product grid from the template. The shortcode will display the table selected in the Archive Override settings.

For a step-by-step example please refer to this guide for Elementor PRO archive override.

Using the ‘Select Variation’ element in the product table you can give your shoppers the option to select specific variations when purchasing a variable product, right inside the table. There are 3 different ways the product variation options can be displayed and you can choose the display type you require for your table:

1. Dropdown with all the product variations listed as options
2. Radio buttons for each of the possible variations
3. Single radio button for each variation, manually created to be placed in separate columns

Special Note: If you want to show all the variation attribute dropdowns separately like you see on the variable product page then add the ‘Cart Form’ element in your table. On the other hand the Select Variation element described in this doc provides a single dropdown with variation attribute combined for each variation option. For example if you have a variable product with 2 variation attributes – color and size then the woocommerce product page will show 2 variation attribute dropdowns to select the variation you want. You can use the ‘Cart Form’ element to print these in the table as well. Whereas the ‘Select Variation’ element is going to print a single dropdown where each option is a variation with all attribute values listed for that variation. In many cases this combined variation dropdown will look neater. But in some cases users may prefer to print the variation dropdowns separately with the ‘Cart Form’ element.

If you have any difficulty in following along with this tutorial or are unable to achieve the final results you require, please contact me via the support form and I will assist you asap with your requirements. 

1. Variations as ‘Dropdown’

 Select the ‘Display type’ to be ‘Dropdown with all variations’

You can modify the variation labels with 3 facilities –

1. Hide/shop attributes in the name. Eg:
   A. (attribute names displayed) Color: Red, Size: Small
   B. (attribute names hidden) Red, Small
2. Change the separator between attribute name and terms to any valid character. Eg:
   A. (using : ) Color: Red, Size: Small
   B. (using :: ) Color :: Red, Size :: Small
   C. (using – ) Color – Red, Size – Small, etc
3. Change the separator between attributes to any valid character. Eg:
   A. (using /) Color: Red / Size: Small
   B. (using ,) Color: Red, Size: Small
   C. (using ||) Color: Red || Size: Small

2. Variations as ‘Radio buttons’

Note: Normally the radio buttons will attempt to display horizontally. However, you can give the column a fixed narrow width to force the options to display in a vertical column as above.

3. Single variation as radio button

The following steps are illustrated in the screenshots below. Please follow along the highlighted sequence of steps in the screenshot.

1. Each ‘Select variation’ element is going to represent a single variation. Give this variation a name. For example ‘Small’. This name will be used by the table editor to represent this variation in the editor > column. 
2. Select the attributes and terms to that are part of this variation. The plugin will look through the product variations and find the closest match to these attribute – terms.
3. Use the ‘Add another’ button to add more attribute – terms to the list of properties of the variation if required.
4. A default template for the element is auto-created. You can modify this template to include images, icons, remove the name, etc. However keep in mind the ‘Select’ element must remain somewhere in the template to ensure the variation is selectable. This select element creates the radio button.

 

Here’s an example of using the single radio button facility:

In the example below the column 2 in the table is made to show a product variation with Serving size (attribute): Small (term).