Product Carousel Block for WooCommerce

Lime Product Carousel Block adds a native Gutenberg block to showcase your WooCommerce products in a smooth, responsive carousel. Built with Embla Carousel — no jQuery, no slick, no bloat.

Add it to any page, post, or widget area. Configure everything from the Inspector panel without touching code.

Check out our other WooCommerce plugins at limewoo.com.

What you can display

• Newest products — latest published by date
• Sale products — products currently on sale
• Products by category — pick one or more product categories

Carousel controls

• Touch and drag on mobile and desktop
• Configurable slides visible at once — independently for desktop, tablet, and mobile
• Optional autoplay with configurable speed
• Prev / next navigation arrows (optional)
• Dot indicators (optional)
• Configurable gap between slides

Product card options

• Show or hide: product price, star rating, Add to Cart button
• Working AJAX Add to Cart — cart quantity updates in real time
• Sale badge on discounted products
• Card alignment: left, center, or right
• Hover lift animation with drop shadow

Style controls

All styling is done from the Inspector panel — no CSS required:

• Accent color (buttons, price)
• Title color, font size, font weight
• Price color, font size
• Button background color, text color, border radius

Performance

• Full HTML output cached via WP transients — one DB query on the first load, then served from cache
• Cache invalidates automatically on stock changes, price updates, and scheduled sales
• Compatible with page caching plugins

Editor experience

• Live server-side preview in the block editor
• Styles update instantly in the preview as you change settings
• No configuration outside the editor

Developer friendly

• Declares HPOS (High-Performance Order Storage) compatibility
• Declares block cart / checkout compatibility
• Uses WC_Product_Query — no raw DB queries
• Cache TTL filterable via lpcb_cache_ttl filter
• All classes namespaced under Lime_Product_Carousel_Block
• Full source available on GitHub

Requires: WooCommerce 8.0+

Development

The plugin’s JavaScript and CSS are compiled from source. Full source code is on GitHub:

https://github.com/Limewoo/lime-product-carousel-block

To build from source:

1. Clone: git clone https://github.com/Limewoo/lime-product-carousel-block.git
2. Install dependencies: bun install (or npm install)
3. Production build: bun run build
4. Watch mode: bun run start

Source files live in src/. Compiled output goes to build/. Do not edit build/ directly.