如何自訂 WooCommerce 商店頁面（結帳和產品）？

您能怪罪 WooCommerce 沒有自訂商店、產品或結帳頁面的進階選項嗎？當然，你不應該。事實上，最好使用外掛程式添加更多自訂功能，以及 WooCommerce 的免費擴充功能。

目錄

• WooCommerce 商店頁面定制
• 自訂 WooCommerce 產品
• 使用自訂欄位設計結帳頁面

WooCommerce 商店頁面定制

簡而言之，在 WooCommerce 中設定和調整商店頁面將透過以下 4 個步驟完成：

如何自訂店舖頁面？

1. 選擇頁面

   要顯示商店頁面，需要擁有它。它可以是現有頁面或新頁面。

   

2. 自訂產品目錄選項

   產品頁面可以在外觀選單→自訂→WooCommerce→產品目錄中設計。

   

3. 將頁面新增至選單或小工具

   WooCommerce 允許在選單或/和小工具中顯示產品目錄的連結（外觀 → 選單/小工具）。

   

4. 產品目錄定制

   還有更多選項可以調整頁面嗎？

   是的。例如，CSS 樣式、新增內容、短代碼、重定向或自訂程式碼。

   因此，可以使用新的部分或元素來增強標準頁面佈局。

   

   

自訂 WooCommerce 產品

使用 WooCommerce 的一個明顯部分是添加新產品。預設情況下，可以使用屬性和變體。屬性將在附加資訊中可見（取決於主題）。

當然，變體可以提供幫助（它們也使用屬性）：

但為了建立具有更多可自訂選項和自訂欄位的產品，僅靠 WooCommerce 是不夠的。

正如我在簡介中提到的，有一些構建塊可以擴展 WooCommerce 功能，稱為插件。還有一個免費外掛可以新增自訂欄位並自訂 WooCommerce 產品頁面。

如何使用外掛程式自訂 WooCommerce 產品頁面？

下載、安裝並啟動擴充功能後，只需幾個步驟即可調整產品頁面。

1. 為特定產品新增欄位組

   首先，可以為新欄位選擇一個或多個產品（如下面的螢幕截圖所示）。

2. 選擇欄位位置

   此外，該外掛程式允許在「新增至購物車」按鈕之前或之後顯示新產品選項。

   

3. 使用自訂欄位調整 WooCommerce 產品頁面

   該插件的核心功能是新增欄位。在靈活產品欄位的免費版本中，有 18 種欄位類型。

   

   每個欄位都有其設置，例如標籤、佔位符、工具提示、CSS 類別、最大字元數等。

   

4. WooCommerce 產品頁面自訂 - 範例

   一個或多個產品的最終效果（使用免費插件）。

   

如您所見，可以使用免費外掛程式自訂 WooCommerce 產品頁面。您可以下載它或在 WordPress 儲存庫中閱讀更多內容。

總而言之，靈活的產品欄位外掛程式允許在 WooCommerce 中建立自訂產品。

使用自訂欄位設計結帳頁面

此外，WP Desk 還有一個免費外掛程式來自訂 WooCommerce 結帳頁面。

靈活的結帳欄位允許管理現有欄位以及將新的自訂欄位新增至結帳頁面。

WooCommerce 結帳頁面自訂快速指南

（安裝並啟用插件後）

1. 預設結帳表單

   標準（經典）結帳頁麵包含預先定義欄位。

   

2. 調整表格

   透過刪除或新增字段，可以自訂 WooCommerce 結帳頁面。

   

3. 重新排列和管理結帳字段

   可視化結帳頁面編輯器允許快速定製表單。免費插件支援 10 多個自訂欄位。

   

4. 結帳時字段較少

   看看最終的效果——一個更簡單的形式。

   

概括

自訂 WooCommerce 的方法有很多種，包括調整商店頁面、產品頁面和結帳表單。使用免費插件，無需編寫自訂程式碼。