Skip to content

Home / Guides / eCommerce

Based on work from

Show useful product options while people browse

Show meaningful variations in the product grid, limit extra cards and preserve the selected option when the customer opens the product.

By Shane Rounce · Published · 2 min read

A product card often shows one image and leaves the customer to discover the rest of the options after clicking through. Sometimes that is exactly right. Sometimes a useful choice stays unnecessarily hidden.

I show extra options in a product grid only when the difference helps someone choose which product to open. Each option needs a clear label, a suitable image and a link that preserves the customer’s selection on the product page.

Choose which differences earn the space

I would not turn every possible size and colour combination into another card. That can bury the wider catalogue underneath versions of the same item.

Limit how many extra cards accompany each product and choose the attributes deliberately. I ask whether seeing this difference now helps someone decide what to open.

WooCommerce’s variable product guide describes how variations can carry their own price, stock and image. Those differences are useful information when presented clearly; they are also a reason to avoid treating every option as an interchangeable picture.

Carry the choice into the next page

Carry the selected attribute values into the product link and confirm that the destination recognises them. A customer who chooses a particular option should not have to find the same choice again.

I still check the landing state: the label, selected controls, picture and price should agree. A useful link is one that gets a customer closer to the thing they chose, not just to somewhere in the right catalogue.

Test the grid as a grid

Test both traditional shop loops and block-based collections if the site uses them. Check for duplicate cards and constrain image dimensions so an oversized variation image cannot stretch a narrow tile.

Those are easy details to miss if I only inspect the card component on its own. In the real grid I check the spacing, image proportions, reading order and number of cards at several widths. A blank image also needs a sensible fallback, rather than a giant empty space.

Treat it as an option, not a universal shop rule

The feature can be useful in one collection and unnecessary in another. I keep the main product easy to find and compare the browsing experience with the extra cards switched off.

Judge the change by whether it makes the catalogue easier to understand. Extra cards do not automatically need separate search landing pages, and a more detailed grid alone is not evidence of improved sales.

Got something similar to untangle?

I help with eCommerce and WooCommerce development, from finding the problem to making the change. Tell me what you are trying to improve.

Email Shane