How To Use & Customize Product Grid Widget

Use Product Grid Widget to show off your products with dynamic filters, sorting options, and responsive layouts.

Follow the step-by-step instructions:

1. To customize Product Grid, you must create your product before, → Go to Products Menu → Click All Products.

2. Click Add New Product to create your product.

3. Input your title product.

4. Input your description product.

5. Add your product image : click set product image → select image → click set product image.

6. Add your product categories : click add new category → input category → click add new category.

7. Add your product tags : input tags → click add.

8. If you have finished adding product, don’t forget to click Publish.

9. Go to Menu Romethemekit.

10. And you will be able to see the Product Grid Widget.

11. Click Add New Container.

12. Select your layout : Flexbox or Grid.

13. On the canvas select your structure.

14. Drag the widget from the Elementor 

15. Drop it on the selected area.

16. Setting General :

• Click Content → General.
• Setting your number of products, column and item spacing.

17. Setting Query :

• Click Content → Query.
• You can select categories, order by and crop description word here.

18. Setting Layout :

• Click Content → Layout.
• Select style : 1 or 2, and tag title.
• Enable to show the category, rating and ribbon.

19. Setting Button :

• Click Content → Button.
• Setting your button here.

20. Container Style (used to customize the container style) :

• Click Style → Container.
• Enable container cover to use hover.
• Customize the padding, radius, background color and border.

21. Image Style (used to customize the image style) :

• Click Style → Image.
• Customize the image ratio, padding, radius and border.

22. Title Style (used to customize the title style) :

• Click Style → Title.
• Customize the typography, title color, description typography, and color.

23. Category Style (used to customize the category style) :

• Click Style → Category.
• Customize the typography and text color.

24. Price Style (used to customize the price style) :

• Click Style → Price.
• Customize the typography and text color the price.

25. Rating Style (used to customize the rating style) :

• Click Style → Rating.
• Customize the rating size, color and no rating color.

26. Button Style (used to customize the button style) :

• Click Style → Button.
• Customize the typography, icon size, spacing, padding, margin, border, text, line, icon, and background color.

27. Ribbon Style (used to customize the ribbon style) :

• Click Style → Ribbon Style.
• Customize the typography, text and background color, border, radius, position, padding, and margin.

28. Don’t forget to click Publish to save the changes.