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
- 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 the custom 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 custom field. 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. For example, a link should be added as
<a href="http://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.