Designing the WooCommerce Product Card
The card in the grid is where most shopping decisions are made, and most redesigns of it add elements instead of removing them. Ragged card heights and a missing price do more damage than any amount of hover animation repairs.
The card is the product page for most of your visitors. They will scan a grid, form an opinion, and never open two-thirds of the items they looked at. Almost every card redesign starts by adding — a badge, a rating, a swatch row, a quick-view button — when the change that moves numbers is making the existing four elements land in the same place on every card.
A WooCommerce card is not a single template. In a classic theme it is content-product.php assembled from a stack of hooks; in a block theme it is the Product Template inside a Product Collection block, built from inner blocks you can reorder in the editor. Know which one you are editing before you write a line of CSS, because the same visual change is a template override in one and a block layout change in the other.
Fix the grid before you decorate the card
Ragged cards are the most common defect and the least discussed. Two causes:
- Mixed image aspect ratios. If some products are square and some portrait, every row is uneven and the price sits at a different height in each column. Pick one ratio, crop to it, and regenerate thumbnails — the mechanics are in product image sizes.
- Titles wrapping to different line counts. A one-line and a three-line title push the price 40px apart. Give the title a
min-heightof two lines, or clamp it, and accept the truncation.
Both defects also produce layout shift as images arrive, which is measurable and penalised. If the grid jumps while loading, the images are missing explicit dimensions — see fixing cumulative layout shift.
Decide what each card must say
Four elements are non-negotiable: image, name, price, and an unambiguous way to proceed. Everything after that has to earn its place against the cost of scanning.
| Element | Include when | Cost if wrong |
|---|---|---|
| Price range | Variable products | "From £20" reads as bait if the real range is £20–£200 |
| Rating stars | You have real review volume | Empty stars on every card signal an abandoned store |
| Stock status | Stock is genuinely a factor | Constant "In stock" is noise |
| Sale badge | The saving is real | Permanent badges stop being read |
| Short description | Rarely | Turns a scannable grid into a wall of text |
Badge discipline matters more than badge design. A card carrying "Sale", "New" and "Best seller" at once has communicated nothing; the rules for keeping them meaningful are in product badges.
Handle variable products honestly
Simple and variable products behave differently in the grid and pretending otherwise causes most card confusion. A simple product can be added to the cart from the card. A variable product cannot — the button becomes a link to the product page, and the label changes to reflect that. When those two buttons look identical, shoppers learn that clicking add to cart sometimes adds and sometimes navigates.
Either differentiate them visually, or make both cards link to the product page and put the real add to cart control only where options can be chosen. The label itself is filterable per product; see changing the add to cart text.
Hover, mobile and touch
Hover states do not exist on the device most of your traffic uses. Anything revealed on hover — a quick-view button, a second image, an add to cart that slides up — must have a resting equivalent on touch, or that functionality simply does not ship to phones.
On mobile the practical question is two columns or one. Two columns shows more of the catalogue and is usually right for visual products; one column is right when the price or a spec is the deciding factor and needs room. Test on a real device rather than a narrowed desktop window, because tap target size and thumb reach are what actually break.
Where to make the change
Small visual adjustments — spacing, type scale, badge colour, title clamping — belong in CSS, added the way described in adding custom CSS to WordPress. Reordering or removing elements belongs at the structural layer: block inner-block order in a block theme, or hook and template changes in a classic theme, which is the same toolkit covered in customising the product archive.
Resist the fourth option, which is a plugin that replaces the card wholesale. It works until the day you need one different element, and then you are debugging someone else's template stack instead of a fifteen-line override.
The test that settles arguments
Load the grid on a phone, at the top of a category with mixed product types, and answer three questions without scrolling: can I tell what each item is, what it costs, and what happens if I tap it? If any answer needs a second look, the fix is removing something, not styling it better.
Frequently asked
- Almost always inconsistent source image aspect ratios, or titles that wrap to a different number of lines. Crop images to one ratio and give the title element a fixed minimum height so the price and button always land on the same baseline.
- Only for products that can genuinely be added in one click. For variable products the button becomes a link to the product page, so showing it next to a simple product's real add to cart button teaches shoppers that the same control does two different things.
- Transform and opacity transitions are cheap. Swapping to a second image on hover is not, because it either loads a second full-size image for every card up front or fetches it mid-interaction. Preload nothing and accept the small delay, or drop the effect.