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

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

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!