Author: wordpressaholic

WCPT provides you styling options at various levels to ensure you can highly customize your table’s style as per your needs.

For general styling purposes please use the product table > Style tab and apply styles from there. You can apply styles that specifically target Laptop, Tablet or Phone size devices.

In order to style individual columns go to the Column > Cell template > Design section and apply your column specific styles there.

 Likewise you can apply unique styling to specific elements as well via the element’s settings > Style for element.   

Column width

You can give each columns a fixed width. For example, if you want to give the columns width 20%, 40% 20%, 20% (total should be 100%) then you need to go to the design settings for each column and give it the percentage width. 

If you are manually setting widths for each column in this manner please take note of responsive view of your table. If you do not have tablet / phone specific columns setup then the custom widths will be applied to the columns on narrowers screens as well.

Column text align

To set the text align for the table heading and cells from a central place try the table settings > Style > Laptop style > Headings | Cells > Text align.

If you need to set different text align for individual columns you can do that from the Style settings of the individual columns.

Columns cells vertical align

You can decide how the content in adjacent cells align with each other through the vertical align property.

Force overrides

Sometimes themes apply aggressive styling that can override the styling set through WCPT. The common case is setting font color and size for cells. Please use:

.wcpt-heading {
  font-size: 18px !important;
  font-color: black !important;
} 

.wcpt-cell {
  font-size: 16px !important;
  font-color: black !important;
} 

Change the color and font size to what you need. For further assistance please contact support.

Table heading

.wcpt-heading {
    color: #000 !important; 
    padding: 15px 5px !important;
    font-size: 16px !important;
}
@media(max-width: 1099px){ /* Tablet style */
    .wcpt-heading {
        color: #000 !important; 
        padding: 15px 5px !important;
        font-size: 16px !important;
    }
}
@media(max-width: 800px){ /* Phone style */
    .wcpt-heading {
        color: #000 !important; 
        padding: 15px 5px !important;
        font-size: 16px !important;
    }   
}

Navigation (above table)

Header navigation section sample CSS:

.wcpt-header {
    padding: 10px 15px;
    background: white;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
}

Filter dropdown text styline  sample CSS:

.wcpt-filter .wcpt-dropdown-option {
  font-family: Tahoma !important;
  font-size: 16px !important;
  color: black !important;
}

.wcpt-filter .wcpt-filter-heading {
  font-family: Tahoma !important;
  font-size: 16px !important;
  color: black !important;
}

Product addons – only show short text field

If you have a ‘short text’ product add field attached to your products and wish to display it in your tables you need to follow the following steps:

1. Add a Cart Form element to one of your columns
2. In the settings of this cart form element, in Additional CSS Class add: wcpt-product-addons-only-short-text-field
3. Now in the table settings > Style > CSS, enter the following code:

.wcpt-product-addons-only-short-text-field {
  vertical-align: middle !important;
}

.wcpt-product-addons-only-short-text-field > *:not(form),
.wcpt-product-addons-only-short-text-field > form > *:not(.wc-pao-addon),
.wcpt-product-addons-only-short-text-field > form .wc-pao-addon label {
  display: none !important;
}

.wcpt-product-addons-only-short-text-field > form .wc-pao-addon,
.wcpt-product-addons-only-short-text-field .wc-pao-addon-wrap {
  padding: 0 !important;
  margin: 0 !important;    
}

Cart form – only show attribute dropdowns (and price)

If you need to show your attribute dropdowns in a column and do not wish to show other elements like price or add to cart in that column you can follow this guide:

1. Add a Cart Form element to one of your columns
2. In the settings of this cart form element, in Additional CSS Class add: wcpt-only-attributes
3. Now in the table settings > Style > CSS, enter the following code:

.wcpt-only-attributes {
  vertical-align: middle !important;
}

.wcpt-only-attributes  > *:not(form),
.wcpt-only-attributes  > form > *:not(.variations):not(.single_variation_wrap),
.wcpt-only-attributes  > form .single_variation > *:not(.woocommerce-variation-price),
.wcpt-only-attributes .woocommerce-variation-add-to-cart {
  display: none !important;
}

.wcpt-only-attributes > form,
.wcpt-only-attributes > form .variations {
  margin:0 !important;
}

.wcpt-only-attributes .woocommerce-Price-amount {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #66a918 !important;
}

If you need to hide the price as well, please use:

.wcpt-only-attributes .woocommerce-Price-amount,
.wcpt-only-attributes .single_variation_wrap {
  display: none !important;
}

Global search shortcode

/* Height */
.wcpt-global-search__form,
.wcpt-global-search__category-selector-facade,
.wcpt-global-search__category-selector-facade,
.wcpt-global-search__submit-wrapper {
line-height: 56px !important;
height: 56px !important;
}

/* Input Field */
.wcpt-global-search__keyword-input {
border-color: #CDDC39 !important;
font-size: 16px !important;
}

.wcpt-global-search__keyword-input:focus {
border-color: #AFB42B !important;
}

/* Dropdown */

/* -- background */
.wcpt-global-search__category-selector-wrapper {
background: #CDDC39 !important;
font-size: 16px !important;
}

.wcpt-global-search__category-selector-wrapper:hover {
background: #AFB42B !important;
}

/* -- text */
.wcpt-global-search__category-selector-facade {
color: rgba(0, 0, 0, 0.75);
font-size: 15px;
}

/* Submit Button */

/* -- background */
.wcpt-global-search__submit {
background: #CDDC39 !important;
}

.wcpt-global-search__submit:hover {
background: #AFB42B !important;
}

/* -- icon */
.wcpt-global-search__submit-icon {
color: rgba(0, 0, 0, 0.75);
stroke-width: 3px;
}

/* -- text */
.wcpt-global-search__submit-text {
font-size: 15px;
color: rgba(0, 0, 0, 0.75);
}

You can easily create a product variation table for any woocommerce variable product on your site. This doc will explain all the necessary steps in detail to create your own custom woocommerce variation table. WooCommerce Product Table PRO is the most flexible solution to create product tables for your site and this includes woocommerce variation tables as well!

WooCommerce variation product table demo

Please see a demo woocommerce product variation table here. Reference image below:

Using the variations table you can make it much simpler for your customer to find and purchase the product variation that they need. It offers a far better user experience than the default WooCommerce attribute dropdowns which can be confusing and difficult to use.

Important notes on the variation table facility

• This table will show product variations in separate rows
• The table will only show product variations, it will not show other product types such as variable and simple products.
• You can customize the look and elements of your variation table using WCPT PRO product table editing facilities.

Variation tables can be of any size, they can contains 100s of products if required and support filtering and pagination as well.

To create a product variations table simply create a product table using the product table editor and in the shortcode add the product_variations=”true” attribute and ids= “111” where 111 is ID of the variable product.

[product_table id="123" ids="111" product_variations="true"]

In the above example replace id value with table ID and ids value with the variable product’s ID. 

Custom ordering for your WooCommerce product variations

You can give your product variations table sorting instructions by going to the table’s settings > Query > Initial orderby. If you need to give your product variations a special custom order then please see the below reference screenshot and set Initial orderby to ‘Menu order’ and Initial order to ‘Ascending’:

In the backend on the variable product’s settings page > ‘Product data’ section > Variations > you can drag and drop the variations to give them the order you want. With the above ordering settings in place, the product table will show the variations in the same order as the order you have given them in the backend.

Show WooCommerce product variation table on the variable product page

You can place the shortcode in the description or short description of a product to make the table appear on its product page. In this case you do not need to enter the ‘ids’ shortcode attribute as the shortcode will automatically use the current product id if ids is left empty. 

So, writing :

[product_table id="123" product_variations="true"] 

will be enough in the product description. You do not need to enter ids=”111″ as the plugin will automatically add it.

If you do not want to type in the shortcode on every variable product page, but you need the variations table to show up on all those pages, you can add the shortcode via PHP. This is not part of the plugin facilities however and can be achieved via a custom work request. 

Select a group of product variations for your table based on their SKUs

If you need to add variations to your product table based on their SKU, then use the shortcode option variation_skus=”sku1, sku2″. Enter the variations separated by comma. Please see an example shortcode below:

[product_table id="123" product_variations="true" variation_skus="sku1, sku2"]

Add your WooCommerce product variation table to product pages via PHP

If you wish to automatically place your new product variations table on all the variable product pages then you can use this solution. The variation product table will automatically show the products belonging to the parent variable product on that page.

Add the following to your child theme’s functions.php file to add variation table in the product description (in the shortcode replace id=”122″ with your table id):

// wcpt custom: adds variation table in product main description
add_filter('the_content', 'wcpt__custom__variation_table__in_content');
function wcpt__custom__variation_table__in_content( $content ){
  global $product;

  if( 
    ! empty( $product ) &&
    function_exists('is_product') &&
    is_product() &&
    $product->get_type() === 'variable'
  ){
    $content = '[product_table id="122" product_variations="true"]' . $content;
  }

  return $content;
}

To add variation table before the product variation form on product pages, use this (in the shortcode replace id=”122″ with your table id):

// wcpt custom: adds variation table above product form
add_action('woocommerce_before_add_to_cart_form', 'wcpt__custom__variation_table__before_form' );
function wcpt__custom__variation_table__before_form(){
  global $product;

  if( 
    ! empty( $product ) &&
    function_exists('is_product') &&
    is_product() &&
    $product->get_type() === 'variable'
  ){
    echo do_shortcode( '[product_table id="122" product_variations="true"]' );
  }
}

To hide the default woocommerce ‘add to cart form’ from the variable product pages you can copy paste this CSS in your child theme’s style.css file:

.product .variations_form {
  display: none !important;
}

Only show relevant columns based on current product attributes

Solution 1:

[product_table id="123" product_variations="true" hide_empty_columns="true"] 

You can use the hide_empty_columns=”true” facility to hide the table columns which have no values in any of their cells. This is usually a good solution for hiding attribute columns where the cells contain no other content other than the attribute value. But if your column template outputs values even when there is no attribute term, then you need to use the next solution. This can be the case if your attribute element is configured to output a default value if there is no associated term, or if you are using multiple elements in the same column beside the attribute element. In these two cases even if the attribute has no value, there will be content in the column, so it will not be hidden.

Solution 2:

[product_table id="123" product_variations="true" laptop_attribute_columns="3: pa_color | 4: logo" phone_attribute_columns="2: pa_color | 5: logo"] 

You can use laptop_attribute_columns to connect columns with attributes. If a variable product does not have one of the attributes listed in laptop_attribute_columns then that attribute’s related column will be removed from the table.

This is very useful when you want to use the same product table on the product pages of different variable products that have different sets of attributes. One product may have attributes Color and Logo, whereas another has Size and Material. Normally you would need to create 2 separate product tables in this case to place on the product pages of these products.

Now you can create a single product table with 4 attribute columns Color, Logo, Size and Material, then use laptop_attribute_columns=”3: pa_color | 4: logo | 5: pa_size | 6: pa_material”

The Format for laptop_attribute_columns value is column number (1, 2, 3…) followed by “:” then the attribute slug. Each set of ‘column number: attribute slug’ is separated by the pound “|” sign so that you can list multiple columns.

So if you have the attributes Color, Size and Material attached to your products and in your table the 3rd columns is for Color, 4th columns for Size and 5th column for Material then you would enter laptop_attribute_columns=”3: pa_color | 4: pa_size | 5: pa_material”

The above shortcode attribute tells the plugin to hide the 3rd column if the product does not have Color attribute, 4th if it doesn’t have Size and 5th if it doesn’t have materia.

If you have a separate set of columns in your table settings for tablet and phone devices then you can fill out tablet_attribute_columns=”…” and phone_attribute_columns=”…” as well.

If in your responsive layout you have not separated the attributes into separate columns and have them in the same column, then you can instead set a condition directly on the element itself to only show it if the product has the relevant attribute. For this open the attribute element’s setting in your table settings, then open its Condition settings section and set an attribute condition.

The slug name for custom attributes is simple ‘Color’ turns into ‘color’. ‘Can Size’ turns into ‘can-size’. For global attributes you need to add ‘pa_’ at the beginning of the slug, so ‘Color’ becomes ‘pa_color’ and ‘Can size’ turns into ‘pa_can-size’ if these are global attributes.

Please feel free to write in to support if you have any trouble with this facility.

Show WooCommerce product variations table in Page Builder product template

Here we will cover how to automatically add the variation table to every single product page on your site that has a variable product with available variations while using a page builder / theme builder plugin.

You can use this method with Elementor, Divi, Visual Composer, Beaver Builder or any other popular page builder / theme builder plugin. In this specific example we are using Elementor. But the same method will work with other page builder / theme builder plugins as well.

In the Elementor product template create a Shortcode element. In this shortcode element enter the variation table shortcode but without the ids=”…” shortcode attribute. WCPT PRO will automatically detect the current product and display its variations in the table.

Using shortcode attributes included in WCPT you can save a lot of time and effort by modifying any shortcode’s query on the fly. For example:

If you want to reuse the same shortcode to show category clothing in one table and shoes in another table you can do this:

[product_table id=”123″ category=”Clothing”]

[product_table id=”123″ category=”Shoes”] 

To display only specific products, chosen by post ID, in a table:

[product_table id=”123″ ids=”111, 222, 333″]

As you can imagine, this saves a lot of work as you can create a table and then re-use it to display different results based on different queries that are generated using the shortcode attributes.

You can find the list of shortcode attributes next to the shortcode on any product table editor page.

Some shortcode attributes are marked PRO and are available in the premium version of the plugin WCPT PRO. 

Filter by tags: Just you the taxonomy shortcode attribute for this and target the product_tag taxonomy [product_table id=”123″ taxonomy=”product_tag: Tag 1, Tag 2″]

Filter by attribute: [product_table id=”123″ attribute=”Attribute 1: Term 1, Term 2 | Attribute 2: Term 3, Term 4″]

WCPT PRO offers a powerful search facility that is capable of using the keyword phrase entered by visitors and looking through product title, content, SKU, excerpt, category, attributes, custom fields and tags to yield comprehensive results. Moreover, using match weightage / relevance rules you can deliver more accurate search results.

Weightage rules 

You can find the weightage rules in WP Dashboard > Product Tables > Settings > Search > title rules, content rules, sku rules … etc  

• Phrase exact: Applies when the match between the keyword phrase and the product field is exact. Eg: when title and keyword phrase are both “Chocolate sundae”.
• Phrase like: Applies when the keyword phrase entered by user is contained within the field text. Eg: when keyword phrase is “Chocolate sundae” wherase the title is “Chocolate sundae ice-cream”.
• Keyword exact: Applies when one of the keywords in the search phrase exactly matches a word within the field text. Eg: when keyword phrase is “Chocolate sundae” and the word “Chocolate” in this matches in the title “Chocolate ice-cream”.
• Keyword like: Applies when one of the keywords in the search phrase is included within a word in the field text. Eg: when keyword phrase is “Choco treat” and the word “Choco” is a sub-word in the title “Chocolate ice-cream”.

In the case of attribute and custom field, you can set custom weightage for each term. This facility is very useful when, for example, you want to prioritize ‘genre’ matches over ‘artist’ matches for the keywords entered by user. In that case you would give the genere attribute higher match scores, therefore pushing up its results compared to artist attribute match results.

Using the checkbox next to any weightage rule you can outright disable the rule if you uncheck it.  

Search exact “keyword” only

Let us take an example where the search focuses on a custom field ‘manufacturing code’. In this case it may be necessary that the results for a keyword like ‘123’ only returns products with custom field ‘manufacturing code’ set to ‘123’ and not results for ‘1234’, ‘0123’ etc. 

To enable exact match, go to the global search settings > weightage rules > open the target where you want to search. In this example it is ‘custom fields’. Now disable all weightage rules for it except ‘Phrase exact’. Doing this instructs the plugin to only return products where the custom field value exactly matches the searched keyword.

 

You can do the same for any other search target areas as well where you only want exact matches – title, content, excerpt, SKU, custom field, attribute, category, tag. SKU example:

Resource usage / response speed

If you are searching through several product properties and have a large number of products on your site, your search results can end up taking a long time. To workaround this situation:

• Ensure memcache is enabled on your server. This helps cache repeated database searches, therefore speeding results and reducing resource usage.
• Only enable the fields that are most important. You may also want to consider combining different product properties into a single custom field dedicated for search, then target only that custom field for search.
• Consider switching to a web host that offers the requisite resources to support your heavier search requirements.

Global search shortcode

A special search shortcode is included in WCPT PRO that lets you create a search bar with a category dropdown. You can place this shortcode on your site outside your product table, anywhere that accepts shortcodes, such as text widget, or add it to your product templates via PHP.

[wcpt_search clear_redirect="home" redirect="search"]

Using the category dropdown your site visitor can select the category they wish to search within, or they may search through all categories at once. The search facility will redirect them to the category page that they have selected.

clear_redirect=”home” lets you decide which page to show when user clears search. Possible values –

• home : leads to homepage
• shop : leads to woocommerce shop page
• category : leads to current category page with the search cleared 

redirect=”shop” lets you decide on which page to show the search results. Possible values:

• search : leads to the product search page. This is the default option.
• category : takes visitor to the selected product category if they selected a product category in the search dropdown.

disable_category=”true” can be used to hide the category dropdown.

category_required=”true” can be used to make the category selection mandatory.

placeholder=”search” lets you set the placeholder text in the input box. For translations enter placeholder_*locale*=”Translation” where *locale* is the locale code like fr_FR for french, en_US for US region english, etc.

submit_label=”Submit” lets you set a text label for the submit button. For translations, use locale codes like: submit_label_fr_FR=”Submit”

all_label=”All” lets you change the label for ‘all categories’ option in the category dropdown. For translation, use locale codes like: all_label_fr_FR=”All”

exclude=”category-1, category-2″ will exclude categories from the dropdown.

include=”category-1, category-2″ will only show those categories in the dropdown. 

hide_search_icon=”true” will hide the search button icon.

width=”400px” sets a fixed width for the search box.

max_width=”800px” defines a limit for the possible width.

For styling the global search shortcode please see the Style Tips doc section “Global search shortcode”.

You can also add this shortcode directly via PHP to different parts of your site. You can copy paste the following examples in your child theme’s functions.php file:

Above archive page tables:

add_filter( 'wcpt_shortcode_attributes', 'wcpt_custom__search_bar_above_table' );
function wcpt_custom__search_bar_above_table($atts){
  if( ! empty( $atts['_archive'] ) && ! wp_doing_ajax() ){
    echo do_shortcode('[wcpt_search]');
  }
  return $atts;
}

Top of product archive pages:

add_action('woocommerce_before_main_content', 'wcpt_custom__search_bar_above_archive');
function wcpt_custom__search_bar_above_archive(){
  echo do_shortcode('[wcpt_search]');  
}

Live search / instant results / autocomplete

This feature is not part of WCPT PRO. However, you can use select 3rd party plugins that are compatible with WCPT PRO for live search. Please note:

• When using 3rd party plugin for search results, the search settings of WCPT PRO, including weightage rules will not take effect.
• The 3rd party plugin will affect the results only on the product search page of your site. You can replace the product grid on this page with product tables using the Archive override facility included in WCPT PRO.
• The 3rd party search elements cannot be used ‘inside’ the WCPT container, navigation area. They will remain outside at another location on the page, either in the widget area, or top of page depending on the 3rd party plugin facilities.

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. 

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.

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

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:

• Storefront: jump to section
• Flatsome: jump to section
• Avada:  jump to section
• X: jump to section 
• Uncode: jump to section 
• Bridge: jump to section 
• Motors: jump to section 
• TheGem: jump to section 
• Woodmart: jump to section
• BeTheme: jump to section
• Jupiter: download file
• Doyle: download file
• Total: jump to section
• AccessPress Store: jump to section
• ShoppingCart: jump to section
• Roseta: jump to section
• Harrier: jump to section
• XStore: jump to section
• Customize Premium: jump to section
• Virtue: jump to section
• Almaira: jump to section
• Unicon: jump to section
• Butcher: jump to section
• Riode: jump to section
• My Listing: jump to section
• Lafka: jump to section
• Colibri: jump to section
• Astra: jump to section
• Samatex: jump to section

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’:

• category-none.php
• category-off-canvas.php
• category-right-sidebar.php
• category.php

Avada theme

In your child theme folder copy paste this archive-product.php file.

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:

• Ethos: download file
• Icon: download file
• Integrity: download file
• Renew: download file  

Uncode theme

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

• archive-override.php
• taxonomy-product_cat.php

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.

BeTheme

In your child theme copy paste this template-shop-archive.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.

Samatex

In your child theme create a new folder called woocommerce. Then in that woocommerce folder copy paste this content-product-loop.php file.

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