Skip Navigation

[Resolved] How to create a Shop page Product grid with Product custom fields?

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to create a grid of Products to show on the Shop page of a WooCommerce site. I would like each Product in the grid to include some custom field values and a way to select a specific Product variation.

Solution:
You can add custom fields to WooCommerce Products, and display those custom field values on your shop page using Views shortcodes. Product variations, as defined in WooCommerce, can be selected with the shortcode wpv-woo-buy-options.

Relevant Documentation:
https://toolset.com/learn/create-an-ecommerce-wordpress-site/#free-training-course
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-options

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Ido Angel 6 years, 10 months ago.

Assisted by: Christian Cox.

Author
Posts
#606021

hey,
i want to create a shop page with a product grid. I want the products in the grid to contain other option rather than just the image, info, price, add to cart button.
for example - i want an info button to show extra info about the product (such as nutritional values, for example). or display other types of custom fields, such as allow users to choose between kilo or units.
is there a way to get this done with woocommerce views?
thx!

#606098

Hi, it's possible to create your own custom product grid and display that on the shop page. Check out our tutorial here:
https://toolset.com/learn/create-an-ecommerce-wordpress-site/#free-training-course

i want an info button to show extra info about the product (such as nutritional values, for example)
You can add custom fields to WooCommerce Products, and display those custom field values on your shop page using Views shortcodes. I'm not exactly sure what you mean by an "info button", but we can definitely help you display the custom field value on the single post or on the shop page archive.

or display other types of custom fields, such as allow users to choose between kilo or units
Usually weight units for your entire shop are specified in WooCommerce > Settings > Catalog tab, so I'm not sure what these custom fields will be used for. Product variations, as defined in WooCommerce, can be selected with the shortcode wpv-woo-buy-options:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-woo-buy-options

#606152

wpv-woo-buy-options was exactly that. thanks!
is there a way to not build the grid from scratch but apply changes to the current template grid? otherwise it's building everything from scratch (changing images on hover, animations of buttons, a headache) 🙂
thanks!
ido

#606750

is there a way to not build the grid from scratch but apply changes to the current template grid?
Not exactly, but you could probably copy + paste the old HTML into your Loop Output and replace the content inside that markup with Views shortcodes. If you need more assistance with that, feel free to open a new ticket.

#606755

perfect. i thought that would be an option, glad you confirmed.