The ToolTip element offers excellent potential to improve your table presentation! This doc includes element introduction, benefits, style tips and special notes.
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.
Simple setup guide to replace the default Elementor shop page product grid with a WCPT PRO custom product table. Works with any WordPress page builder plugin.
Introduction
A step-by-step guide to replace the default woocommerce product grid displayed on the Elementor shop page with a custom woocommerce product table. This same guide also works for the product search, product category, product attribute and product tag archive pages.
Time required: 2 mins ⏱️ Difficulty: Beginner 😊
Universal theme builder guide
This article focuses on working with the Elementor PRO theme builder plugin. But you can use the same steps from this guide to place product tables on any other theme builder plugin as well for example Divi theme builder, Beaver Builder, Visual Composer, Oxygen, Bricks, etc.
Steps to replace product grid with table
1. Using your Elementor PRO theme builder plugin first create a template you wish to use on your product archive pages like shop, category, etc. Then use the display condition options for the template to assign it to product archive pages. Test if this template correctly appears on your product archive pages by visiting your shop page.
2. Install WooCommerce Product Table PRO on your site and create a product table that you would like to show on product archive pages. Then go to wp admin > product tables > archive override > and assign this product table to the shop page.
3. Now open the woocommerce shop page template in Elementor to edit it. You should see a screen like this:
4. Delete the product grid element section from your template.
5. Now in the elements menu search for the Text or Shortcode element. Then drag and drop it into your template at the same place where the product grid element was placed earlier.
6. In the settings of the Text element enter [wcpt_archive_table]. This special shortcode will allow the correct product table to be inserted into your template depending on the current archive page. It will print the product table you have assigned in wp admin > product tables > settings > archive override.
If you have completed the above steps, you will have the product table showing up on your Elementor shop page. But in case you have any difficulty following this guide, please contact support for a prompt resolution.
If you have any kind of downloadable files attached to your product tables you can provide buttons in your product table to allow shoppers to download these files. Works for all file types — .zip .pdf .mp3 etc.
Using WooCommerce Product Table PRO you can easily create download buttons in your table giving users the option to download files related to the product. You can provide any file type for download such as a PDF brochure / mp3 audio preview / mp4 video trailer / software zip file.
You can provide multiple download buttons in the same table row. Therefore you can provide download links for different files associated with the product, such as different versions of the audio track.
Create download button
First, for each product you need to create a custom field with the same name like download-1 and provide the download URL in the value of that custom field.
If your site has ACF installed the custom fields section might not appear. In that case just create a text field (not URL field) using ACF.
Once you have created the custom field for a few Create a button element in your columns and use the following settings:
Externally hosted files
If your file is being hosted from another domain, then it is not always possible to use this method to provide a download. Due to the CORS specification, most browsers will not allow this.
However, a workaround exists for 2 very popular hosting choices:
Google drive
Please check the guide here and follow the steps to generate download links for your google drive files.
Dropbox
Please check this guide to create a direct download link for your dropbox hosted files.
The table editor UI provides granular and intuitive control over the design of your table elements. Here we cover some tips and tricks for special cases to ensure you have complete control over the table styling.
WooCommerce Product Table PRO 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.
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:
Add a Cart Form element to one of your columns
In the settings of this cart form element, in Additional CSS Class add: wcpt-only-attributes
Now in the table settings > Style > CSS, enter the following code:
You can create a separate table to show the variations of a variable product — one variation per row. This makes it easy for shoppers to find the variations they want. You can also automatically place the variation table on variable product pages.
With the ‘variation table’ facility of WooCommerce Product Table PRO you can easily create product variation tables that shows an individual product variation in each row of the table.
You can also automatically insert your variation tables on variable product pages making it easier for shoppers to find and purchase the product variation they want.
This doc will explain in detail how to use this ‘variation table’ facility. Please keep in mind that a variation table can only show product variations and it cannot mix other product types—simple, grouped, variable, affiliate—in the same table.
Your product variation table can be of any size — it can contains 100s of product variations if required and support filtering and pagination as well.
It also support full product table navigation features to help users search and filter the variations making it simpler to find the variations they want.
You can fully customize the design and layout of your product variation table using all the advanced editor features of the product table plugin.
Step-by-step video guide for the WooCommerce Product Table PRO variation table facility
Example of a WooCommerce variation table. Click on image to go to the demo and try it.
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.
Creating a variation table
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 the ID of the parent variable product whose child variations you wish to show in this table..
In the above example replace id value with table ID and ids value with the variable product’s ID. You can also use skus in the shortcode in similar way.
Or in the table’s settings → Query tab → scroll down to the ‘Variation Table’ section → check the option ‘Enable variation table’:
Show WooCommerce product variation table on the variable product page
Go to wp admin → product tables → settings → variation table override → Here you can set rules for which variation tables are supposed to appear on which variable product pages based on category. The plugin will automatically show the right variations depending on the variable product page.
You can decide where to place the variation table on the variable product page, next to product summary, above product tabs or even create a new product tab for your variations.
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:
You can create a variation table with attribute columns suiting all your products then add hide_empty_columns="true" in the shortcode and the table will automatically show relevant columns and hide the ones that are not related to the variations currently displayed in it.
Show WooCommerce product variation table in theme 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. WooCommerce Product Table PRO will automatically detect the current product and display its variations in the table.
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’:
To show custom order for your products in the woocommerce variation table, use these ordering settings.
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.
Your WooCommerce variation product table can show the variations in the same order as the backend.
Save time and effort by creating fewer tables for your site — (1) modify product query through the shortcode options (2) create a master table and toggle its columns through the shortcode. And discover other features controlled only by shortcode options.
WooCommerce Product Table PRO provides a long list of shortcode options (aka shortcode attributes) that can be viewed in the table editor. Here is a screenshot to show you where you can find the shortcode options in your product table editor:
These shortcode options are highly useful for the following reasons:
Save a lot of time and effort — You reduce the number of new product tables you need to create for your site using these shortcode based facilities:
Modify the product query — You can print out different sets of products from the same product table layout you’ve created simply by changing the shortcode option each time you place it on a page (see example).
Create a template table — add all the columns you need for different product types in a single table and then using the shortcode options decide which columns should be hidden or displayed based on the current products (see example).
Access additional powerful facilities —some of the table features are only available via the shortcode attributes (see example).
Example of modifying the product query using shortcode options
You can change the category of the products displayed by the table by modifying the category=”*slug*” option in the shortcode. You can find information on the category shortcode option here:
Let’s say you need to show 3 product tables on your shop, each displaying a list of products from a unique category — clothes, shoes, accessories.
In this case, you don’t need to create 3 separate product tables. Instead, create only one product table with no category selected in its query settings.
[product_table id="123"]
Now to print product tables showing the different categories you can simply re-use this shortcode with the category shortcode options modified like this:
[product_table id="123" category="clothes"]
[product_table id="123" category="shoes"]
[product_table id="123" category="accessories"]
And now you have printed 3 product tables showing different sets of products while you only needed to create one product table in the backend.
In the same way, to display a set of products based on their IDs you could use this shortcode option:
[product_table id="123" ids="111, 222, 333"]
Note: Some shortcode attributes (like the following ones) are marked PRO and are available only in the premium version of the plugin.
Show products with specific attribute terms:
[product_table id=”123″ attribute=”color: red, green | size: small”]
Example of creating a template table and showing different columns based on shortcode options
Lets say we have created a single product table for displaying our shop’s products — clothes, books, toys. But we need a different set of columns to be printed for each product table.
We create a single product table with the columns — product image, product name, color, author, maker, add to cart button. Here is our ‘master’ product table shortcode:
[product_table id="123"]
But here’s the catch — the attribute ‘color’ needs to be printed only if the product table is showing ‘clothes’, while the attribute ‘author’ belongs to the table showing ‘books’, and attribute ‘maker’ goes with ‘toys’.
Like we mentioned before, we can use the category shortcode option to re-use this table layout to print 3 different product tables, each displaying products from a separate category:
But in each of these product tables there will be empty columns. Since our products belonging to ‘clothes’ category have no attributes terms for ‘author’ and ‘maker’, the first table will have two empty columns belonging to these attributes. Similarly the ‘books’ product table will have empty columns for ‘color’ and ‘maker. While the ‘toys’ table has empty ‘color’ and ‘author’ columns.
We can make out product table automatically hide empty columns using a shortcode option included in the plugin:
Now our new product table shortcodes look like this:
When our product tables are printed, the empty column is hidden for each product table. So now we have created 3 product tables, each displaying a different category of products and each with a different set of columns specific to the product category.
Therefore we have essentially created a ‘master table’ and we can show different versions of this table on different pages via modified shortcode options.
While this facility automatically hides empty columns in the table, the plugin also provides an option to manually decide which columns should be hidden from the table while printing it:
Now we have even more control over how much we can transform our ‘master table’ while printing different versions of it at different places on our site.
Note on ‘Conditions’ facility
The product table plugin provides you even more granular control — applying conditions on individual elements in the table template to decide whether they will be printed or not depending on the nature of the product and other criteria.
Example of application of this facility:
Hide the add to cart and price element from non-logged in visitors.
Print special notices, tooltips, or icons depending on whether product has specific category or attribute terms.
Using the powerful search customization options in the plugin you can make it much easier for shoppers to find products they want. Add keyword weightage rules, global search widget and more.
The plugin’s PRO version 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.
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="search" 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:
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 this facility you can transfer your tables and global settings from your staging site to your production site or carry your carefully crafted tables to your next project.
With the import / export facility you can easily migrate all your product tables and settings between sites in just a minute.
Note: For this feature to work correctly the category, attribute, tag and taxonomy slugs need to be the same on the import site as the export site. For example if the export site has a category called ‘Clothing’ with the slug ‘clothing’ then the import site’s ‘Clothing’ category must also have the same slug ‘clothing’.
Product tables import / export
Use this facility to migrate your product tables. The proper sequence during migration should be:
Backup site database
Migrate products
Migrate product tables
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:
Before migrating plugin settings, please migrate products and tables first, otherwise archive override settings will be migrated. See the above section for more information.
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.
Make your product tables much easier to grasp at a glance and visually appealing with the ability to show your category and attribute terms with icons, images, tooltips and altered text. Simple way to vastly improve your tables!
The product table plugin lets you relabel category, attribute and taxonomy terms to different text, image, icon, in the tables through the ‘Custom term labels’ facility. This vastly helps improve the presentation of your product table —making it easer to grasp at a glance and more visually appealing.
Please keep in mind the ‘custom term relabel’ facility described has certain limitations:
Only upto 30 terms can be re-labeled in a table.
The re-labelling needs to be repeated for each table.
For a better experience you can use the Global term relabels addon that helps you relabel as many terms as you want and across all your tables from a single location.
The rest of this documentation below will help you relabel your product attributes in the table using the plugin’s ‘custom term relabel’ facility. But if you are interested in the above mentioned 2 benefits then you can check out the global term relabel addon instead.
Open the ‘Custom term labels’ panel in the element settings and modify the text element of any term you wish to relabel.
How to relabel term as ‘Image’
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
How to relabel term as ‘Icon’
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.
Add sorting icons in your product table column headings to allow shoppers sort the products in the table by clicking them. Products can be sorted based on any product property — making it easy for shoppers to compared and find products they want.
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.
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’.
