Can I add icons, download links, enquiry or get a quote buttons to the product table?
You can use WooCommerce Product Table to display custom links in the table - either as clickable text or as buttons, icons or images. These links 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 such as the short or long product description, or custom fields.
Please 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
Links and other HTML in the main content are normally removed by WooCommerce Product Table. This is because the content is truncated using the description_length option. If the HTML wasn't removed, the content could be split incorrectly and missing the necessary closing HTML tags such as </a>, </p>, </div> etc.
To preserve the HTML formatting, including links, you would need to set the content to display in full. You do this by setting description_length=-1 in your shortcode, or in the plugin settings.
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). By using a custom fields plugin, you can create more advanced links without writing any HTML code.
Use the Easy Post Types and Fields plugin to create a Visual Editor (WYSIWYG) custom field. Use this field to 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 - 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 to the columns option. Do this in the plugin settings page (WooCommerce → Settings → Products → Product Tables), or in your shortcode. The column name will be cf: followed by the custom field you just added. In our example above, the custom field name was button, so our column name would be cf:button. In the shortcode this would be: columns="cf:button,title,image"
Please see the columns article for more information on adding custom fields to your table.
How to add clickable buttons, icons, and other types of link
The following video tutorial shows some examples of creating custom links, adding buttons and icons and displaying them in your product table:
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).
