Can I add icons, download links, enquiry or get a quote buttons to the product table?
The WooCommerce Product Table comes with several link columns including a button column linking to the single product page, and the ability to link other columns such as the product name to the single product page. In addition, you can use it to add other types of link to the table - either as clickable text or as buttons, icons or images. These can link to any URL, for example another page on your site, an external URL or a link to download a file (such as a PDF) in the Media Library.
You can add links to any text-based fields that you're displaying as table column, such as the short or long product description, or a custom field.
Note: Links from the ID, name, image, categories, attribute, tags or any taxonomy columns are created automatically by the plugin, and controlled via the links option.
Links in the product description column
By default, WooCommerce Product Table strips out links and other HTML in the product description column. This is because the description can be truncated using the Description Length option. If the HTML wasn't removed, then the description could be split incorrectly and remove the necessary closing HTML tags such as </a>, </p>, </div> etc. which could cause errors and display problems.
To display HTML - such a links - in the description column, you should set the Description Length to "-1". This tells WooCommerce Product Table to display the description full and never truncate it.
Links in custom fields
Step 1: Create a custom field for storing the links
First, you need to create the custom field that you will use to add the links. You will then display this as a column in the table using WooCommerce Product Table.
WooCommerce Product Table works with any custom fields plugin. We particularly recommend Easy Post Types and Fields (free).
Use your chosen plugin to create a Visual Editor (WYSIWYG) custom field and add the links that you wish to display in the product table. Use the 'Insert/edit link' toolbar button to hyperlink the text.
In the following example, we have added the following links to a post:
- 'Button' custom field (this is a 'Visual Editor' custom field type) - This field contains 2 links: A normal link with the anchor text "This is a normal text link", and a shortcode created using the free Better Font Awesome plugin which allowed us to insert an icon and make it clickable.
- 'Text' custom field (this is a 'Text' custom field type) - This field contains a URL - https://barn2.com/kb - which will appear as a clickable link in the product table.
Step 2: Add the custom field as a column in the table
To display your custom field, you need to add this as a table column. Do this by either adding or editing a table at Products → Product Tables.
If you created the custom field using either Easy Post Types and Fields or Advanced Custom Fields then all your custom fields will appear as available columns, so that you can easily select them. For other custom field plugins, add a 'Custom field' column and enter the name of the custom field:
How to add clickable buttons, icons, and other types of link
The only buttons officially supported by WooCommerce Product Table are the Add to Cart buttons. If you want to create other types of button or icon, use a custom field to store the code or shortcode for your button/icon. For example, you might want to display icons, download links, or 'Enquire about a product' or 'Get a quote' buttons in the table.
The exact method for adding the button or icon will depend on your theme. For example, your theme may provide a shortcode for buttons or icons. If you don’t know how to do this, ask your theme developer. If your theme doesn’t have the styles you need, you can use a plugin such as Shortcodes Ultimate to create buttons, or Better Font Awesome to create icons.
Note: If you are adding shortcodes to any of the columns displayed in WooCommerce Product Table, then you must enable the shortcodes option. This tells WooCommerce Product Table to display them correctly.
See also: Build a Product Table with WooCommerce Add to Quote Buttons
Linking to third party or affiliate websites
Some people use WooCommerce Product Table to list products which link to third party websites, for example Amazon affiliate links. You can do this by using the External/Affiliate product type. Select this from the 'Product Data' section of the page when you add or edit a product.
An example
On this plugin demo, we created a custom field and displayed it in the table instead of the buy column. If you click 'Enquire', you are taken to a page with a contact form (created using Contact Form 7).
