The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

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

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%']

Popular Solutions