fbpx

Display All Your WooCommerce Products Using EA Product Grid For Elementor

EA Product Grid element lets you place your WooCommerce Products anywhere, even in your blog on your Landing Page and every other possible area on your Website. Luckily, this element will fetch all Product-related information, and that’s for every product, automatically. This means all you need to do is adjust the styling of the Grid. Can it get any simpler?

Elementor WooCommerce

Open your Elementor Editor and search for EA Product Grid from the SideBar.

Display All Your WooCommerce Products Using EA Product Grid For Elementor 1

Content

You might be wondering whether you have to create Product Description, Images, Categories from scratch or not. Here is the answer to that. EA Product Grid will communicate with WooCommece installed on your Website and fetch all the required information. This means you don’t need to manually fill in the information just for the sole purpose of using our element.

Display All Your WooCommerce Products Using EA Product Grid For Elementor 2

After you adjust some settings, EA Product Grid will automatically fill-out the Grid with existing products on your Website. These settings involve selecting criteria to filter the WooCommerce Products, which include, Recent Products, Featured Products, Best Selling Products, Sale Products and Top Rated Products. You can also use Product Categories to filter the WooCommerce Products. You might be wondering whether you can use both, the answer to that is “Yes”.

After you are done specifying the criteria, move on to adjusting the Grid Layout a little. Using the Columns and Products Count Option you can specify how many columns you want to set for the Grid.

Styles

The Color and Typography for each individual Text section on the Grid can be styled differently. In fact, there is a separate Tab under the Style section. To open the Font Typography, click on the Pencil Icon to activate the Typography Pop Up.

Display All Your WooCommerce Products Using EA Product Grid For Elementor 3

Now, you might want to put extra effort into creating the Add to Cart Button. A beautiful Add To Cart Button may make the difference between a successful sales and a disappointing bounce count. The Add To Cart Button can have two different styles, one for its Normal State and the other for its Hover State. Don’t make the mistake of using similar colors for both the states. Use colors in the right contrast.

Display All Your WooCommerce Products Using EA Product Grid For Elementor 4

Wrapping Up!

Once you are done with all the adjusting, the WooCommerce Products Grid should look something like this.

Display All Your WooCommerce Products Using EA Product Grid For Elementor 5

You can also visit the Live Demo page for inspiration for your work. In the meantime here is another quick blog on how to add a Filterable WooCommerc Gallery On Your Website.

Afshana Diya

Afshana Diya

Afshana Diya is CMO at WPDeveloper. She is helping the company to create a dynamic team and sustainable business from the scratch. When she is offline from the digital world, she must be traveling to find natural beauty in remote places.

Share This Story

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.