Table of Contents
1. Populate a grid with WooCommerce Products
Create a new Grid or download a WooCommerce Grid from the Grid Template Library
Select Post-based Grid as Source and “Product” as Post Type. Then select the Product Category and Tags that you’d like to use.
Edit the Grid Skin using the Item Skin Editor
Select or insert a Layer and select “WooCommerce” as source and an “Element” that you’d like to display
Quick Tip: Refer to this article that explains more about the available WooCommerce Elements in Essential Grid.
2. Display WooCommerce Attributes on Grid Items
Quick Tip: Refer to this article that explains more about creating Product Attributes in WooCommerce
Insert the custom PHP code below into your theme functions.php file or with the Code Snippets Plugin
add_shortcode("product_attributes", "display_product_attributes");
function display_product_attributes( $atts ) {
// Shortcode attribute (or argument)
$atts = shortcode_atts(
array(
'id' => ''
),
$atts, 'product_attributes'
);
if( ! ( isset($atts['id']) && $atts['id'] > 0 ) ) return;
$product = wc_get_product($atts['id']);
ob_start();
do_action( 'woocommerce_product_additional_information', $product );
return ob_get_clean();
}
Edit the Grid Skin using the Item Skin Editor
Select or insert a new Layer and insert the shortcode below into a “Text/HTML” Layer
[product_attributes id=’%post_id%’]