Product Category Grid (Divi)

WooCommerce product categories for Divi 5: seven card skins, even, bento or masonry grids or a carousel, product counts, descriptions, sub-category links, buttons, hover effects, a heading with “view all”, and custom cards with their own image, title, text and link.

1. Shop by category

Classic cards, three across (two on tablets and phones) · every category with products, “Uncategorized” hidden · product counts · the parent’s name above each sub-category · a heading with “All categories” · an “all categories” button below · zoom on hover.

2. Bento

Overlay cards in a bento grid — the first category large, spanning two columns and two rows · sub-category links on the cards · a “Shop now” link · the shade deepens on hover.

3. Circle carousel

Round images with the name below, five at a time (three on tablets, two on phones) · counts in brackets · a ring on hover · arrows at the sides and dots.

4. Custom cards in masonry

Category Card children with their own images, titles, text and link (Accessories goes to the shop) · Tile skin — a label box in the centre · masonry columns with alternating tall and square cards.

5. Side cards with buttons

Side skin — image beside the text · three hand-picked categories in the chosen order · counts, sub-category links and a solid “Shop now” button · one column on phones.

6. Finished design

Banner cards on a dark page, in a carousel · the heading with the arrows on its line · counts as a badge on the image · custom colours for cards, names, counts and arrows · Georgia names.