Сүрөттөө
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.
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_ttlfilter - All classes namespaced under
Lime_Product_Carousel_Block - Full source available on GitHub
Requires: WooCommerce 8.0+
Check out our other WooCommerce plugins at limewoo.com.
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:
- Clone:
git clone https://github.com/Limewoo/lime-product-carousel-block.git - Install dependencies:
bun install(ornpm install) - Production build:
bun run build - Watch mode:
bun run start
Source files live in src/. Compiled output goes to build/. Do not edit build/ directly.
Скриншоттор
Product carousel on the frontend — showing newest products with sale badges, ratings, and AJAX cart buttons. 
Block editor with live server-side preview. 
Inspector panel — Options tab: query type, order, slide counts, autoplay, card toggles. 
Inspector panel — Styles tab: accent color, title, price, and button style controls.
Блоктор
This plugin provides 1 block.
- Lime Product Carousel Display WooCommerce products in a carousel by newest products, on-sale items, or category.
Орнотуу
From WordPress admin (recommended):
- Go to Plugins Add New.
- Search for Lime Product Carousel Block.
- Click Install Now, then Activate.
Manual upload:
- Download the plugin zip.
- Go to Plugins Add New Upload Plugin.
- Upload the zip, then click Install Now and Activate.
After activation:
- Open any page or post in the block editor.
- Click + to add a block, then search for Lime Product Carousel.
- Insert the block and configure it from the Inspector panel on the right.
FAQ.KG
-
Does this require WooCommerce?
-
Yes. The block queries WooCommerce products and will not load without WooCommerce active.
-
Can I show products from a specific category?
-
Yes. In the Options tab, set Query Type to By Category, then choose one or more product categories from the multi-select dropdown.
-
How many products can I show?
-
Between 1 and 20 products per carousel instance. Use the Products Count control in the Inspector panel.
-
Can I have multiple carousels on the same page?
-
Yes. Each block gets a unique ID automatically — even duplicated blocks are fully independent.
-
Can I show products in random order?
-
Yes. Set Order By to Random. Note that random-order carousels are not cached (cache would defeat the randomness).
-
Is autoplay accessible?
-
Autoplay pauses on hover and on focus so keyboard and screen reader users are not disrupted.
-
Does Add to Cart work?
-
Yes. The button uses WooCommerce’s standard AJAX cart system. The cart quantity updates in real time and stays in sync across all carousel instances on the page.
-
Does this work with HPOS (High-Performance Order Storage)?
-
Yes. The plugin explicitly declares HPOS compatibility and uses
WC_Product_Querythroughout — no legacy order table queries. -
Does this work with block themes?
-
Yes. The block is fully compatible with block themes and classic themes. It uses
get_block_wrapper_attributes()so the block supports alignment and spacing controls natively. -
Is the output cached?
-
Yes. The full HTML is cached in WP transients by default for 24 hours. The cache is automatically cleared when product stock changes, prices update, or a scheduled sale starts or ends. You can change the TTL using the
lpcb_cache_ttlfilter:add_filter( 'lpcb_cache_ttl', fn() => HOUR_IN_SECONDS * 6 ); -
How do I style it to match my theme?
-
Use the Styles tab in the Inspector panel to set accent color, title color/size/weight, price color/size, and button colors and border radius. All overrides are applied as CSS custom properties on the block wrapper — no specificity battles with theme styles.
-
Can I use this block in the site editor (FSE)?
-
Yes. The block works in the site editor, template parts, and patterns.
Сын-пикирлер
There are no reviews for this plugin.
Contributors & Developers
“Lime Product Carousel Block” is open source software. The following people have contributed to this plugin.
Мүчөлөрү
Translate “Lime Product Carousel Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Өзгөртүүлөр
1.0.0
- Initial release.