Add to Cart + Options 區塊
Add to Cart with Options 區塊顯示「加入購物車」按鈕以及數量選擇器,並根據商品類型顯示額外的選擇輸入。此區塊讓顧客直接以選擇的設定將商品加入購物車。
WooCommerce 10.0 推出的全新 Add to Cart + Options (Beta) 區塊提供完全區塊化、可自訂的加入購物車表單。可使用於 Single Product 範本或 Single Product 區塊內,適合複雜商品類型和彈性設計需求。
功能
新區塊具備以下主要功能:
- 讓商品可在不重新載入頁面的情況下加入購物車,提供更流暢且快速的體驗
- 數量更新會即時反映在 Mini Cart、Product Collection 及此區塊中,無需重新整理
- 可使用藥丸檢視替代下拉選單,提供更具互動性的變體選擇體驗
Add to Cart + Options (Beta) Block
區塊結構
預設情況下,此區塊包含:
- Add to Cart Button:顯示按鈕以將設定的商品加入購物車。可自訂按鈕樣式,如填充樣式或外框
- Product Quantity (Beta):數量輸入欄位,顧客可在將商品加入購物車前使用
根據商品類型,會提供額外的選擇區塊:
Variable Products
- Variation Selector: Attribute Name (Beta):自訂屬性名稱的顯示方式(例如「顏色」、「尺寸」)。可從區塊設定配置顏色、尺寸和排版
- Variation Selector: Attribute Options (Beta):讓你將商品屬性值呈現為:藥丸或下拉選單
Add to Cart + Options (Beta) – Variable Products
Dynamic Variation Updates
WooCommerce v10.3.0 中,更新了 Add to Cart + Options 區塊,當選擇變體時,會自動更新相關商品區塊以顯示正確的變體資料。
例如,選擇變體會更新商品圖片以顯示所選變體的商品圖片。同樣地,如果變體設定為單獨銷售,Add to Cart + Options 區塊也會隱藏 Product Quantity 區塊。
Grouped Products
- Grouped Product Selector (Beta):顯示一組設定的商品,顧客可選擇並一起加入購物車
- 以網格樣式顯示,包含設定的群組商品的輸入選擇器、商品標題、商品價格和庫存
Add to Cart + Options (Beta) – Grouped Products