單一商品區塊

使用 WooCommerce 的單一商品區塊,可以在網站的任何位置展示單一商品,無論是登陸頁面、部落格文章或首頁。

此區塊將完整的商品體驗帶入 WordPress 區塊編輯器,讓你能夠顯示關鍵商品資訊,例如商品圖片、價格、描述、評價以及「加入購物車」按鈕,全部整合在一個視覺吸引力的元素中。這是突顯特定商品並提升轉換率的強大方式,同時不需要讓客戶離開當前頁面。

內部區塊

單一商品區塊由多個內部區塊組成。所有內部區塊都支援即時更新,因此客戶在精煉搜尋時不需等待頁面重新整理。

現在我們已探索了每個內部區塊的用途,讓我們深入了解各別設定,更好地理解如何自訂和控制其在單一商品區塊中的外觀和行為。

商品圖片區塊

商品圖片區塊顯示商品的主要圖片,是單一商品區塊中的關鍵視覺元素。此區塊幫助客戶快速了解商品的視覺外觀,並可選擇性地連結至完整商品頁面。

區塊設定

• 圖片尺寸:以像素手動定義圖片尺寸。留空以使用主題或 WooCommerce 設定的預設圖片尺寸。
• 連結至商品頁面:啟用時,點擊商品圖片將會帶客戶前往原始商品頁面。
• 顯示促銷徽章:啟用時,如果商品目前有折扣,圖片上會顯示「促銷」徽章。
• 促銷徽章對齊:左、中、右:選擇「促銷」徽章在圖片上的位置——左、中或右。根據版面配置或視覺設計偏好進行對齊。
• 圖片尺寸選項:選擇是否要以完整尺寸顯示商品圖片,或偏好顯示裁切版本。
  • 完整尺寸:顯示上傳的完整圖片。
  • 裁切:根據主題的圖片裁切設定,將圖片修剪為統一顯示尺寸。

商品標題區塊

商品標題區塊顯示商品名稱,在商品識別、無障礙性和 SEO 中扮演關鍵角色。配置為可點擊連結時,有助於引導購物者前往商品頁面。

區塊設定

• 將標題設為連結:啟用時,商品標題會變成可點擊的連結,引導訪客前往原始商品頁面。
• 在新分頁開啟:決定連結是否在新瀏覽器分頁開啟。當你希望使用者停留在當前頁面,同時仍能存取更多商品詳情時,這很有用。
• 連結 Rel:允許你定義連結的 rel 屬性(例如 nofollow、noopener、sponsored)。

商品評分區塊

商品評分區塊以星級格式顯示商品的平均客戶評分。此區塊是快速建立信任的工具,讓潛在客戶了解商品的受歡迎程度和滿意度。

區塊設定

• 文字顏色:自訂星級和星級旁文字(例如評價數量)的顏色。
• 排版與尺寸:可進一步設定區塊的排版和尺寸。

商品價格區塊

商品價格區塊顯示商品的目前價格,適用時包含促銷價格。

區塊設定

• 文字顏色:更改價格文字的顏色以更好地配合網站設計。
• 背景顏色:調整價格標籤後方的背景顏色,增加視覺強調。
• 排版與尺寸:可進一步設定區塊的排版和尺寸。

商品摘要區塊

商品摘要區塊顯示商品的簡短描述,從商品的簡短描述欄位提取。

區塊設定

• 最大字數:限制顯示的字數。如果設定為特定數字,僅顯示第一段直到該限制。設定為 0 以顯示完整摘要。
• 若為空則顯示描述:啟用時,如果商品的簡短描述為空,區塊會退回顯示完整商品描述。
• 連結至描述:新增按鈕,直接帶購物者前往商品頁面上的商品描述區段。
• 排版與尺寸:可進一步設定區塊的排版和尺寸。

加入購物車(含選項)區塊

在 WooCommerce 10.0 之前,單一商品區塊和單一商品範本區塊附帶經典版本的加入購物車(含選項)區塊。提供簡化體驗,包含關鍵選項——數量選擇器和「加入購物車」按鈕。

區塊設定

• 數量選擇器:選擇購物者如何選擇數量:
  • 輸入欄位:數字輸入欄位,客戶可輸入數字。
  • 步進器:加減按鈕以增加或減少數量。

WooCommerce 10.0 推出的 Add to Cart + Options (Beta) 區塊提供完全區塊化、可自訂的加入購物車表單。可切換至此新區塊以進行更多自訂。

商品後設資料區塊

商品後設資料區塊顯示商品的 SKU、分類、標籤和其他後設資料。預設顯示 SKU、分類和標籤。

商品 SKU

商品 SKU 區塊顯示商品的 SKU。

商品分類區塊

商品分類區塊顯示商品所屬的分類清單。

區塊設定

• 轉換為變體:使用下拉選單將分類法從_商品分類_更改為_商品標籤、品牌等_。

• 樣式:在預設和膠囊形狀的標籤樣式之間選擇。
• 顏色:自訂文字、背景和連結顏色,改善視覺整合。

商品標籤區塊

商品標籤區塊顯示商品標籤以進行進一步分類和篩選。

區塊設定

• 轉換為變體:使用下拉選單將分類法從_商品標籤_更改為_商品分類、品牌等_。
• 樣式:在預設和膠囊形狀的標籤樣式之間選擇。
• 顏色:自訂文字、背景和連結顏色,改善視覺整合。

排版設定

單一商品區塊內的所有內部區塊都附帶一組設計控制項,允許在內容中進行一致的樣式設定。包括:

• 字型:選擇特定字型(基於主題可用字型)或保留為_預設_。
• 尺寸:選擇預設尺寸(S、M、L、XL、XXL)或使用自訂控制項進行精確縮放。
• 外觀:如果主題支援多種字型外觀(例如粗體、斜體、細體),調整文字粗細和樣式。
• 行高:修改行間的垂直間距以提升可讀性。
• 字元間距:控制個別字元之間的空間。用於細微的設計調整。
• 文字裝飾:為標題或價格新增底線、刪除線或無裝飾等樣式。
• 字母大小寫:根據設計偏好將文字轉換為大寫、小寫或標題大小寫。
• 尺寸:微調每個區塊元素內部和周圍的內距和邊距間距。

• 寬度設定:
  • 適配:自動調整至內容寬度。
  • 擴展:擴展以填滿可用空間。
  • 固定:讓你設定特定寬度。
• 邊框控制:
  • 新增可自訂粗細的邊框。
  • 使用圓角選項將區塊角落圓滑化,呈現更柔和、現代的外觀。

這些版面配置和排版選項在自訂商品呈現以配合品牌風格或對齊不同頁面區段時特別有用。