Section 12 of 13 · Product Grid

WooCommerce, carded.

The Product Grid reads straight from your WooCommerce catalog: price, rating, sale badges, and add-to-cart, all styled by the same design system as every other card on this site.

Next: Map All sections

Cards · Full Commerce · Dark

The shop, full-featured.

Cards with price, star rating, sale badge, and add-to-cart, everything WooCommerce knows about a product, carded.

Socks

Select Options

Minimal · 4 Columns · Price Only

The lookbook treatment.

The minimal style at four columns with price only: an editorial catalog for browsing, not converting.

The catalog, on a rail.

The same WooCommerce product cards — price, rating, sale badge, and add-to-cart — on a horizontal scroll-snap rail. A featured-products strip that reads the live catalog; switching a product grid to a carousel changes only the arrangement.

Hat

$12.00

Add to Cart

Sale

Shirt - Green

$25.00 $20.00

Add to Cart

Jacket

$25.00

Add to Cart

Shirt - Cream

$25.00

Add to Cart

Shoes

$18.00

Add to Cart

Socks

Select Options

Sale

Shirt

$20.00 $18.00

Add to Cart

Blouse

Carousel · 4-Up · Autoplay · Dark

Featured products, auto-advancing.

Four products per view with autoplay and loop: the rail advances every five seconds and wraps at the ends, with a pause/play button that also pauses on hover and keyboard focus. Full commerce cards on the dark theme.

Keep going

Next: Map. Directions without an API key.

Map layouts All sections