自訂商品頁面
商品頁面是客戶在決定是否購買前獲得商品最詳細視圖的地方。根據銷售內容,可能希望提供盡可能多的資訊以協助買家做出正確決定,或保持簡單以獲得緊密的轉換漏斗。透過 WooCommerce 商店編輯,可以使商店符合目的,無論商品為何。
本文涵蓋使用區塊主題時構成 WooCommerce 商品頁面的模板和區塊,以及如何為特定商品建立自訂商品頁面模板。
商品頁面模板
預設情況下,所有商品頁面都將使用 單一商品 模板,除非存在該商品的特定模板。還可以為特定商品建立自訂模板。
區塊
「單一商品」模板上的大多數區塊都很簡單,完全符合其名稱所述。這些區塊是動態的,顯示正在查看的當前商品的適當資訊。若要編輯特定商品的這些區塊顯示的內容,請直接編輯商品。(深入了解新增和管理商品。)
若要自訂模板以滿足商店需求,可以將區塊重新定位到版面配置中的另一個位置,或完全從模板中移除。「相關商品」區塊部分可以作為整體移動,但其內部區塊無法從相關區塊部分中移除。
由於許多這些區塊使用動態內容,單一商品頁面上的許多區塊沒有區塊層級設定或樣式。如果下面的區塊未提及設定或樣式,那是因為沒有可用的。
商店麵包屑
此區塊也用於商品目錄模板。在商店中新增麵包屑是 SEO 提升,並改善購物者的導航便利性。
區塊樣式
可以自訂文字和連結顏色,以及為商店麵包屑設定排版大小
商店通知
商店通知區塊是商店將顯示由 WooCommerce 或外掛產生的顧客通知的位置。例如,當項目成功新增至購物車時,通知將顯示在此處。商店通知區塊可以新增至網站的任何頁面或模板。
區塊樣式
由於不同類型的通知各有自己的樣式,此區塊沒有樣式設定。
商品圖片庫
新增至商品的圖片將在此區塊中以圖庫形式顯示。
商品標題
商品標題區塊顯示商品的標題。有設定可以更改標題的對齊方式,以及調整標題大小。區塊在側邊欄中有設定,可以將商品標題設為連結,將購物者導向商品頁面。
商品評分
商品評分區塊顯示從為其留下的評論中獲得的商品平均評分。可以調整文字顏色和大小,以及區塊的邊距。
商品價格
商品價格區塊顯示當前商品的價格。區塊有顏色、排版和尺寸設定,因此可以自訂價格的顯示方式。
商品摘要
商品摘要區塊顯示商品的簡短描述。如果未為商品輸入簡短描述,將顯示主商品描述的摘錄(如果太長則截斷)。
區塊樣式
區塊有顏色、排版和尺寸設定,因此可以自訂摘要的顯示方式。
帶選項的加入購物車
帶選項的加入購物車區塊顯示一個按鈕,供客戶將商品新增至購物車。顯示給客戶的選項根據商品類型而有所不同。例如數量選擇器、選擇變體的下拉選單。
商品中繼資料
商品中繼資料區塊是一個容器,預設情況下包含商品 SKU、商品類別和商品標籤區塊。這三個區塊各自顯示有關當前商品的所述中繼資料,並有顏色、排版和尺寸設定來控制其顯示。
商品詳細資訊
商品詳細資訊區塊在三個標籤中顯示商品的詳細資訊:
- 描述 標籤顯示在「編輯商品」頁面上輸入的完整商品描述。
- 其他資訊 標籤顯示商品的重量、尺寸和任何指派的商品屬性。
- 評論 標籤顯示已收集的商品評論,以及提交商品評論的表單(取決於設定)
這三個標籤中顯示的所有內容都是從商品資料動態填充的。
區塊樣式
商品詳細資訊區塊有樣式選項,可以傳統、盒裝方式顯示標籤,或以更簡約的顯示方式顯示。還有區塊邊距的尺寸控制。
相關商品
相關商品 區塊顯示與在單一商品頁面上查看的主商品相關的商品。包含一個標題區塊和一個商品模板,其中包含區塊以顯示相關商品的圖片、標題、價格和加入購物車按鈕。需要在新增至購物車前選擇選項的商品將有一個「選擇選項」按鈕,將購物者帶到該商品的頁面。深入了解選擇相關商品。
區塊設定
相關商品區塊及其內部區塊有設定來控制商品圖片和標題是否作為商品頁面的連結,是否顯示促銷商品的「促銷」徽章,以及排版、尺寸和相關商品部分欄數的設定。
操作方式: 為特定商品建立自訂商品頁面模板
除了自訂預設商品頁面模板外,如果想為特定商品建立專用模板怎麼辦?透過商店編輯,這很容易!
若要為單一商品建立自訂模板:
- 前往 外觀 > 編輯器 的網站編輯器。
- 點擊「模板」然後點擊加號以新增新模板。
- 選擇「單一項目: 商品」選項。
- 在出現的選單中,選擇此新模板應套用的特定商品。
- 如果想從預建樣式開始,在提示時選擇樣式。
- 編輯模板以滿足該特定商品的需求!
注意: 必須在建立自訂模板前將商品新增至商店。了解如何在 WooCommerce 中新增商品。