General Demo 1 – Demo Notes

Index of notes:

Checkbox

You can add the Checkbox element to any table column. Once you have placed it anywhere on your table your customers can start using it to add multiple items to cart at once.

Within the settings of the Checkbox element you will find the option to enable it for the column heading.

Highlight checked rows

To highlight the checked rows, use the shortcode attribute checked_row_background_color=”yellow” in your product table shortcode.

‘Add selected to cart’ button at top and bottom of the table

To show the Add Selected to Cart / Clear all buttons at the top and bottom of the table, go to the table’s settings > Navigation and add the element Add Selected To Cart. In the settings of this element there is an option to enable it at the bottom of the table as well.

‘Checkbox Trigger’ button fixed at the bottom of the page

When your site visitor uses the checkbox button, the green Checkbox Trigger button will appear at the bottom of the screen asking to add selected products to cart. You can adjust its text and style in wp admin > product tables > settings > Checkbox Trigger. You can also disable it for laptop or responsive mode using the toggle options if you wish.

Product image – enlarged offset on hover

Place the Product Image element in any column and in the settings of this element select the option ‘Show an offset, enlarged version of image on hover’ to create this hover effect.

Content – show more / less toggle

In the second column the Title and Content elements are placed in separate rows. Please see the plugin tutorial series for clarity on all important table facilities like creating multiple rows in a column.

In the settings of the Content element you have the option to limit the word count and setup a show more / show less toggle.

Control content width

By default, the Content element will horizontally expand to occupy all the available space.

But in this demo, its width have been limited by going to the Content element’s settings > Style for element > Width: 500px

Total

The total element can be added to any column and will automatically multiple the quantity entered by the user with the price of the product.

Show table total quantity and cost

First, please ensure you have added a Checkbox element to your table. This is necessary before the next step.

Now go to your table’s settings > Navigation > add the element ‘Add selected to cart’

In the settings of this element, modify the label to use {total_qty} and {total_cost} placeholders.

Responsive table

WCPT is the only product table plugin that will allow you to create highly optimized, unique views for the 3 main device groups – laptop, tablet and phone. This helps you create a great viewing experience for your site users on all device sizes.

Please check out the plugin’s tutorial series for full explanation on building responsive modes for your product tables.