Do you want your products in a tidy grid of cards, with the same number per row?
Grid is the default layout of the Woo Product Listing widget in The Plus Addons for Elementor, with separate column counts per device.
To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Woo Product Listing widget is part of The Plus Addons for Elementor Pro. It does not appear in the widget panel of the free plugin.
- WooCommerce installed and active, with some published products.
- Widget to enable: Woo Product Listing, switched on under ThePlus Settings > Widgets.
Step 1: Add the widget
Drag the Woo Product Listing widget onto the page. In Content > Content Layout, Layout is already Grid.
Step 2: Pick a card style
Style offers Style 1, Style 2, Style 3 and Custom Skin, where you design the card yourself as a template.
Step 3: Set the columns
Open Content > Columns Manage. Desktop Column defaults to Column 4, Tablet Column to Column 3 and Mobile Column to Column 2, each from 1 to 6.
Settings Reference
| Setting | Where | Options | Default |
|---|---|---|---|
| Layout | Content > Content Layout | Grid, Masonry, Metro, Carousel | Grid |
| Style | Content > Content Layout | Style 1 to 3, Custom Skin | Style 1 |
| Desktop Column | Content > Columns Manage | Column 1 to 6 | Column 4 |
| Tablet Column | Content > Columns Manage | Column 1 to 6 | Column 3 |
| Mobile Column | Content > Columns Manage | Column 1 to 6 | Column 2 |
| Maximum Posts Display | Content > Content Source | Number | 8 |
Limitations
- Pro only. The Woo Product Listing widget is not in the free plugin.
- Uneven titles make uneven cards. Keep product names a similar length, or use Masonry.
