Can I add icons, download links, enquiry or get a quote buttons to the product table?
The only buttons officially supported by WooCommerce Product Table are the Add to Cart buttons. However, it is possible to add other types of button or link. For example, you might want to display icons, download links, or ‘Enquire about a product’ or ‘Get a quote’ buttons in the table.
You can display other types of button, icon or link by adding them to one of the fields displayed in the product table. For example, on this plugin demo, we created a custom field and displayed it in the table instead of an add to cart column. If you click ‘Enquire’, you are taken to a page with a contact form (created using Contact Form 7).
How to add icons, buttons etc. in WooCommerce product table
- First, go to the plugin settings page at WooCommerce -> Settings -> Products -> Product Tables and tick the ‘Shortcodes’ option. This tells the plugin to display the clickable button/links/icons properly in the product table.
- Next, decide which field you will use to add the buttons/links/icons. This could be the short or long product description, or if you’re already using these for something else then we recommend creating a custom field. You can use a plugin such as Advanced Custom Fields to create a custom field for your ‘Product’ post type. In the example above, we created a custom field called ‘Link’.
- Add the HTML code or shortcode to create a clickable button, link or icon to this field for each product. This 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.).
- Create a product table with a column for the field where you’ve added the buttons/links/icons. For example, the following shortcode will create a product table with columns for name, short description and a custom field called ‘Link’:
[product_table columns="name,short-description,cf:link" shortcodes="true"]
- To display the button/icon/link clickable in the product table, you need to add the full code including the clickable link. If you’re using the short or long descriptions, or a WYSIWYG Visual Editor custom field, then you can add a link using the ‘Insert/Edit Link’ button in the WordPress toolbar. If it’s a plain text field then you will need to enter the actual HTML code to create a clickable link. For example,
<a href="https://mywebsite.com">CLICK HERE</a>rather than just
- If you’re using shortcodes to create buttons etc., then adding
shortcodes="true"to the product table shortcode will render the shortcode correctly in the table.
- If you don’t want to create a custom field then you can add the code for your icon/link/button to one of the other fields supported by WooCommerce Product Table, such as the description or short description.
- If you’re using Advanced Custom Fields and want to add the same link/button for each product, add it as a default value to save having to enter it for every product individually.
- If your products are not purchasable and you just want people to be able to download a file for each product or click on an external link, then another option is to use the External/Affiliate product type. Select this from the ‘Product Data’ section of the page when you add or edit a product. Instead of adding an affiliate URL for each product, you can add the URL of the PDF file and change the wording of the add to cart button to something like ‘Download’. People can then click on the Download button in the product table to download the PDF.