← All widgetsWidget 116 ·
emcp_custom_116Products Grid
Elementor widget5 layouts14 content options46 style options6 panel sections
Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: woocommerce, products, grid, shop, cards, dynamic.
Setup guide
- Open a page in Elementor, search the panel for Products Grid and drag it into a container.
- Content › Layout: Card Layout, Columns, Show Category, Show Brand, Show Rating, Show Price, Show Short Description, Show Sale / Featured Badges and 5 more.
- Content › Query: Products.
- Pick a Card Layout: Classic (button below), Add to cart on hover, Image with overlay info, Minimal (no card), Padded image on tinted box. Each one is shown below.
- Style tab sections: Card, Image & Badges, Text & Price, Button. Colours, typography and spacing set here are scoped to this widget instance.
- Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Products is a live query (source: products). A "Products" panel with filters, ordering and count is generated for it; results come from this site's data on every page load.
Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.
Layout
Classic (button below)
Card Layout = classic
No products found.
Layout
Add to cart on hover
Card Layout = hover-cart
No products found.
Layout
Image with overlay info
Card Layout = overlay
No products found.
Layout
Minimal (no card)
Card Layout = minimal
No products found.
Layout
Padded image on tinted box
Card Layout = boxed-image
No products found.
Options reference
Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).
Content tab
Layout
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Card Layoutlayout | Dropdown | Classic (button below), Add to cart on hover, Image with overlay info, Minimal (no card), Padded image on tinted box | classic | |
Columnscolumns | Dropdown | 1, 2, 3, 4, 5, 6 | 4 | Responsive |
Show Categoryshow_category | Toggle | on / off | yes | |
Show Brandshow_brand | Toggle | on / off | ||
Show Ratingshow_rating | Toggle | on / off | yes | |
Show Priceshow_price | Toggle | on / off | yes | |
Show Short Descriptionshow_excerpt | Toggle | on / off | ||
Show Sale / Featured Badgesshow_badge | Toggle | on / off | yes | |
Sale Badge Textbadge_style | Dropdown | -20%, Sale | percent | |
Show Add to Cartshow_button | Toggle | on / off | yes | |
Swap to Gallery Image on Hoverswap_hover | Toggle | on / off | yes | |
Title Tagtitle_tag | Dropdown | H2, H3, H4 | h3 | |
No Products Textempty_text | Text | No products found. |
Query
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Productsproducts | Query | Source: products |
Style tab
Card
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Gapgap | Slider | min 0, max 80, px | 24 | Responsive |
Backgroundcard_bg | Background | |||
Bordercard_border | Border | |||
Radiuscard_radius | Slider | min 0, max 60, px | 14 | |
Shadowcard_shadow | Box shadow | |||
Hover Shadowcard_shadow_h | Box shadow | |||
Content Paddingcard_pad | Dimensions | |||
Content Spacingcard_gap | Slider | min 0, max 30, px | 6 | |
Text Alignalign | Button group | Left, Center, Right | left | |
Lift on Hoverhover_lift | Toggle | on / off | yes |
Image & Badges
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Image Ratioimg_ratio | Dropdown | Square, Portrait 4:5, Portrait 3:4, Landscape 4:3, Wide 16:9 | 1 / 1 | |
Image Fitimg_fit | Dropdown | Cover, Contain | cover | |
Image Area Backgroundimg_bg | Color | #f4f4f5 | ||
Image Insetimg_pad | Slider | min 0, max 60, px | 0 | |
Image Radiusimg_radius | Slider | min 0, max 60, px | 0 | |
Zoom on Hoverimg_zoom | Toggle | on / off | yes | |
Sale Badge Textsale_color | Color | #ffffff | ||
Sale Badge Backgroundsale_bg | Color | #f04438 | ||
Featured Badge Textfeat_color | Color | #ffffff | ||
Featured Badge Backgroundfeat_bg | Color | #6a11cb | ||
Out of Stock Badge Backgroundoos_bg | Color | #667085 | ||
Badge Typographybadge_typo | Typography | |||
Badge Radiusbadge_radius | Slider | min 0, max 999, px | 999 |
Text & Price
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Category / Brand Typographycat_typo | Typography | |||
Category / Brand Colorcat_color | Color | #667085 | ||
Title Typographytitle_typo | Typography | |||
Title Colortitle_color | Color | #101828 | ||
Title Hovertitle_color_h | Color | #6a11cb | ||
Price Typographyprice_typo | Typography | |||
Price Colorprice_color | Color | #101828 | ||
Old Price Colorold_color | Color | #98a2b3 | ||
Star Colorstar_color | Color | #f79009 | ||
Empty Starstar_empty | Color | #e4e7ec | ||
Star Sizestar_size | Slider | min 8, max 30, px | 13 | |
Description Typographyexcerpt_typo | Typography | |||
Description Colorexcerpt_color | Color | #475467 |
Button
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Typographybtn_typo | Typography | |||
Textbtn_color | Color | #ffffff | ||
Backgroundbtn_bg | Color | #101828 | ||
Hover Textbtn_color_h | Color | |||
Hover Backgroundbtn_bg_h | Color | #6a11cb | ||
Paddingbtn_pad | Dimensions | |||
Radiusbtn_radius | Slider | min 0, max 60, px | 10 | |
Borderbtn_border | Border | |||
Full Widthbtn_full | Toggle | on / off | yes | |
Top Spacingbtn_mt | Slider | min 0, max 40, px | 8 |
Add it with the MCP tools
Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_116" and a settings object using the keys above. Run get-custom-widget with id 116 for the full JSON spec.