如何在 WooCommerce 商店頁面上顯示類別

已發表: 2021-12-16

擁有出色的商店設計的一個重要部分是能夠對您的產品進行分類。以正確的方式展示您銷售的產品可以對您的銷售產生重大影響。您的產品越容易訪問，您的客戶最終檢查併購買它們的機會就越大。這就是為什麼在本指南中，我們將向您展示在 WooCommerce 商店頁面上顯示類別的不同方式。

為什麼在商店頁面上顯示類別？

如果您銷售的產品種類繁多，您希望確保訪問者輕鬆找到他們想要的東西。這需要精心組織。一次展示所有產品可能會使購物者不知所措，並且可能是失去潛在客戶的一種簡單方法。相反，您應該考慮以有利於您的商店的方式組織您的商店頁面。

最好的方法之一是通過單獨顯示您的類別來充分利用您的商店佈局。通過這種方式，您的客戶可以專注於他們想要的產品類別，並且可以在他們感興趣的所有產品類型之間進行切換。這使得導航更加容易，從而使他們能夠快速找到他們想要的產品，從而帶來更多的銷售。

設置類別和特定類別

例如，如果您銷售電子產品，您希望確保您的智能手機、台式 PC、PC 部件和其他設備顯示在不同的類別中。這樣，如果客戶對計算機零件感興趣，他們可以查看該特定類別並在其中找到他們想要的東西。同樣，如果他們不確定他們需要的產品在哪個類別中列出，那麼參考同一類別中的其他產品可以幫助他們弄清楚這一點。

或者，您也可以在商店頁面上僅顯示特定類別的產品，以專注於較小的目錄。僅在您的商店頁面上宣傳特定產品，並在您銷售少量優質商品時幫助它們脫穎而出。

商店頁面的組織至關重要，因為對客戶友好的佈局會對您的銷售產生重大影響。考慮到這一點，讓我們看一下在WooCommerce 商店頁面上顯示類別的一些方法以及如何自定義它。

如何在 WooCommerce 商店頁面上顯示類別

在 WooCommerce 的商店頁面上顯示類別有多種方式：

使用儀表板中的主題定制器
使用簡碼
以編程方式

讓我們仔細看看每種方法。

注意：對於此演示，我們將使用 Storefront 主題，因此您的主題選項可能會略有不同。但是，大多數選項都是相似的，因此您不應該在遵循本指南時遇到問題。

1) 使用 WooCommerce 儀表板顯示類別

在您的商店頁面上顯示類別的最簡單方法是使用WooCommerce 設置。為此，在您的儀表板中，外觀 > 自定義，然後單擊定制器側邊欄上的WooCommerce > 產品目錄。

在 woocommerce 商店頁面上顯示類別 - WC 儀表板產品目錄

從這裡，您可以使用商店頁面顯示並選擇顯示類別或顯示類別和產品。

在 woocommerce 商店頁面上顯示類別 - WC 儀表板顯示類別和產品

第一個選項將僅在您的商店頁面上顯示您的產品類別，而第二個選項將顯示您的產品類別以及您的其他產品。例如，如果您在 Shop Page Display 下啟用Show Categories ，您的 Shop page 將僅顯示產品類別，如下所示：

但是，如果您選擇Categories 和 Products ，它將首先顯示您的 Categories，然後是您的產品目錄的其餘部分：

您還可以使用下面標記的類別顯示選項在您的產品類別頁面上顯示/隱藏產品子類別和產品。

對自定義感到滿意後，請記住單擊“發布”以保存更改。

這種方法最有用的事情之一是您可以實時預覽您的更改，這使得它易於使用。但是，它並沒有為您提供太多控制，因為您只有兩個選項。如果您想要更大的靈活性，請查看下一個方法。

2）使用簡碼顯示類別

如果您使用頁面構建器或自定義設計的商店頁面設置了自定義商店頁面，則可以啟用 WooCommerce 短代碼來顯示您的產品類別。與使用儀表板相比，這使您可以更好地控制要顯示的內容以及如何顯示您的產品類別。此外，您可以使用此方法在任何 WordPress 頁面或帖子上顯示您的類別。

為此，您只需將以下短代碼添加到您的商店頁面：

 [ product_categories ]

這將在您的商店頁面上顯示您的產品類別。但這還不是全部。您可以使用其他屬性來自定義簡碼。例如，您可以更改產品類別的順序、僅顯示父類別、隱藏空類別、定義類別數量等等。

要了解有關如何使用 WooCommerce 短代碼的更多信息，我們建議您查看這篇文章。有關您可以使用的所有類別屬性的更多信息，請查看此站點。

如果您使用的是 Gutenberg，只需轉到 Shop 頁面，添加短代碼塊並粘貼[ product_categories ]短代碼。

現在讓我們看看如何使用短代碼。如果您想在 WooCommerce 商店頁面上顯示類別，按類別 ID 升序排列，您可以使用以下短代碼：

 [ product_categories orderby = “id” order = “ASC” ]

在 woocommerce 商店頁面上顯示類別 - 自定義簡碼

這將顯示在您的商店頁面上，如下所示：

在 woocommerce 商店頁面上顯示類別 - 簡碼結果

如何在 WooCommerce 商店頁面上顯示特定類別

您還可以使用簡碼方法來顯示特定的 WooCommerce 產品類別。

要使用它，您需要使用產品類別的 slug。您可以在Products > Categories下查看您的 Category slug。

在 WooCommerce 商店頁面上顯示類別 - 產品標籤

了解特定產品的 slug 後，您可以在 Shop 頁面上使用它，如下所示：

 [ product category category=”slug” ]

只需將 slug 文本替換為相應的類別 slug。例如，如果 slug 是 Show，則短代碼將是：

在前端，您將看到如下內容：

您還可以使用可用於[ product categories ]的相同屬性進行進一步定制。

3) 以編程方式顯示類別

向 WooCommerce 商店頁面添加類別的另一種方法是使用一些代碼。建議具有編碼技能並能夠配置其主題文件的用戶使用此方法。除了 PHP 的知識外，建議您也對 CSS 有基本的了解。如果您對這些語言不滿意，我們建議您遵循上述方法。

由於我們將編輯一些核心文件，因此在您開始此過程之前，我們建議您備份您的網站並創建一個子主題（如果您還沒有）。如果您不確定如何操作，請查看一些最好的兒童主題插件。

現在事不宜遲，讓我們看看如何在 WooCommerce 商店頁面上顯示類別。

添加功能以在商店頁面上顯示類別

設置好子主題後，轉到Appearance > Theme Editor打開主題functions.php文件。到達那里後，單擊右側主題文件側欄上的functions.php文件。

在 WooCommerce 商店頁面上顯示類別 - 功能文件

現在您已準備好將以下腳本粘貼到編輯器以添加您的自定義函數。

此功能在加載您的商店頁面的其餘產品之前添加您的產品類別。這是在顯示產品目錄的其餘部分之前添加所有產品類別項目的好方法。

 功能產品子類別（$args = 數組（））{
$parentid = get_queried_object_id();

$args = 數組（
'父' => $parentid
);

$terms = get_terms('product_cat', $args);

如果（$條款）{
迴聲'<ul class="product-cats">';

foreach ( $terms 作為 $term ) {
迴聲'<li class="category">'; 
woocommerce_subcategory_thumbnail( $term );
迴聲'<h2>';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
迴聲$術語->名稱；
迴聲'</a>';
迴聲'</h2>';
迴聲'</li>';
}

迴聲'</ul>';
}

}

add_action('woocommerce_before_shop_loop', 'product_subcategories', 50);

如上所述，此功能會將您的類別部分添加到您的 WooCommerce 商店頁面。但是，它可能看起來不像您想要的那樣，並且可能與您網站的風格不匹配。這是因為您仍然需要為新創建的類別部分設置樣式。

為您的自定義類別部分設置樣式

現在讓我們將可定制的 CSS添加到主題定制器的附加 CSS部分。在您的 WordPress 儀表板中，轉到外觀 > 自定義以打開主題自定義程序菜單，然後單擊附加 CSS。

在 woocommerce 商店頁面上顯示類別 - 定制器附加 CSS

然後，將以下 CSS 片段粘貼到Additional CSS 部分並對其進行自定義，使其與您的網站樣式相匹配。

可以想像，如果您了解 CSS，您將有更多選擇。如果您不確定如何添加代碼，請查看我們的指南，了解如何將 CSS 添加到 WordPress。

以下片段將更改圖像的大小和圖像下的文本。此代碼是一個示例，因此請隨意自定義它們並為它們提供適合您網站的樣式以設置您的類別部分。

 ul.product-cats {
左邊距：0；
}

ul.product-cats li {
列表樣式：無；
左邊距：0；
邊距底部：4.236em；
文本對齊：居中；
位置：相對；
}

ul.product-cats li img {
邊距：0 自動； 
}

@媒體屏幕和（最小寬度：768px）{

ul.product-cats li {
寬度：29.4117647059%；
向左飄浮;
邊距右：.8823529412%；
}

ul.product-cats li:nth-of-type(3) {
右邊距：0；
}
}

完成更改後，更新定制器設置，您的商店頁面應更新為新類別部分。

獎勵：改善商店頁面的其他方法

您可以應用其他更改來確保您的商店頁面盡可能對客戶友好。這包括管理顯示的產品數量、添加評分最高的產品部分等等。我們的想法是讓您的產品易於找到並為您的客戶提供更好的購物體驗。讓我們看一下如何自定義商店頁面以提高銷售額。

首先，讓我們看看如何在產品類別下添加最受歡迎的產品列表。

如何在 WooCommerce 商店頁面上顯示最受歡迎的產品

除了添加您的產品類別外，您還可以使用簡碼添加自定義產品目錄。這包括您可以使用此短代碼顯示的最受歡迎產品部分：

 [ products orderby="popularity" ]

如前所述，您可以添加可以在此處找到的簡碼屬性。

要將最受歡迎的產品部分添加到您的商店頁面，您只需添加以下短代碼。在本例中，我們添加了一些屬性以在兩列中顯示產品。

 [ products orderby="popularity" class="m-popular" columns="2" limit="2" ]

在 WooCommerce 商店頁面上顯示類別 - 獎金最高

此外，您可以使用簡碼添加多個部分，例如特價產品、暢銷產品、評分最高的產品等：

[ best_selling_products ]
[ top_rated_products ]
[ recent_products ]

最好的部分是您可以在商店頁面的不同部分使用這些短代碼並自定義它們添加屬性。這樣，您可以控製商店頁面的流量並增加銷售額。

這些只是幾個示例，但您可以做更多的事情來充分利用您的商店頁面。要了解更多信息，請查看我們關於如何自定義 WooCommerce 商店頁面的完整指南。

結論

總之，您在商店頁面上展示產品的方式會對您的銷售產生很大影響。這就是為什麼顯示類別和巧妙地組織您的產品是每個店主必須的。

在本教程中，我們向您展示了在 WooCommerce 商店頁面上顯示類別的不同方式：

使用主題定制器下的 WooCommerce 設置
使用簡碼
使用自定義函數和一些 CSS 來自定義它

如果您想要一個簡單的解決方案，您可以使用 WordPress 儀表板中的選項。但是，該方法不提供許多自定義選項。另一種選擇是使用您可以自定義的簡碼。但是，如果您想要更大的靈活性並具備編碼技能，則可以以編程方式顯示產品類別。請記住，為此，您需要了解 PHP 和 CSS。

此外，如果您正在尋找一種使用模板而不是從頭開始自定義商店頁面的方法，您也可以選擇這樣做。但是，為此，您必須配置模板文件並修改主題文件。我們有關於以編程方式自定義 Shop 頁面以及在此處配置 WooCommerce 模板的完整指南：

如何以編程方式編輯 WooCommerce 商店頁面
如何自定義 WooCommerce 模板文件

您是否自定義了商店頁面並顯示了產品類別？您使用了哪種方法？在下面的評論部分讓我們知道！

最後，如果您正在尋找改進商店頁面的其他方法，請查看以下文章：

以編程方式編輯 WooCommerce 商店頁面（CSS 和 PHP）
如何在 Elementor 中自定義 WooCommerce 商店頁面
如何修復 WooCommerce 商店頁面為空