Cart Cross-sells
"You may be interested in…" for the cart page, in Elementor — the cross-sells of the products in the cart, in the store's own product cards, with your heading, columns and number.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WooCommerce 7.0 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Install it from Moduly → Marketplace
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for Cart Cross-sells. Our widgets sit in the Moduly category and carry the Moduly badge.
- Drag it onto the page.
- Set it up in the Content tab, style it in the Style tab, and use Advanced for spacing, motion and visibility.
Settings
Cross-sells
| Setting | What you can set |
|---|---|
| Heading | Text |
| How Many | Number |
| Columns | Number |
| Sample Products When Empty | On / off · For demo sites: when the cart has no cross-sells, show sample products instead of nothing. Leave off on a live shop. |
| Sample Product IDs | Separated by commas. Empty: the cross-sells set on your products, else your newest products. |
| Order | Random, Price: low to high, Newest or Name |
Style tab: design controls for Heading — colours, typography, spacing, borders and hover states.
Where it goes
On the cart page: Products → Store Templates → Add a cart page template builds the cart from the cart widgets (Store Notices, Cart Table, Cart Totals, Cart Cross-sells, Empty Cart), and each shows itself only when it has something to show. It also works on any page.
How it works
Cross-sells are set on each product: Product data → Linked Products → Cross-sells. The widget shows the cross-sells of every product in the cart, leaving out what is already in it — and nothing when there are none, unless Sample Products When Empty is on (for demo sites, so the section is never blank).
Troubleshooting
- Changes not showing on the live page? Regenerate CSS in Elementor → Tools → Regenerate CSS & Data and clear any page cache.