Product Grid (Divi)

WooCommerce products for Divi 5, well beyond the built-in Shop module: six card skins, a quick view window with galleries and variations, AJAX add to cart, AJAX category tabs, sorting and a result count, numbered / previous-next / load-more / infinite pagination, four badge shapes, stock bars, second-image hovers and ten product sources.

1. Shop grid with tabs, sorting and pages

Classic cards, four across · a heading with a sub-heading and “Shop all” · category tabs (pills with counts) that reload the grid in place · a sorting dropdown and result count · numbered pages · quick view on the image · a percent-off sale badge.

2. Hover actions, second image, load more

Hover skin — the cart button slides over the image · the second gallery image on hover · on-sale products only · pill badges top right, with “New” and featured “Hot” too · a Load more button with “3 of 5” progress.

3. Boxed cards with everything

Card skin — boxed, full-width button with an icon · a quantity field · rating with review count · short description · stock status and a stock bar · quick view as a button · tag-shaped badges.

4. Overlay cards, underline tabs

Overlay skin — name and price on the image, sliding up on hover · Apparel, Travel and Jewelry as underline tabs without an “All” tab · previous / next pages · a darken hover.

5. A list of hand-picked products

List skin — image beside the text, two columns · six hand-picked products in their chosen order · categories and an excerpt · the quick view link below the price.

6. Swatches, brand and a quick view for options

New in colour swatches (four, “+N” for the rest) — hover one to swap the photo · the brand above the title · sizes as text · the card’s content in a custom order · variable products open the quick view with a “Choose options” button · the wishlist heart beside the quick view icon · an added-to-cart popup.

7. Size chips and an image ratio per device

Size chips (S M L XL), three shown and larger · the wishlist heart hidden · image ratio 2:3 on desktops, 4:3 on tablets and 1:1 on phones.

8. Filters in a sidebar

New in categories, a price slider, colour and size swatches, rating, stock and on-sale filters in a left sidebar, with counts and active-filter chips · sorting, result count and numbered pages. Filters are page addresses, so a filtered list can be shared — and they work without JavaScript.

9. Filters as a bar, applied with a button

Categories, attribute buttons and a search field in a horizontal bar, applied with a button · previous / next pages.

10. Filters in a dropdown bar

Price, attributes, stock, on sale, tags and brands, each in its own dropdown · sorting · a Load more button.

11. Off-canvas filters

A Filters button opens the panel from the side · infinite scroll · a designed empty state when nothing matches.

12. Current category, minus a tag

Source: Current category — on a category archive or a product page (Theme Builder) the grid follows the page; outside one, as here, it shows the latest products · the “New in” tag excluded · brands shown.

13. Finished design

Minimal cards on a dark page — name and price in a row · a centred heading · outlined-button tabs · custom colours for cards, text, price, badges, tabs and the add-to-cart button · infinite scroll.