Title: Lime Product Carousel Block Author: Limewoo Published: 2026 年 5 月 18 日 Last modified: 2026 年 5 月 21 日 --- 搜尋外掛 ![](https://ps.w.org/lime-product-carousel-block/assets/banner-772×250.png?rev=3535318) ![](https://ps.w.org/lime-product-carousel-block/assets/icon-256×256.png?rev=3535324) # Lime Product Carousel Block 由 [Limewoo](https://profiles.wordpress.org/limewoo/) 開發 [下載](https://downloads.wordpress.org/plugin/lime-product-carousel-block.1.0.0.zip) * [詳細資料](https://tw.wordpress.org/plugins/lime-product-carousel-block/#description) * [使用者評論](https://tw.wordpress.org/plugins/lime-product-carousel-block/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/lime-product-carousel-block/#installation) * [開發資訊](https://tw.wordpress.org/plugins/lime-product-carousel-block/#developers) [技術支援](https://wordpress.org/support/plugin/lime-product-carousel-block/) ## 外掛說明 **Lime Product Carousel Block** adds a native Gutenberg block to showcase your WooCommerce products in a smooth, responsive carousel. Built with [Embla Carousel](https://www.embla-carousel.com/)— 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](https://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](https://github.com/Limewoo/lime-product-carousel-block) **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. ## 螢幕擷圖 [⌊Product carousel on the frontend — showing newest products with sale badges, ratings, and AJAX cart buttons.⌉⌊Product carousel on the frontend — showing newest products with sale badges, ratings, and AJAX cart buttons.⌉[ Product carousel on the frontend — showing newest products with sale badges, ratings, and AJAX cart buttons. [⌊Block editor with live server-side preview.⌉⌊Block editor with live server-side preview.⌉[ Block editor with live server-side preview. [⌊Inspector panel — Options tab: query type, order, slide counts, autoplay, card toggles.⌉⌊Inspector panel — Options tab: query type, order, slide counts, autoplay, card toggles.⌉[ Inspector panel — Options tab: query type, order, slide counts, autoplay, card toggles. [⌊Inspector panel — Styles tab: accent color, title, price, and button style controls.⌉⌊ Inspector panel — Styles tab: accent color, title, price, and button style controls .⌉[ Inspector panel — Styles tab: accent color, title, price, and button style controls. ## 適用於區塊編輯器 這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。 * Lime Product Carousel Display WooCommerce products in a carousel by newest products, on-sale items, or category. ## 安裝方式 **From WordPress admin (recommended):** 1. Go to **Plugins Add New**. 2. Search for **Lime Product Carousel Block**. 3. Click **Install Now**, then **Activate**. **Manual upload:** 1. Download the plugin zip. 2. Go to **Plugins Add New Upload Plugin**. 3. Upload the zip, then click **Install Now** and **Activate**. **After activation:** 1. Open any page or post in the block editor. 2. Click **+** to add a block, then search for **Lime Product Carousel**. 3. 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_Query` throughout — 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_ttl` filter: ``` 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. ## 使用者評論 這個外掛目前沒有任何使用者評論。 ## 參與者及開發者 以下人員參與了開源軟體〈Lime Product Carousel Block〉的開發相關工作。 參與者 * [ Limewoo ](https://profiles.wordpress.org/limewoo/) * [ The Nahidul ](https://profiles.wordpress.org/thenahidul/) [將〈Lime Product Carousel Block〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/lime-product-carousel-block) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/lime-product-carousel-block/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/lime-product-carousel-block/)， 或透過 [RSS](https://plugins.trac.wordpress.org/log/lime-product-carousel-block/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/lime-product-carousel-block/)。 ## 變更記錄 #### 1.0.0 * Initial release. ## 中繼資料 * 版本 **1.0.0** * 最後更新 **2 個月前** * 啟用安裝數 **少於 10 次** * WordPress 版本需求 ** 6.5 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0.1** * PHP 版本需求 ** 8.0 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/lime-product-carousel-block/) * 標籤: * [block](https://tw.wordpress.org/plugins/tags/block/)[carousel](https://tw.wordpress.org/plugins/tags/carousel/) [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/)[products](https://tw.wordpress.org/plugins/tags/products/) [woocommerce](https://tw.wordpress.org/plugins/tags/woocommerce/) * [進階檢視](https://tw.wordpress.org/plugins/lime-product-carousel-block/advanced/) ## 評分 這個項目尚無任何評論記錄。 [Your review](https://wordpress.org/support/plugin/lime-product-carousel-block/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/lime-product-carousel-block/reviews/) ## 參與者 * [ Limewoo ](https://profiles.wordpress.org/limewoo/) * [ The Nahidul ](https://profiles.wordpress.org/thenahidul/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/lime-product-carousel-block/)