Moduly Woo Products — every layout and carousel feature

14 demos of the Divi module. Each section names the settings that make it.

1. Grid — the defaults

Four columns, shop thumbnails, zoom on hover, sale badge, rating, price and add to cart.

2. Grid — rich cards

Categories, a percent-off sale badge, a “New” badge, the short description, stock and the second image on hover.

3. Grid — card image gallery

Every card slides through its own product gallery. Hover for arrows; the dots sit inside the image.

4. Grid — styled cards

The Design settings at work: white cards with a border, rounded corners, padding and a shadow; indigo titles and buttons.

5. List — with pagination

The List display: image, details and button on one row. Sorted by price, high to low, five per page.

6. Carousel — the basics

Four per view, arrows and dots, looping, autoplay every 3.5 seconds, paused on hover and while scrolled out of view.

7. Carousel — product showcase

One product at a time with a fade, a synced thumbnail strip, a “2 / 6” counter, a slide-position bar and a play/pause button.

8. Carousel — marquee

Auto Scroll: a continuous, endless ticker. Pauses on hover; play/pause button below.

9. Carousel — two rows

The Grid extension stacks two products per column. Numbered pagination and an autoplay timer bar above.

10. Carousel — centred with peek

The active slide is centred and 80px of the neighbours show at each edge.

11. Carousel — vertical

Top to bottom in a 520px frame, cards laid out as rows. Scroll with the mouse wheel.

12. Carousel — galleries inside slides

A carousel whose cards each carry their own image gallery. Drag the carousel from the text; swipe images inside the photo.

13. Carousel — right to left, rewind

Moves right to left, two at a time, and rewinds to the start instead of looping. Dots only, no arrows.

14. Carousel — styled navigation

Indigo arrows and dots, a thicker progress bar, and a counter — set in the Carousel Controls design group.