WooCommerce Products Grid Builder - Docs

  1. Home
  2. WooCommerce Products Grid...
  3. WooCommerce Shop Template
  4. Choosing the Product Item Elements

Choosing the Product Item Elements

Once you choose the title and layout for your template, you can add the rows, columns and product elements.


The row will fill 100% of the Product Item Template. One row can contain a number from 1 to 12 columns. The min-width of the column can be (1/12 * 100)% of row width. The max number of column and the max number of columns sum can be (12/12 * 100)% of row width. So for example, if you have 2 columns, the first one of 5/12 width, the second one max-width can be 7/12, but it also can be 1/12.


Now that you’ve added the columns, you can choose the elements that will be displayed. Click on the “Add Element” button and a popup with all elements will be displayed;


Below you’ll find a list of available product elements:

  1. Title: the product’s title which is actually a link to product’s single page
  2. Image: the product’s featured image
  3. Image: a carousel of product’s gallery images
  4. Price: the currency and price of the product
  5. Short description:: the product’s short description
  6. Rating:: the product’s average rating displayed as stars
  7. Button – Add to cart:: a button that will add to cart 1 product
  8. Button – View product:: a button that link to product’s single page
  9. Label – On Sale:: a label that will be displayed if product is on sale
  10. Label – Is Featured:: a label that will be displayed if product is featured
  11. + more to come in future updates!


As an example, we’ve created a basic grid demo, that has 3 rows, each row has a full width column and have the following elements:

  1. Row 1:
    1. Element 1: Image
  2. Row 2:
    1. Element 1: Title (links to product)
    2. Element 2: Price
    3. Element 3: Rating
  3. Row 3:
    1. Element 1: Add to cart button

Placing Pixels.
Growing Ideas.