Import / Export

With the import / export facility you can easily migrate all your WCPT PRO tables and settings between sites in just a minute.

Product tables import / export

Use this facility to migrate your product tables. The proper sequence during migration should be:

  1. Backup site database
  2. Migrate products
  3. Migrate product tables
  4. Migrate settings

Explanation for sequence: When you import WooCommerce products in the new site, the necessary taxonomies and terms are imported as well. This ensure that when the tables are imported, the required taxonomies and terms are already present on the site. The import facility is then able to correctly replace the taxonomies and terms in the imported tables’ settings and map them to the new site’s taxonomies and terms. Later, when you import setting, since tables have already been imported, the import facility is able to map the correct tables in the archive override facility. If the tables were not imported earlier, the import facility will not be able to maintain the archive override settings.

Plugin settings import / export

Use this facility to migrate the plugin settings. Please note:

  1. Before migrating plugin settings, please migrate products and tables first, otherwise archive override settings will be migrated. See the above section for more information.
  2. License key is never included in the export data. Therefore, you need to manually deactivate the license key from the previous site and then activate it on the new site.

Stuck? Get assistance!

In case you have any issues in using this facility, please feel free to contact support here

Re-label terms

WCPT PRO lets you relabel category, attribute and taxonomy terms to different text, image, icon, in the tables through the ‘Custom term labels’ facility.

Text relabel

Open the ‘Custom term labels’ panel in the element settings and modify the text element of any term you wish to relabel.

Image relabel

Open the ‘Custom term labels’ section and locate a term you wish to relabel. Delete its default text element, and add a ‘Media Image’ element instead. Create the image    

Icon relabel

The process is similar to Image relabel, except the text element is replaced with an Icon element here. 

To add a custom SVG icon you an use the HTML element instead.  

If you have an image icon you can use the Media Image element instead. Please remember to use the Width option of the Media Image element to give the image a custom width in the table.

Limitations

  • The relabeling can only be done for the first 50 terms listed in alphabetical order.
  • The relabeling has to be done for each table. So if you have several tables it can involve more work.

Sorting by column heading

Columns can be sorting by their heading using the ‘Sorting’ element.

To do this, add a sorting element to any 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’.

Audio shop quick guide

  • Neatly display BPM, Mood, Genre, etc
  • Fix audio player width for preview
  • Use WCPT PRO for additional filters

This is a quick guide to help you get started with an audio shop catalog. Please see the plugin tutorials for detailed instructions. And feel free to ask questions via the support form.

Important notes and gotchas

Audio preview

Using Excerpt element:
You can provide a preview for your tracks in the table with a few simple steps. Begin by using the short description field of the product to add an audio embed. Make sure there is no extra space above or below the track. otherwise it will spoil the alignment in the table.

Now use the excerpt element in a table column. When you view the table, at first the audio player may appear to have strange width issue. This is a known problem with the wordpress audio player in certain conditions. But it can be easily fixed by giving a width to the Excerpt element eg: 300px. Now the audio player will take on the same width as the Excerpt element.

Using Custom Field element [PRO]:
You may not wish to use the product excerpt to display your audio track preview. Perhaps you wish to add other information in the excerpt or you simply wish to have the flexibility to place the preview in a separate element to position it in a particular way.

In this case, place the audio embed code in a custom field of the product. You can read more about using custom fields here, and wordpress audio embed shortcode here.

and in the table use a custom field element. ‘Display custom field value as’ to ‘HTML’. This will parse the embedded audio shortcode as well.

Again, you must give a width to the custom field element to fix the wordpress audio player width.

Overall table style

In the table editor open the ‘Style’ tab. From here, you can control many general style settings for the table. These settings can be further customized per column or element. But it is best to start from the Laptop style panel to save effort of going to each element and repeating styles. Also you can control the width of the container from Laptop style > Container > Max-width.

BPM, Genre and other properties

You can display as many other properties of the tracks as you require. This may include Mood, Song length, License type, etc. In this example BPM is being set through a custom field and genre through an attribute.

Please view the tutorial series of the plugin on how to setup elements like custom field, attributes, navigation and customize the table’s response layout as per your choice.

If you get stuck anywhere or have questions on how to get specific results, please reach out via the support form.

Show product table on woocommerce shop page

You can replace the default product grid on the shop, search, category, attribute and tag pages with a product table. You can also assigns specific product tables to specific pages.

Time required: 2 – 5 mins
Difficulty: Beginner

No coding required. Only file copy paste. Absolutely anyone can follow along this simple guide. In case you have any difficulty, contact support with your theme.

Facility features

  • You can replace the product grid on archive pages with product tables. WooCommerce product archive pages are – shop, search, category, attribute and tag.
  • You can even assign different product tables to different category pages if you require some categories to have unique table layout.
  • Or you can simply select one default table across all archive pages. You don’t have to create new product tables. The plugin will automatically show correct products according the archive page where the table is printed.
  • You can also leave the default product grid on specific archive pages if you wish.

Configure ‘Archive Override’ settings

With WooCommerce Product Table PRO installed on your site, go to wp admin > product tables > settings > Archive Override. Here you can conveniently assign product tables to your product archive pages such as shop, search and category. To enable this facility you need to use the instructions in ‘Required copy / paste steps’ section below.

Note for page builder like Elementor, Divi or Beaver Builder

If you are using a theme builder plugin like Elementor PRO or Beaver Builder to create your archive pages like shop / category, then you need to follow this guide instead.

In case the following instructions do not work on your current theme, please contact support with your theme name to get a prompt solution.

Theme file copy / paste

Find your theme in the list below and follow the file copy / paste instructions. If your theme is not on the list simply use the general methods provided below this list.

Theme specific file:

General methods for other themes:

These general methods work on almost all other themes. So simply try them on your theme. If you have any difficulty with this contact support for assistance with your theme.

General method 1:

In your child theme folder, create a new folder called ‘woocommerce’ and paste this archive-product.php file there. If an archive-product.php file already exists in the folder, rename it to archive-product.original.php in case you need it later.

In case this method does not work, please try method 2 below which works better for some themes.

General method 2:

Paste the archive-product.php file in your child theme root folder. Do not create any woocommerce folder, unlike the previous method. If an archive-product.php file already exists in the folder, rename it to archive-product.original.php in case you need it later.


After you are done with method 1 / method 2, we need to choose a table for your shop page. Go to WP Dashboard > Product Tables > Settings > ‘Archive Override’. Then, select a table for ‘Shop override table’ and save your settings.

Now when you open your shop / archive pages such as product category / product attribute term, the products should appear in the selected WCPT table instead of the default grid.

That’s all! 😊


— Following are theme specific instructions —

StoreFront

In your child theme create a woocommerce folder and in it paste this archive-product.php file.

Flatsome theme

Do not copy over the archive-product.php file for flatsome! Leave it as it is.

Instead, in your flatsome-child theme create a new folder called ‘woocommerce’, then a subfolder inside it called ‘layouts’. Now paste the following 4 files in ‘woocommerce > layouts’:

X theme

In your X child theme create a new folder called ‘framework’, then a subfolder in it called ‘views’, then 4 subfolders in it with the name of each X theme stack: ‘ethos’, ‘icon’, ‘integrity’ and ‘renew’. Now paste the corresponding file in each of these subfolders:

Uncode theme

In your Uncode child theme create a new folder called ‘woocommerce’, then paste the following files it:

Bridge theme

In your child theme paste this woocommerce.php file.

Motors theme

In your child theme paste this woocommerce.php file.

TheGem theme

In your child them paste this woocommerce.php file.

Total theme

In your child them paste this woocommerce.php file.

AccessPress Store theme

In your child theme go to the woocommerce folder, or create one if it does not exist, then paste this archive-product.php file in it.

ShoppingCart theme

In your child theme paste this woocommerce.php file.

Roseta theme

In your child theme paste this woocommerce.php file.

Harrier theme

In your child theme paste this woocommerce-page.php file.

XStore theme

In your child theme create a woocommerce folder and in it paste this archive-product.php file.

Also, to hide the ‘View switcher’ and ‘Products per page’ options above the archive table, please use this CSS:

.products-per-page,
.view-switcher  {
  display: none !important;
}

Customize Premium

In your child theme paste this woocommerce.php file.

WoodMart

In your child theme create a woocommerce folder and paste this archive-override.php file.

Virtue

In your child theme create a woocommerce folder and paste this archive-override.php file.

Almaira

In your child theme paste this woocommerce.php file.

Unicon

In your child theme paste this woocommerce.php file.

Butcher

In your child theme create a woocommerce folder and add this file inside it.

Riode

In your child theme create a woocommerce folder and add this file inside it.

My Listing

In your child theme paste this woocommerce.php file.

Lafka

In your child theme create woocommerce folder and in it paste this archive-product.php file.

Colibri

In your child theme add these two files: woocommerce.php and WCPT_WooContent.php

Or with your Colibri theme already installed on your site, simply install this Colibri child theme with the necessary files already in it.

Astra

In your child theme add this archive-product.php file.

Select variation

Using this element you can give your site visitors 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: Please keep in mind, you can also use the product table’s ‘Cart Form’ element which will simply display the ‘add to cart’ form that normally appears on the product page, inside the table itself.

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. Dropdown – how to use

 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. Radio buttons – how to use

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 radio button – how to use

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.

 

Single radio button – usage example

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

WooCommerce product list table

A hybrid between a pure table and list view, the WooCommerce product list table is a great way to organize products in your shop. While WooCommerce does have an easy shortcode for creating simple product lists, unfortunately it significantly lacks power. Web shops need a tool to easily create and manage multiple product lists across their site with functionality such as search, sort, pagination, filter and responsive control.

This is why the WooCommerce Product Table plugin was created. Using this neat tool you can easily create you beautiful and responsive WooCommerce product list view in no time. You can list products by category, IDs, SKU, etc. And it comes replete with all the functionality for creating a great product catalog. What’s more? This is a free plugin!

At first WCPT may seem mainly table oriented. But check out the plugin demos and you will find it can be used as an excellent WooCommerce product list plugin as well. 

Easily create WooCommerce product list table
WooCommerce product list table – narrow lists
WooCommerce product list view for a restaurant menu
 Easily create WooCommerce product list view for a restaurant menu
WooCommerce Product Table Reponsive
WooCommerce product list table – fully responsive

You should create a WooCommerce product list view when:

  1. The shop products need to be easily compared by a specific column such as movie rating, price, width, etc. Visually tracking a column to make comparisons between products is much easier than tracking the field in a grid.
  2. You need to provide a sizeable amount of information for each product. This may be required because the products need some context which will not be possible without the additional information. In such a case product list shines as compared to grid / pure table. 
  3. You need your products to be neatly presented in a narrow space such as the sidebar or a footer column. Product lists fit perfectly in such tight spaces.

Conclusion

Now you don’t need to worry about creating an excellent WooCommerce product list table for your site anymore. While this is not a default WooCommerce functionality, WooCommerce product table plugin perfectly fills the gap and makes it easy to create a WooCommerce product list view. So download the free plugin and start increasing your shop sales now!

WooCommerce display products in table

For some web shops, the product catalog looks best in a table view.  A product list or grid view will simply not work as well. But the problem is that while WooCommerce does have convenient shortcodes for product grid and product list view, unfortunately there is no shortcode to make WooCommerce display products in table.

This is why the  WooCommerce Product Table plugin was created. With this plugin you can easily make WooCommerce show products in tables. It is free and it does not require any coding knowledge. Now anyone can conveniently create simple or complex product table structure, with features such as search, sorting, pagination and styling.

WooCommerce Product Table PRO
WooCommerce Product Table Pro brings you powerful features to create fantastic product tables that convert.
Create tables of any shape and size. Control functionality and styling to create the exact  product table you need for the job.

WooCommerce Product Table Reponsive
Great responsive features to achieve the perfect look on small screen devices as well. Create a seamless experience for conversion on mobile as well.

When to make WooCommerce show products in table?

1. As the main product catalog

For some shops it makes sense to only use table view for their product catalog and drop any grid or list view from their website entirely. This is especially true when:

  1. Product images are not the main focus in the product catalog. Such as, in the case of books, music, machine parts, software, common food items, etc 
  2. Shoppers are mainly interested in comparing products along certain columns. Such as numeric attributes, rating, etc.

2. As a supplementary product view

For other shops a product table view can be a great supplement to their existing product grid/list view. It would give their shoppers the additional facility of exploring their products in a table view as well, which makes sorting and visually comparing products along columns much easier.

Conclusion

If you have been stuck without a great table view for your product catalog you do not need to worry any more. Can WooCommerce display products in table on its own? No. But is there an easy solution for this? Yes! With the WooCommerce Product Table plugin you can conveniently manage multiple product tables across your website and maximize your opportunity for conversion. You should try it today!

4. Navigation UI

  • Customize navigation elements
  • Create a left navigation sidebar
  • Responsive navigation for phones

Aim: Create a smart navigation system for your table. Learn how to add navigation elements above and to the left of the table. Also make the navigation fully responsiveness so that it is convenient to use on phones as well.

WooCommerce Product Table tutorial 4

Header & Left sidebar

Sort By filter

Category filter

Price filter

Clear Filters

Dropdown width

Responsive navigation