如何自定義 WooCommerce 類別頁面（插件和編碼）

您想編輯您的類別頁面嗎？ 在本指南中，我們將向您展示使用和不使用插件自定義 WooCommerce 類別頁面的不同方法。

類別頁面通常是電子商務商店中最容易被忽視和最少定制的頁面之一。 這是因為它通常充當產品和商店頁面之間層次結構的橋樑。 但是，在一些實際場景中，用戶依賴類別頁面來瀏覽產品，因此對其進行編輯並充分利用它是有意義的。

在我們了解在 WooCommerce 中自定義類別頁面的不同方法之前，讓我們更好地了解這樣做的好處。

為什麼要編輯 WooCommerce 類別頁面？

類別頁面顯示包含在該類別中的 WooCommerce 商店的所有產品。 儘管用戶通常使用其他頁面查找產品，但有時客戶會發現從類別頁面查找項目更容易。 例如，如果您不確定產品的名稱但知道其類別，您可能會使用類別頁面搜索產品。

最重要的是，如果您的客戶受到類別頁面的積極影響，他們可能會在您的網站上停留更長時間。 由於這些頁面通常被忽略，如果您自定義它們，您將脫穎而出並改善客戶體驗。

好消息是 WooCommerce 允許您輕鬆自定義類別頁面。 壞消息是 WooCommerce 提供的默認選項非常有限。 您只能編輯每個類別頁面的名稱、slug、父類別、描述文本、顯示類型和縮略圖。

您還可以使用主題定制器編輯其他元素，但如果您需要將類別頁面提升到一個全新的水平，則需要其他內容。

這就是為什麼在本指南中，我們將向您展示在 WooCommerce 中編輯類別頁面並幫助您的客戶更輕鬆地瀏覽您的網站的不同方法。

如何自定義 WooCommerce 類別頁面

有多種方法可以在 WordPress 中輕鬆自定義您的 WooCommerce 類別頁面：

1. 與迪維
2. 使用專用插件
3. 以編程方式（編碼）

在本節中，我們將逐步介紹每種方法，以便您選擇最適合您需求的方法。

注意：在開始之前，請確保您已正確設置 WooCommerce 並創建了所有必要的頁面。

1. 使用 Divi 自定義 WooCommerce 類別頁面

Divi是最受歡迎的 WordPress 主題之一，這是有充分理由的。 它具有許多功能，並且與 WooCommerce 完全兼容，這使其成為自定義類別頁面的理想選擇。

這個主題帶有一個內置的拖放構建器，允許您創建自定義類別頁面模板。 這樣，您可以為類別頁面創建模板，並將其用於您的 WooCommerce 商店中的所有頁面。

Divi 如此易於使用的原因在於，您可以通過實時預覽實時查看您使用構建器所做的所有更改。 Divi 還提供了各種模塊，可以輕鬆地將許多元素添加到您的頁面，幫助您在創建或編輯類別頁面時節省大量時間。

1.1。 安裝並激活 Divi

要開始使用 Divi，您需要先安裝並激活它。 您可以從他們的官方網站下載 Divi zip 文件。

然後，轉到您的 WordPress 儀表板並前往外觀 > 主題>添加新的。

按上傳主題並選擇最近下載的 Divi .zip 文件上傳到您的網站。 上傳後，單擊立即安裝以安裝主題並在安裝完成後激活它。

激活 Divi 主題還將自動安裝 Divi 構建器，它是我們將用於自定義類別頁面的內置頁面構建器。

1.2. 創建自定義類別頁面模板

要開始創建自定義類別頁面模板，您需要轉到Divi > Theme Builder並按Add New Template 。

然後，勾選存檔頁面下的所有產品類別頁面框，然後單擊創建模板。

之後，在您剛剛添加的新模板上選擇添加自定義正文。 由於我們正在使用 Divi 創建一個全新的模板，因此還要選擇Build Custom Body選項。

您將在那裡看到 3 個不同的選項：

• 從頭開始構建您的模板
• 使用 Divi 庫中的模板之一，並進一步使用它來自定義您的 WooCommerce 類別頁面
• 克隆現有頁面並將其用作所有產品類別頁面的模板

您可以選擇最適合您的任何選項。 對於本教程，我們將選擇從頭開始構建，因此我們點擊開始構建按鈕。

您將被重定向到類別頁面佈局，您將在其中使用 Divi Builder 創建模板。

要開始構建模板，您需要選擇結構。 在New Row下，選擇類別頁面所需的行類型。 您可以添加多行和多列。 類別頁面標題和正文至少需要 2 行，但如果要在類別頁面正文上添加側邊欄，也可以有更多列。

選擇行數和列數後，您將不得不添加 Divi 模塊以進一步自定義類別頁面佈局。

1.3. 類別頁眉

對於類別頁面標題，您需要為類別頁面添加頁面標題和麵包屑。

要添加帖子標題，請單擊行中的“ + ”圖標，在搜索欄中搜索帖子標題，然後選擇它。

您將看到不同的帖子標題選項。 您可以添加元圖像和特色圖像，但我們不會在本教程中使用它們，因此我們將禁用元素部分下的顯示元和顯示特色圖像選項。

值得注意的是，您無需在此處添加任何標題，因為它會在您預覽網站時自動顯示動態帖子標題。 此外，在“設計”選項卡中，您可以編輯標題的背景顏色和字體。

還有一些高級選項可以添加 CSS ID、類、自定義 CSS、滾動效果等。 完成所有必要的更改後，單擊“勾號”圖標以保存更改。

1.3.1 - 添加麵包屑模塊

您還需要一個麵包屑模塊以在類別頁面中進行額外導航，因此再次單擊“ + ”圖標以添加新模塊並蒐索“ Woo Breadcrumb ”。

然後，在“內容”選項卡下的“產品”部分中選擇“本產品”選項。 這將為您的客戶希望看到的產品類別添加動態標題。

再次使用“設計”和“高級”選項卡進行必要的更改，最後單擊“勾號”圖標以保存更改。

1.4. 類別頁面正文

完成標題編輯後，您可以轉到類別頁面正文。 如果您還沒有添加行，請單擊綠色的“ + ”圖標並選擇要添加的行類型。 之後，您需要在此處添加商店模塊，因為它包含您商店的所有產品。

按行中的“ + ”圖標並蒐索Shop模塊。

單擊它後，您將能夠在類別頁面上為您的產品配置選項。

在“內容”選項卡中，您可以編輯類別頁面的所有元素。 確保啟用“使用當前頁面”以顯示客戶在您的在線商店中選擇的特定產品類別的產品。

現在您需要做的就是編輯頁面的其他顯示元素。 例如，您可以從此處添加每頁顯示的列數或產品數和分頁數。 此外，您還可以從“設計”和“高級”選項卡中編輯產品和價格文本的字體等等。 完成所有必要的更改後，按“勾號”圖標保存更改。

您可以使用 Divi Builder 添加更多行或自定義頁腳區域，只需記住在完成所有操作後將頁面模板正文保存在屏幕的右下角。

保存更改後，關閉 Divi Builder，您將被重定向到 Theme Builder 儀表板。 單擊此處保存更改以將更改保存到您的模板。

現在，當您預覽任何產品類別的類別頁面時，您將能夠看到您的所有更改。

2. 使用插件自定義 WooCommerce 類別頁面

如果您不使用 Divi 並且不想替換當前主題，則編輯 WooCommerce 類別頁面的最佳選擇是使用專用的 WordPress 插件。

在本教程中，我們將使用類別編輯器插件，因為它是免費的、易於使用的，並且可以讓您單擊幾下即可自定義類別頁面。 該工具主要針對類別頁面的描述區域，並為您提供了一個編輯器。 這樣，您可以編輯產品類別的描述以在類別頁面上顯示它們。

要開始使用此插件，請在您的 WordPress 儀表板中轉到Plugins > Add New 。 然後，搜索Category Editor ，單擊Install Now，然後激活插件。

您也可以通過直接從 WordPress 存儲庫下載插件來手動安裝它。 如果您想了解有關此過程的更多信息，可以查看我們的指南，了解如何手動安裝插件。

激活類別編輯器後，轉到產品 > 類別，然後在要自定義描述的類別上按編輯。

在這裡，您將看到一個文本編輯器已添加到描述區域，您可以在其中更改文本字體、標題、列表和對齊方式。 此外，您可以添加類別圖像並使用“文本”選項卡通過一些代碼自定義類別描述。

完成所有必要的更改後，按更新並在類別頁面上預覽更改。

這就是您可以使用插件自定義 WooCommerce 類別頁面的方式。 但是，如果您想要更多自定義選項並具有編碼技能，您可以編寫自己的解決方案。 讓我們來看看如何做到這一點。

3. 以編程方式自定義 WooCommerce 類別頁面

如果您不使用 Divi 並且不想安裝任何第三方工具，那麼編寫自己的解決方案是一個很好的選擇。 以編程方式編輯類別頁面的主要優點是它為您提供了更大的靈活性。

即使您不是經驗豐富的開發人員，WooCommerce 也為您提供了幾個簡碼和簡碼屬性來幫助您完成此過程。 如果您不熟悉短代碼，請查看本指南以更好地了解如何使用它們。

使用這些簡碼，您可以在任何頁面上顯示產品類別：

• [ product_category ] – 顯示特定的產品類別
• [ product_categories ] – 顯示您商店的所有產品類別

您可以將它們與產品類別屬性一起使用來修改它們顯示產品類別的方式。 例如，如果要顯示頂級產品類別並隱藏子類別，可以使用以下簡碼：

[ product_categories number="0" parent="0" ]

預覽頁面後，您將能夠看到頂級類別。

此外，您還可以使用各種代碼片段在 WooCommerce 中編輯您的類別頁面。 最常見的示例之一是創建自定義類別。

在我們向您展示如何操作之前，請確保您備份您的 WordPress 網站並使用子主題。 我們將更改一些核心主題文件，因此如果出現問題，您可能會破壞您的網站。 這就是為什麼始終建議您擁有可以恢復的備份版本以避免任何問題的原因。

創建自定義類別頁面標題

要使用代碼片段創建自定義類別頁面標題，您需要轉到外觀 > 主題編輯器並將以下代碼片段添加到子主題的functions.php文件中。

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

有關該片段的更多信息，請查看此站點。

這樣，您可以在類別頁面上顯示自定義標題而不是默認類別標題。

更改產品類別頁面的背景

同樣，您也可以使用代碼片段更改產品類別頁面的背景。 只需將以下代碼片段再次粘貼到funtions.php文件中。

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

代碼檢查元素是否為產品類別並更改背景顏色。 有關更多信息，請查看此網站。

這些只是幾個示例，但您可以做的還有很多。 隨意將此片段作為基礎並添加您自己的自定義代碼來自定義商店中的類別頁面。

獎勵：將快速視圖添加到類別頁面

自定義 WooCommerce 類別頁面的另一個有趣選項是添加快速查看功能。 快速查看將允許您的客戶在相應類別頁面上查看產品詳細信息，而無需打開實際的產品頁面。 這將為購物者在瀏覽您的在線商店時提供更好的用戶體驗。

要向類別頁面添加快速查看功能，我們將使用WooCommerce Direct Checkout插件。 它是 WooCommerce 的最佳結帳插件之一，具有大量功能，可幫助您提高轉化率和銷售額。

儘管這是一個免費增值插件，但要快速查看類別頁面，您需要安裝免費版本和高級計劃之一。 因此，首先，前往此頁面安裝並激活 WooCommerce Direct Checkout。

安裝並激活插件後，前往 WordPress 儀表板中的WooCommerce > Direct Checkout > Archives 。 通過從下拉列表中選擇是激活添加快速查看按鈕選項，然後保存更改。

如果您從前端檢查您的網站，您會看到“立即購買/添加到購物車”按鈕旁邊出現了一個新按鈕。 例如，對於那些使用 Storefront 主題的人來說，按鈕看起來像這樣。

當您單擊快速查看按鈕時，將打開一個彈出窗口，其中包含有關產品的所有最重要信息，例如標題、價格、描述等。 這樣，客戶可以直接將產品添加到他們的購物車，而無需打開產品頁面。

您可以進一步自定義快速查看按鈕和彈出窗口。 有關如何執行此操作的更多信息，請查看我們的指南，了解如何在 WooCommerce 中添加快速視圖。

改進類別頁面的建議

如前所述，類別頁面的整體設計和界面對於發展您的在線商店非常重要。 這是一個非常有用的頁面，您可以在購買之前比較同一類別中的不同產品。

精心設計的類別頁面可以幫助您讓客戶在您的在線商店中停留更長時間。 他們在您的商店獲得的體驗越好，他們就越有可能購買並成為忠實客戶。

為確保您充分利用您的類別頁面並從競爭對手中脫穎而出，以下是一些將它們提升到新水平的建議。

1.添加大產品圖片

說到網上購物，一張圖片值一千個字。 購物者希望在訪問產品頁面之前看到他們感興趣的產品的大而清晰的圖像。

但是，這並不意味著您應該在類別頁面中使用非常大的產品圖片。 非常大的圖像往往會更重並使您的網站變慢，因此在大圖像和網站速度之間找到一個很好的平衡點。

例如，您可以使用圖像大小為300-400 像素的 3 列類別頁面。 這應該足以在中等大小的顯示器或移動設備上顯示所需的產品詳細信息。

你可以在耐克的分類頁面上看到一個很好的例子，它是最著名的運動服裝品牌之一。 耐克使用足夠清晰的大圖片作為產品縮略圖。

此外，請記住，如今在線購物已廣泛在移動設備上進行。 確保在桌面和移動設備上測試您的類別頁面，以便尺寸和設計適合每種屏幕尺寸。

2.使用有吸引力的標題圖片

我們都知道第一印像很重要，在網上購物時更是如此。 當客戶打開類別頁面時，他們首先註意到的是頁面的標題。 這就是為什麼您應該確保為每個類別使用有吸引力的標題。

創建有吸引力的標題的最佳方法之一是添加標題圖像。 請記住您網站的整體設計，並將標題圖片與您在線商店的整體配色方案相匹配。

例如，您可以在 MAC Cosmetics 等許多面向時尚的在線商店中找到標題圖片。

如您所見，MAC 使用了一種非常有創意的方式來顯示標題圖像。 類別標題圖像由其圖像組成，並且還將深色方案與標題菜單相匹配。

3.始終保持麵包屑可見

麵包屑是確保您的網站訪問者位於正確位置的最有用的元素之一。 麵包屑導航還可以幫助用戶瀏覽您的網站，從而幫助他們更快地找到他們正在尋找的內容並改善他們的購物體驗。

在瀏覽產品時，有時客戶會點擊不同的東西，可能會在您的商店中迷路。 通過讓麵包屑始終可見，用戶可以立即看到他們所在的位置並輕鬆返回所需的類別。

一些網站更喜歡在側邊欄顯示類別，但大多數在線商店使用導航路徑，因為客戶更容易回到他們之前的位置。

如果您已經按照上面的 Divi 教程進行操作，那麼顯示麵包屑不會成為問題。 如果您使用不同的主題，請查看本指南以了解如何在每個頁面上添加和顯示麵包屑。

4. 檢查產品是否在正確的類別中

儘管這看起來很明顯，但手動添加產品時可能會發生錯誤。 因此，這一點與其說是建議，不如說是提醒。

進行例行檢查以確保所有產品都分配到正確的類別並且沒有混淆。 您不需要每天都檢查，但偶爾檢查一次很重要。 您還可以檢查產品、類別和描述的拼寫錯誤。

產品或其類別的任何錯誤都可能影響訪問者對您網站的印象。 如果您在瀏覽網上商店並在筆記本電腦類別中發現一些牛仔褲，您會怎麼想？ 不時進行檢查不會花費太多時間，並且會幫助您保持一切井井有條。

如果您想進一步改善您的電子商務商店，請查看我們的 WooCommerce 提示以優化您的在線商店。

結論

總而言之，您的類別頁面在您的商店中起著重要作用。 為了從競爭對手中脫穎而出，您應該自定義您的 WooCommerce 類別頁面並充分利用它。 同樣，您還可以編輯您的商店、產品、我的帳戶和結帳頁面，以便在您訪問時改造您的整個商店。

最後，我們討論了編輯類別頁面的不同方法：

• 與迪維
• 使用專用插件
• 以編程方式

我們希望本指南對您有用，您可以輕鬆地編輯您的類別頁面。 此外，我們還為您提供了額外提示，可在您的類別頁面上添加產品快速視圖。

最後，我們還看到了一些建議，以改進您的類別頁面並使用更好的圖像提高您的轉化率，並使麵包屑始終可見。

如果本教程有用，我們建議您也看看以下教程：

• 如何在 WooCommerce 中隱藏和刪除“添加到購物車”按鈕
• 自定義 WooCommerce 購物車頁面
• 如何向 WooCommerce 結帳添加費用