How to Display Variation Custom Fields on the Shop Page

The Show on Frontend? option that comes with WooCommerce Custom Fields for Variations displays your variation custom fields on individual product pages. If you’d also like to show the custom fields elsewhere in your store – for example, on the shop and category pages – then you can do this by using WooCommerce Custom Fields for Variations with the WooCommerce Product Table plugin by Barn2.

WooCommerce Product Table replaces your usual store layout with a structured order form view, containing extra columns of data about each product and variation. You can add a separate column for each of your variation custom fields. 

variation custom fields on the shop page
Variations listed in a table, with 2 custom field columns

How to add your custom fields to the shop page

To show variation custom fields on the shop page, take the following steps: 

  1. Use WooCommerce Custom Fields for Variations to create one or more custom fields. When you create each custom field, copy the Meta ID because you will need this to display it on the shop page. 
  2. Edit your products and add data to the custom field for each variation. 
  3. Install WooCommerce Product Table and select the following options in the setup wizard:
    • Store pages – Tick the boxes for all the pages in your store where you want to display the product table layout with the variation custom field data. For example, you might tick ‘Shop page’ and ‘Product categories’. 
    • Table content – List the columns of information to include in the product table, separated by commas. To add variation custom field columns, add cf: followed by the Meta ID, which you copied in Step 1 above. Use the ‘Read more’ link in the setup wizard to learn about the available columns. For example, “name,cf:iconic_cffv_15391_reference,price,buy” might create 4 columns containing the product name, a variation custom field, the price, and add to cart buttons. 
    • Adding to the cart – Change the ‘Variations’ option to ‘Show one variation per row’. This is important for showing the variation custom fields on the shop page because each variation needs to be displayed separately with its own data. 

Now view one of the pages where you enabled the product table, such as the shop page. You will see your products and variations displayed in a table, complete with the custom field data for each variation. 

Alternatively, you can manually create pages and add product tables to them that display specific variations and their custom fields. You can do this using the shortcode, which is available in WooCommerce Product Table.

WooCommerce Custom Fields for Variations

Easily add custom fields to your product variations; the perfect way to display organised additional product data to your customers.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.