外掛說明
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_ttlfilter - 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:
- 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.
螢幕擷圖
適用於區塊編輯器
這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。
- 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.
常見問題集
-
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.
使用者評論
這個外掛目前沒有任何使用者評論。
參與者及開發者
變更記錄
1.0.0
- Initial release.