WooCommerce Product Tables Documentation

Introduction

You can use the shortcode [hd_product_table] to add your product table to any page or post. This shortcode will inherit the settings of the plugin, which can be found by logging into your site and going to WooCommerce ⇾ Product Tables.

A shortcode is some little text that you can add to your site that WordPress can convert into the real code. If you are using a block-based editor, check to see if your editor has a dedicated block for shortcodes.

How to Install and Activate

After you have purchased this plugin, an email will be sent to you with your activation license as well as a download link. Please remember to check your spam folder if you have not received this email.

Log into your site and from the admin menu, select Plugins then the Add New button (found near the top of the page)
Now select Upload Plugin and select the plugin you downloaded, then Install Now.
Once the plugin has been installed, select the Activate Plugin button

Now that the plugin is on your site, you need to activate your license. You can do this from the plugin settings page, found by going to WooCommerce ⇾ Product Tables. Once your plugin has been activated, you can start adding product tables to your site.

Settings

WooCommerce Product Tables has many, many settings and options. This section will outline every setting that you can configure. Note that these settings can also be used to customize the shortcode. Examples will be provided.

Columns

You can choose which columns to show in your table from the Columns tab. You can also decide which columns to show on “desktop” and which to show on “mobile”. This is very useful as mobile devices famously do not have as much room to show horizontal content as desktop users.

You can also choose which columns will be “collapsed” for both desktop and mobile. Collapsed columns will be hidden behind a “+” symbol, which, on the rendered table, will reveal the hidden content when selected.

Column Attributes

table_columns — comma separated list of column names for desktop.
table_columns_collapsed — comma separated list of collapsed column names for desktop.
table_columns_mobile — comma separated list of column names for mobile.
table_columns_mobile_collapsed — comma separated list of collapsed column names for mobile.

Column Names

Thumb — product featured image.
Title — product title.
Summary — product summary (short description).
Price — product price.
Categories — product category list.
Tags — product tag list.
Date — product published date.
Cart — add to cart form.

NOTE: If you set columns using shortcode attributes, make sure that your column priority is correct. For example, you cannot have columns in mobile view that are not also in desktop view. Same for collapsed and normal. Also note that all column names are Capitalised.

Sorting

You what order the products will display by using the Sorting options.

sortyby — Select which data you want to sort by, such as by product name or price.
- name — sort by product name.
- menu_order — sort by your defined menu order.
- price — sort by product price.
- date — sort by published date.
- random — randomize the order on every table load.
orderby — Select the order that the sorting should be (low to high, high to low).
- asc — Ascending order (low to high).
- desc — Descending order (high to low).
perpage — How many products to show per page. Set to a high number 9999 to disable.
limit — set max products to show. Useful if sorting by date and only want to show most recent x products.

Filter

You can filter the table to only show products from certain categories. Just note that any categories selected will also show products from any child categories as well.

filter_categories — comma separated list of product category IDs.

Other

Settings in the Other contains some “general” settings and options.

disable_search — if you do not want your table to include the search functionality. Only accepts yes as a value.
max_thumb_size — maximum size product thumbnails should be in pixels. Only relevant if the Thumb column is in use.
mobile_width — maximum width of the table in pixel before the mobile columns take effect.
disable_permalink — by default, the Title column will also be a link to the product page. Set this to yes to disable the link and only print the title.
disable_view_cart — if the Cart column is active, a new “view cart” button will appear if a user adds the product to the cart. Set this to yes to disable.

Design

The design tab allows you to customize the basic colours of the table. You will need to use CSS if you need more than what is offered.

hd_wpt_styles — if we should load all of our own custom table styles. Set to no to disable and only load the required styles.

Each of these only accepts full HEX values #FFFFFF.

header_background_color — table header background colour.
header_color — table header font colour.
cell_background_color — column background colour.
cell_color — column font colour.
button_background_color — button background colour.
button_color — button font colour.

NOTE: We try to strike a balance between making the tables look good with our own styles, and inheriting styles and colours from your own theme. Sometimes this causes conflicts where button colours etc can look bad. If this happens, just contact support and we can help resolve any conflicts with your theme.

Translations

You can translate just about everything that a front-end user will see. This can be used to simply rename the Add To Cart button to “buy”, or fully translate everything into your own language.

add_to_cart_text — Add To Cart button.
added_to_cart_text — Add To Cart button once product has been added to the cart.
next_text — pagination next text.
prev_text — pagination previous text.
search_text — search field text.
expand_text — the “mouseover” tooltip text for the expand icon.
view_cart_text — the “View Cart” button text.
no_products — text for if the table has no products to show.