Cross-sells in a slider, and where they can appear

What a cross-sell is

Where an upsell replaces a product, a cross-sell is added to it. You choose them in the product's Linked Products tab. WooCommerce's own Cart block shows them under the cart. This block's source shows the cross-sells of the product whose page it is on, so it appears on product pages. It does not read the contents of the cart.

What that means in practice

To show "goes well with" at the moment someone is looking at a product, this does exactly that, on the product page. For the cart page, keep WooCommerce's Cross-Sells block, which reads the cart. The plugin says this openly in its FAQ: "Related", "Upsells" and "Cross-sells" only show products on a product page.

Make the row small

Cross-sells are usually small things at small prices, and they should not compete with the main product. Use a small row, with five or six in view on desktop, and small pictures. A plain button on each card matters here, because the whole idea is adding one more thing without leaving the page. Adding to the cart happens without a page load, and it updates the mini cart.

Choose them properly

A good cross-sell is something the buyer really needs, or will soon regret not having. Batteries, cases, refills. It's more work than ticking "related", and it's usually the reason shops have poor cross-sells. If you have a large range, start with your twenty best sellers.

A note on prices

Show the price on the card, always. Nobody adds a small extra without knowing what it costs, and nobody wants to go off to a product page to find out. The price and the button should not be hidden behind a hover. Choose a layout like Below or Line.

Questions