Creating a WooCommerce Product Grid

This article will show you how to populate a Grid with WooCommerce Products and display WooCommerce Product Attributes

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(
            'id'    => ''
        $atts, 'product_attributes'
    if( ! ( isset($atts['id']) && $atts['id'] > 0 ) ) return;
    $product = wc_get_product($atts['id']);
    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%’]
Creating a WooCommerce Product Grid

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!

[tp_popular title="Popular Grids" regex="(grids|template_library)" count=3]


Join over 25.000 others on the Essential Grid and Slider Revolution email list to get access to the latest news and exclusive content.