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?
Open your Elementor Editor and search for EA Product Grid from the SideBar.
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.
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.
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.
Wrapping Up!
Once you are done with all the adjusting, the WooCommerce Products Grid should look something like this.
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.
