ToolTip

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.

Elementor PRO template

Using WCPT PRO’s archive override facility to replace product grids with tables as well as an Elementor PRO template for product archives? Learn how to easily make the two work together.

Time required: 4 mins

Elementor PRO offers users the facility to create their own custom templates for their site. Some users may wish to use this facility to create custom templates for their product archive pages.

In case you are also using the Archive Override facility included in WCPT PRO you may face an issue with your product table not showing up on the custom product archive page created with Elementor PRO.

This issue occurs because their Elementor PRO template system overrides WCPT PRO’s archive override facility.

You can confirm this by temporarily deactivating Elementor PRO on your site. You will find that on product archive pages your product tables start appearing again when Elementor PRO is deactivated.  

Below, you will find instructions on how to resolve this conflict.

Before we being please note, this tutorial assumes you have already done the following two:

  1. Using Elementor PRO you have created a template with display condition to appear on Product Archive pages only. If you have a template to override all archives, not just product archives, then you need to first create a new template that only overrides Product Archives. The instructions in this tutorial are to be applied on this Product Archives template only.
  2. You need to configure your WCPT Archive Override facility to assign tables to different product archive pages. If you have not done this, product table will not appear on your archive pages even after you have followed the other instructions here.

Once you have ensured the above two requirements have been met, please follow these steps to resolve the conflict:

1. In Elementor, go to your product archive customization screen page. 

2.  Delete the ‘Archive Products’ section from your template.

3. In your Elementor panel > Elements section search for ‘Text’. The Text widget element will come up on the screen. Drag and drop it on your template, below the title (where the Archive Products element was placed earlier).

4. In the settings of the Text widget element enter [wcpt_elementor]. This special shortcode will print your product table on the page according to your settings in WP Admin > Product Tables > Settings > Archive Override.

In case you have any difficulty following this guide, please contact support.

Download button

Using WCPT 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.

Style tips

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 select {
margin: 5px;
}

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

Variations table

WCPT PRO provides you the facility to create a variations based table. However, you cannot mix product variations with variable products and simple products in the same table. A variations table only contains product variations from a single variable product.

WCPT PRO provides you the facility to create a variations based table. Please note:

  • 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
  • It is useful when you need to display the variations of a single variable product in a table

Using the variations table you can make it much simpler for the 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 when some variations are not available.

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. 

Show variations on the 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. 

Add variation product table to product pages via PHP

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"]' . $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_variations_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"]' );
  }
}

  

Shortcode attributes

Save time and effort while creating new tables by using the shortcode attributes included in WCPT such as category, limit, ids, etc. WCPT PRO extends this list of shortcode attributes even further.

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″]

Search

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 | shop | category" placeholder="Search" placeholder_fr_FR="Trouver" exclude="category-1, category-2" include="category-3, category-4" ]

Using the category dropdown your 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.

The ‘clear_redirect’ attribute lets you decide which page to show when user clears search –

  • ‘home’ leads to homepage
  • ‘shop’ leads to woocommerce shop page
  • ‘category’ leads to current category page without search 

The ‘placeholder’ attribute 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.

Use ‘exclude’ attribute to enter comma separated list of category slugs that you need to exclude (all other categories will show up). Alternatively, you can use ‘include’ to enter specific category slugs that you need to include (all other categories will be hidden).  

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'] ) ){
    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.

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.

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 an ‘Attribute’

(You can use this same method 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 sort the products based on custom field and give each product a custom field representing its attribute term.

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