WooCommerce Product Grid

How to Configure and Style EA Product Grid

EA Product Grid lets you easily display your WooCommerce products anywhere on the page with plenty of styling options. With the help of this element, you can create your Product Launch page in a few minutes.

Table of Contents:

  1. How to Activate Product Grid
  2. How to Configure the Content Settings
    2.1. Product Settings
  3. How to Style Product Grid
    3.1. Products Styles
    3.2. Others
  4. Final Outcome

1. How to Activate Product Grid

Before you begin, make sure that you have WooCommerce Plugin activated.

To use this Essential Addons element, find the EA Product Gridelement from the Search option under the ELEMENTS tab. Simply just Drag & Drop the EA Product Grid’ into the Drag widget hereor the ‘+’ section.

Product Grid
After you are successfully done with step 1, this is how the element is going to look like.

Product Grid

2. How to Configure the Content Settings

Under the ‘Content’ tab, you will find the ‘Product Settings’ section.

2.1. Product Settings

You can use the drop-down menu to choose your preferred Products Filtering. By default, it is Product Grid is filtered by ‘Recent Products’. Besides, you can increase or decrease the number of Columns and Products you want to show. You can have a maximum of 6 Columns.

You can also add the ‘Product Categories’ to display the products to those respective categories. Use the toggle to enable or disable the ‘Show Product Rating’ option.

Product Grid

Click to See Live Demo

3.  How to Style Product Grid

Switch to the ‘Style’ tab to style all the features of Product Grid.

3.1. Products Styles

From the ‘Product Styles’ section, you can choose a ‘Content Background Color’. You can also add a border and change its border radius.

Product Grid

3.2. Others

From the ‘Color & Typography’ section, you can change the color & typography of your Product Title, Price, Star Rating & Sale Badge. You can add styling to the ‘Add to Cart’ button for both actions: ‘Normal’ & ‘Hover’.

Product Grid

4. Final Outcome

By following the basic steps and a bit more modifying, you can style your Product Grid as per your preference.

Product Grid

This is how you can display all your WooCommerce Products using EA Product Grid.

Getting stuck? Feel to Contact Our Support for further assistance.

Get Started Now