如何顯示WooCommerce分類和子分類提升店鋪導航體驗

如何顯示WooCommerce分類和子分類

是否曾走進一家雜亂無章的商店,發現裡面什麼都沒有?令人沮喪,對吧?網店也是如此。如果您的產品沒有得到很好的組織,顧客甚至還沒找到他們需要的東西就會離開。

WooCommerce 可以讓您將產品分類到類別和子類別中,但要真正以使用者友好的方式顯示它們並不總是那麼簡單。這就是本指南的目的所在。

我將帶您瞭解在 WooCommerce 中整齊顯示分類的具體步驟,這樣您的商店就可以輕鬆導航,顧客也可以輕鬆購物。

瞭解WooCommerce分類和子分類

WooCommerce 產品類別是根據產品的共同特徵或功能對產品進行的廣泛分組。例如,如果您經營一家服裝店,您的產品類別可能包括男裝、女裝和童裝。

每個產品類別可以包含多個子類別,這些子類別是一個類別中更具體的產品分組。

例如,在女裝類別中,可以有上衣、下裝、連衣裙和配飾等子類別。

在 WooCommerce 中使用類別和子類別可以建立一個更有條理、使用者友好的商店,讓客戶更容易找到併購買他們想要的產品。

為什麼要在WooCommerce中顯示產品分類?

在 WooCommerce 中顯示產品類別非常重要,原因有以下幾點:

  • 更方便導航:分類可幫助客戶快速找到所需的產品,避免在無窮無盡的產品中滾動的麻煩。
  • 更好地組織:將產品分門別類,可以保持商店整潔,方便使用者,改善購物體驗。
  • 定向營銷:分類允許您突出顯示特定產品,從而更容易推廣銷售或季節性商品。
  • 加快購買速度:清晰的分類有助於客戶更快地做出決定,從而提高銷售額。

在WooCommerce中設定產品分類

在瞭解如何在店鋪頁面上顯示類別和子類別之前,我們先來看看如何建立它們。

在建立商店時,您首先要建立主分類來定義廣泛的產品組,然後新增子分類來進一步組織商品。

例如,如果您是賣鞋的,您可以建立一個名為“Shoes”的父類別,以及 Running Shoes Formal Shoes 等子類別。

如何在WooCommerce中建立新的產品類別?

進入WordPress控制面板

導航至左側選單中的產品 → 類別

建立新的WooCommerce產品類別

填寫類別詳細資訊

    • 名稱:輸入類別的描述性名稱。例如:Shoes.
    • Slug(可選):這是名稱的 URL 友好版本。如果留空,WooCommerce 將自動生成一個。
    • 父類別:如果是主分類,則留空。如果是子類別,請從下拉選單中選擇父類別
    • 描述(可選):簡要說明該類別的內容。
    • 顯示型別:決定客戶登陸該類別頁面時產品的顯示方式。選項包括
      • 預設– 遵循主題的預設佈局。
      • 產品– 僅顯示該類別中的產品。
      • 子類別– 顯示子類別而不是單個產品。
      • 都顯示 – 同時顯示產品和子類別。
    • 縮圖:上傳代表該類別的圖片。這有助於客戶直觀地識別不同的產品部分。

儲存類別

單擊“新增新類別”,該類別將出現在右側列表中。

新增新類別

新的“Shoes”類別就建立好了!

Shoes產品分類

如何在WooCommerce中建立子類別?

如果您需要將產品組織成子類別(例如,在“Shoes”下,您想新增“Nike Shoes”或 “Adidas Shoes”),請按照以下步驟操作:

  1. 進入WordPress 儀表板中的產品 → 類別
  2. 像之前一樣新增一個新類別
  3. 在“父類別”下拉選單中,選擇該子類別所屬的主類別。
  4. 例如 如果要新增 “Nike Shoes”,請將“Shoes”設為父類別。
  5. 根據需要填寫其他詳細資訊(標題、描述、顯示型別和縮圖)。
  6. 單擊 “新增新類別”,子類別將巢狀在父類別之下。

新增新產品分類

如何在WooCommerce中顯示預設分類、子分類和產品?

好了,我們已經瞭解瞭如何為商店設定類別和子類別,讓訪客可以直接從主頁瀏覽產品,或通過點選進入特定產品類別檔案縮小搜尋範圍。

但如何在商店中顯示這些類別呢?

主要有兩種方法:

  1. 簡單方法:使用 WooCommerce 的內建設定(無需編碼)。
  2. 程式碼方法:使用自定義程式碼進行高階自定義。

讓我們逐步探討這兩種方法。

簡單方法: 使用WooCommerce CMS

預設情況下,WooCommerce 並不總是以最有條理的方式顯示類別、子類別和產品。如果你想要一個簡潔的結構,先顯示類別,再顯示子類別和產品,下面就是具體的操作方法–無需接觸任何程式碼。

方法 1:使用WordPress定製器設定類別顯示

如果你想讓 WooCommerce 自動處理佈局,WordPress 定製器是最簡單的方法。您可以控制商店頁面是否只顯示類別、顯示帶子類別的類別或混合顯示所有類別。

具體操作如下:

前往 WordPress 面板中的“外觀”→“自定義”。

“外觀”→“自定義”

點選 WooCommerce 產品目錄

WooCommerce →產品目錄

“商店頁面顯示下,選擇 “顯示類別”(如果只想顯示類別)或 “ 同時顯示 ”(也包括產品)。我只選擇“顯示類別”。然後,在“類別顯示”下,我會選擇“顯示子類別和產品”。

商店頁面只顯示產品分類

點選“釋出”,您的商店頁面將立即更新。

僅顯示產品分類

商店頁面將只顯示父類別,而不是雜亂無章的產品列表。當使用者點選一個類別時,會看到其子類別和產品整齊地顯示出來。

方法 2:使用WooCommerce簡碼手動排列類別

如果內建設定無法滿足您的控制需求,那麼簡碼可以讓您按照自己的意願手動構建商店頁面。我寫過一篇關於 WooCommerce 短程式碼的詳細博文,如果你是新手,不妨看看。

總之,你可以使用這些簡碼:

顯示所有父類別:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[product_categories]
[product_categories]
[product_categories]

顯示特定類別(用實際類別編號替換 ID):

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[product_categories ids="10,15,22"]
[product_categories ids="10,15,22"]
[product_categories ids="10,15,22"]

顯示特定類別的產品:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
[products category="your-category-slug"]
[products category="your-category-slug"]
[products category="your-category-slug"]

要在商店頁面上使用這些簡碼,請按照以下步驟操作:

  • 在 WordPress 儀表板中開啟頁面 商店頁面
  • 將簡碼貼上到您希望類別或產品出現的位置。我將以這個簡碼為例:[product_categories]

[product_categories]

  • 點選更新,然後重新整理網站檢視更改。
  • 現在,商店頁面將只顯示類別。

商店頁面將只顯示類別

點選一個類別將顯示它下面的子類別和產品–這正是網上商店應該有的樣子。例如,我可以看到我商店中的“Bras & Tanks”類別有一個子類別“Clothing”。

顯示產品對應分類

因此,如果我點選它,就會看到子類別和產品。就像這樣:

子分類產品列表

方法 3:使用WooCommerce區塊進行視覺化佈局

對於使用Gutenberg 區塊編輯器的使用者,WooCommerce 提供了一種無需短程式碼的拖放方式來排列類別和子類別。

使用 WooCommerce 區塊設定類別:

開啟“頁面 ” → “商店頁面”,然後點選“編輯”。

按下 +(新增區塊) 按鈕並搜尋“Product Categories List”。

Product Categories List

點選插入,然後調整設定:

  • “顯示樣式”下,選擇“列表”(堆疊顯示所有類別)或 “下拉選單”(可摺疊選單)。

顯示方式設定

  • 啟用“顯示層次結構”,這樣子類別就會顯示在父類別之下。

顯示層次結構

  • 根據您的偏好調整其他顯示設定。

單擊“更新”,重新整理商店頁面。

您的類別將整齊地顯示出來,子類別將顯示在子類別的下方。就像這樣:

商店頁面顯示產品分類

這樣,客戶就可以毫不費力地瀏覽您的商店,使您的商店更易於瀏覽。

如何在店鋪的不同區域顯示WooCommerce分類和子分類?

現在,讓我們來看看如何在店鋪的不同區域顯示 WooCommerce 類別和子類別:

1. 在導航選單中顯示分類

在主導航選單中放置類別有助於客戶快速找到所需內容。

  • 進入 WordPress 後臺的外觀 → 選單

外觀-選單入口

  • 建立一個新選單。我將其命名為“New Test Menu”。

建立一個選單

  • 然後,點選左上角的“螢幕選項”,選擇“產品類別”。

螢幕選項顯示產品分類

  • 在左側窗格中,會出現一個新標籤,標題為“Product Categories”。單擊它展開,選擇你想要的類別,然後單擊新增到選單

新增產品分類至選單

  • 單擊儲存選單應用更改。

現在,您的產品類別將顯示在選單中,方便客戶找到他們想要的產品。

選單顯示產品分類

2. 在側邊欄顯示分類

在側邊欄中新增類別可確保從任何頁面都能看到它們,從而方便購物者進行導航。

  1. 進入 WordPress 後臺的外觀 → 小工具
  2. 點選側邊欄的下拉選單。

外觀-小工具

  • 現在,新增一個新區塊。

新增新區塊

  • 查詢名為“Product Categories List”的小工具。

Product Categories List

  • 自定義設定。我會選擇顯示樣式下拉,因為我覺得這樣更簡潔。

設定側邊欄產品分類顯示樣式

  • 現在,當我儲存並檢視更改後,我的側邊欄將顯示所有類別。

側邊欄下拉產品分類

3. 在頁尾顯示分類

將類別新增到頁尾可確保每個頁面都能訪問這些類別,尤其是對於滾動到底部的使用者。

下面介紹如何在頁尾新增類別:

  • 轉到外觀 → 小工具
  • 將“產品類別”小工具拖到頁尾小工具區域。

新增產品分類至側邊欄小工具

  • 調整顯示設定(例如,只顯示父類別或包括子類別)。
  • 單擊“儲存”,您的頁尾就會變成這樣。

頁尾產品分類

程式碼方法:使用自定義程式碼

如果你想完全控制 WooCommerce 類別和子類別的顯示方式,那麼自定義程式碼就是你的不二選擇。您無需依賴外掛或主題設定,只需在網站上新增正確的程式碼段即可。下面是具體操作方法:

在產品前顯示WooCommerce產品類別

預設情況下,WooCommerce 不會在產品之前顯示產品類別。為了解決這個問題,我將新增一個函式,動態獲取並顯示類別。

首先,我要訪問活動主題的 functions.php 檔案。你可以通過 WordPress 儀表板進入外觀 > 主題編輯器 ,或者使用 FileZilla FTP 客戶端進入 wp-content/themes/your-theme/ 。進入 functions.php 後,我將新增以下程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function woocommerce_product_category() {
$woocommerce_category_id = get_queried_object_id();
$args = array(
'parent' => $woocommerce_category_id
);
$terms = get_terms('product_cat', $args);
if ($terms) {
echo '<ul class="woocommerce-categories">';
foreach ($terms as $term) {
echo '<li class="woocommerce-product-category-page">';
woocommerce_subcategory_thumbnail($term);
echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';
echo '</li>';
}
echo '</ul>';
}
}
add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);
function woocommerce_product_category() { $woocommerce_category_id = get_queried_object_id(); $args = array( 'parent' => $woocommerce_category_id ); $terms = get_terms('product_cat', $args); if ($terms) { echo '<ul class="woocommerce-categories">'; foreach ($terms as $term) { echo '<li class="woocommerce-product-category-page">'; woocommerce_subcategory_thumbnail($term); echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>'; echo '</li>'; } echo '</ul>'; } } add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);
function woocommerce_product_category() {
$woocommerce_category_id = get_queried_object_id();
$args = array(
'parent' => $woocommerce_category_id
);
$terms = get_terms('product_cat', $args);
if ($terms) {
echo '<ul class="woocommerce-categories">';
foreach ($terms as $term) {
echo '<li class="woocommerce-product-category-page">';
woocommerce_subcategory_thumbnail($term);
echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';
echo '</li>';
}
echo '</ul>';
}
}
add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);

這段程式碼會抓取正在瀏覽的當前類別,獲取其子類別,並在產品出現之前列出它們。WooCommerce 已內建縮圖支援,因此 woocommerce_subcategory_thumbnail($term); 函式將自動顯示類別圖片。

產品前端顯示

獲取並顯示特定類別的子類別

如果我想顯示特定類別的子類別而不是當前類別,可以使用以下程式碼。當我想顯示“electronics”或 “clothing”等類別的子類別時,這種方法就很有用:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function woocommerce_get_product_category_of_subcategories($category_slug) {
$taxonomy = 'product_cat';
$parent = get_term_by('slug', $category_slug, $taxonomy);
$children_ids = get_term_children($parent->term_id, $taxonomy);
$terms_html = array();
foreach ($children_ids as $child_id) {
$term = get_term($child_id, $taxonomy);
$term_link = get_term_link($term, $taxonomy);
if (!is_wp_error($term_link)) {
$terms_html[] = '<a href="' . esc_url($term_link) . '" class="' . $term->slug . '">' . $term->name . '</a>';
}
}
return '<span class="subcategories-' . $category_slug . '">' . implode(', ', $terms_html) . '</span>';
}
function woocommerce_get_product_category_of_subcategories($category_slug) { $taxonomy = 'product_cat'; $parent = get_term_by('slug', $category_slug, $taxonomy); $children_ids = get_term_children($parent->term_id, $taxonomy); $terms_html = array(); foreach ($children_ids as $child_id) { $term = get_term($child_id, $taxonomy); $term_link = get_term_link($term, $taxonomy); if (!is_wp_error($term_link)) { $terms_html[] = '<a href="' . esc_url($term_link) . '" class="' . $term->slug . '">' . $term->name . '</a>'; } } return '<span class="subcategories-' . $category_slug . '">' . implode(', ', $terms_html) . '</span>'; }
function woocommerce_get_product_category_of_subcategories($category_slug) {
$taxonomy = 'product_cat';
$parent = get_term_by('slug', $category_slug, $taxonomy);
$children_ids = get_term_children($parent->term_id, $taxonomy);
$terms_html = array();
foreach ($children_ids as $child_id) {
$term = get_term($child_id, $taxonomy);
$term_link = get_term_link($term, $taxonomy);
if (!is_wp_error($term_link)) {
$terms_html[] = '<a href="' . esc_url($term_link) . '" class="' . $term->slug . '">' . $term->name . '</a>';
}
}
return '<span class="subcategories-' . $category_slug . '">' . implode(', ', $terms_html) . '</span>';
}

要顯示“electronics”類別的子類別,我會在相關模板檔案中這樣呼叫:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
echo woocommerce_get_product_category_of_subcategories('electronics');
echo woocommerce_get_product_category_of_subcategories('electronics');
echo woocommerce_get_product_category_of_subcategories('electronics');

在產品頁面上顯示類別說明

WooCommerce 不會自動在產品頁面上顯示分類描述。要新增這個功能,我需要修改 functions.php 檔案。我將使用 FTP 客戶端(或 WordPress 儀表板中的主題編輯器)開啟檔案並新增這段程式碼:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
global $post;
$terms = wp_get_post_terms($post->ID, 'product_cat');
if (!empty($terms)) {
foreach ($terms as $term) {
echo '<div class="woocommerce-get-product-category">' . $term->description . '</div>';
}
}
global $post; $terms = wp_get_post_terms($post->ID, 'product_cat'); if (!empty($terms)) { foreach ($terms as $term) { echo '<div class="woocommerce-get-product-category">' . $term->description . '</div>'; } }
global $post;
$terms = wp_get_post_terms($post->ID, 'product_cat');
if (!empty($terms)) {
foreach ($terms as $term) {
echo '<div class="woocommerce-get-product-category">' . $term->description . '</div>';
}
}

檢索分配給當前產品的類別並顯示其描述。

建立管理產品類別的自定義外掛

與其修改 functions.php,我可以把它變成一個自定義外掛。這樣可以保持模組化,並確保即使在主題更新後功能也能保持不變。

  • 我會通過 FTP 連線到網站(例如使用 FileZilla),然後轉到 wp-content/plugins/.

image23-80

  • 然後,我將建立一個名為 wbolt-product-categories-in-archives 的資料夾。
  • 在該資料夾中,我將建立一個名為 wbolt-product.php 的檔案,並新增以下程式碼:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    <?php
    /**
    * Plugin Name: WooCommerce Product Category
    * Description: Displays WooCommerce categories on product pages.
    * Version: 1.0
    * Author: Your Name
    **/
    function wbolt_product_subcategories() {
    $parentid = get_queried_object_id();
    $args = array('parent' => $parentid);
    $terms = get_terms('product_cat', $args);
    if ($terms) {
    echo '<ul class="product-cats">';
    foreach ($terms as $term) {
    echo '<li class="category">';
    woocommerce_subcategory_thumbnail($term);
    echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';
    echo '</li>';
    }
    echo '</ul>';
    }
    }
    add_action('woocommerce_before_shop_loop', 'wbolt_product_subcategories', 50);
    <?php /** * Plugin Name: WooCommerce Product Category * Description: Displays WooCommerce categories on product pages. * Version: 1.0 * Author: Your Name **/ function wbolt_product_subcategories() { $parentid = get_queried_object_id(); $args = array('parent' => $parentid); $terms = get_terms('product_cat', $args); if ($terms) { echo '<ul class="product-cats">'; foreach ($terms as $term) { echo '<li class="category">'; woocommerce_subcategory_thumbnail($term); echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>'; echo '</li>'; } echo '</ul>'; } } add_action('woocommerce_before_shop_loop', 'wbolt_product_subcategories', 50);
    <?php
    /**
    * Plugin Name: WooCommerce Product Category
    * Description: Displays WooCommerce categories on product pages.
    * Version: 1.0
    * Author: Your Name
    **/
    function wbolt_product_subcategories() {
    $parentid = get_queried_object_id();
    $args = array('parent' => $parentid);
    $terms = get_terms('product_cat', $args);
    if ($terms) {
    echo '<ul class="product-cats">';
    foreach ($terms as $term) {
    echo '<li class="category">';
    woocommerce_subcategory_thumbnail($term);
    echo '<h2><a href="' . esc_url(get_term_link($term)) . '">' . $term->name . '</a></h2>';
    echo '</li>';
    }
    echo '</ul>';
    }
    }
    add_action('woocommerce_before_shop_loop', 'wbolt_product_subcategories', 50);

為類別顯示新增自定義樣式

由於分類需要一些樣式,我將在外掛中新增一個自定義 CSS 檔案。

  • 在外掛資料夾(wbolt-product-categories-in-archives)中,我將建立一個 CSS 資料夾,並在其中建立一個名為 style.css 的檔案。
  • 我將新增這些 CSS 程式碼,以調整分類顯示的樣式:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    .product-cats {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    }
    .product-cats .category {
    margin: 10px;
    text-align: center;
    }
    .product-cats h2 {
    font-size: 16px;
    margin-top: 10px;
    }
    .product-cats { display: flex; flex-wrap: wrap; list-style: none; padding: 0; } .product-cats .category { margin: 10px; text-align: center; } .product-cats h2 { font-size: 16px; margin-top: 10px; }
    .product-cats {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    }
    .product-cats .category {
    margin: 10px;
    text-align: center;
    }
    .product-cats h2 {
    font-size: 16px;
    margin-top: 10px;
    }
  • 為確保 CSS 已載入,我將返回 wbolt-product.php,並新增此函式來呼叫樣式表:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    function wbolt_product_cats_css() {
    wp_enqueue_style('wbolt_product_cats_css', plugins_url('css/style.css', FILE));
    }
    add_action('wp_enqueue_scripts', 'wbolt_product_cats_css');
    function wbolt_product_cats_css() { wp_enqueue_style('wbolt_product_cats_css', plugins_url('css/style.css', FILE)); } add_action('wp_enqueue_scripts', 'wbolt_product_cats_css');
    function wbolt_product_cats_css() {
    wp_enqueue_style('wbolt_product_cats_css', plugins_url('css/style.css', FILE));
    }
    add_action('wp_enqueue_scripts', 'wbolt_product_cats_css');

現在,當我從 WordPress 儀表盤啟用這個外掛時,它會自動在產品之前顯示產品類別,並配有縮圖和指向類別頁面的連結。

WooCommerce商店可能需要的其他產品類別操作

有時,您需要隱藏或排序產品類別。也許是因為重疊,也許是因為圖片解釋了類別,而您不需要顯示標籤。

不管是什麼原因,讓我們來探討一下您的 WooCommerce 商店可能需要的其他一些與產品類別相關的操作。

如何在WooCommerce中隱藏產品類別

您可以通過兩種方式在 WooCommerce 中隱藏產品類別:

  • 通過外掛
  • 通過程式碼

讓我們一起來探討這兩種方法。

如何在WooCommerce中隱藏產品類別(通過外掛)

您可以使用名為 Hide Categories and Products for Woocommerce 的外掛這是一個付費工具,價格為 4.09 美元/月。安裝外掛後,您將在 WooCommerce 選項下看到它。

為Woocommerce隱藏類別和產品

然後,您需要按照以下說明進行操作:

WooCommerce → Products Visibility → Global Visibility

然後,選擇要隱藏的類別並儲存更改。這樣做將有助於您在 WooCommerce 中隱藏產品類別。

如何在WooCommerce中隱藏產品類別(通過程式碼)

您可以使用自定義程式碼來隱藏產品類別。下面是一個使用 get_term 過濾器隱藏產品類別的程式碼示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 );
function show_product_categories() {
// Display product categories
echo do_shortcode( '[product_categories]' );
}
add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 ); function show_product_categories() { // Display product categories echo do_shortcode( '[product_categories]' ); }
add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 );
function show_product_categories() {
// Display product categories
echo do_shortcode( '[product_categories]' );
}

您也可以使用其他自定義方法來完成工作。具體修改取決於您的要求。

如何在WooCommerce中隱藏產品類別標題

您可以使用以下程式碼在 WooCommerce 中隱藏產品類別標題:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_action( 'init', function() {
remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) );
} );
add_action( 'init', function() { remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) ); } );
add_action( 'init', function() {
remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title', has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) );
} );

如何在WooCommerce中隱藏產品類別計數

您可以使用以下簡碼在 WooCommerce 中隱藏產品類別計數:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {
return null;
}, 10, 2 );
add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) { return null; }, 10, 2 );
add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {
return null;
}, 10, 2 );

如何在WooCommerce中按類別排序

您可以使用以下簡碼按類別排序:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {
return null;
}, 10, 2 );
add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) { return null; }, 10, 2 );
add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {
return null;
}, 10, 2 );

如何設定WooCommerce分類圖片大小

以下是設定 WooCommerce 類別圖片大小的方法:

  • 進入“外觀”,點選“自定義”。

外觀-自定義

  • 點選面板中的 WooCommerce,然後選擇 Product Images

選擇產品圖片自定義選項

  • 你會看到一些設定。選擇你喜歡的設定,或點選“自定義”設定自定義尺寸。

自定義產品圖片尺寸

就是這樣。按照上述簡單步驟,就能幫你設定 WooCommerce 類別圖片大小。

組織WooCommerce產品類別的最佳實踐

有效組織 WooCommerce 產品類別可以大大改善使用者體驗,提高店鋪管理效率。以下是一些組織產品類別和子類別的最佳實踐:

  • 選擇簡單、具有描述性且易於理解的類別名稱。
  • 限制主分類的數量。
  • 確保子類別與主類別相關且具體。
  • 確保根據產品的特點和功能對產品進行一致的分類。
  • 優化分類頁面
  • 定期檢查商店的組織結構,並根據需要進行調整。
  • 確保您的店鋪設計響應迅速、移動友好。
  • 啟用麵包屑功能,幫助使用者在類別、子類別和產品頁面之間輕鬆導航。

針對SEO優化WooCommerce產品類別的技巧

以下是一些針對搜尋引擎優化優化 WooCommerce 產品類別的技巧:

  • 進行關鍵詞研究
  • 優化類別和子類別名稱
  • 建立搜尋引擎友好型 URL
  • 為每個類別和子類別建立獨特、關鍵字豐富的描述
  • 使用標題標籤(如 H1、H2、H3)來構建類別和子類別頁面。
  • 為類別和子類別使用高質量的圖片,並對圖片進行優化,以便快速載入。
  • 新增內部連結
  • 在類別和子類別頁面中新增模式標記(結構化資料)。
  • 使用搜尋引擎優化外掛,如 Yoast SEO 或 Rank Math,幫助您優化 WooCommerce 商店。

使用者在顯示產品類別時遇到的常見問題及其解決方案

使用者在 WooCommerce 商店中顯示產品類別時可能會遇到一些常見問題。本節將介紹這些問題及其解決方案。

問題 #1:選單上不顯示類別

有時,您已經確定了類別,但它們並沒有出現在選單上。您可以按照以下步驟解決這個問題:

解決方案

按照以下步驟操作:

  • 進入 WordPress 面板中的“外觀”>“選單 ”。
  • 點選右上角的“螢幕選項”選項卡,確保選中“產品類別”覈取方塊。

勾選螢幕選項-產品分類

  • 現在,你可以在左側欄看到產品類別。選擇要新增到選單的類別,然後點選“新增到選單

新增產品分類至選單

  • 這樣就完成了。

問題 #2:不顯示分類圖片

有時您無法在 WooCommerce 商店中看到分類圖片,但這很容易解決。

解決方法

首先,您必須確保為每個類別分配了圖片。要做到這一點

  • 轉到產品 >類別。
  • 點選類別名稱下方的“編輯”。
  • 向下滾動到“縮圖”部分,然後單擊“上傳/新增圖片”設定類別圖片。

上傳分類縮圖

  • 儲存更改。

問題 #3:類別顯示順序錯誤

有時,您會發現 WooCommerce 商店中的類別顯示順序不正確。

解決方法

您可以按照以下步驟手動設定產品類別的順序:

  • 轉到產品 >類別。
  • 使用拖放介面根據需要重新排列類別。

使用拖放介面根據需要重新排列類別

問題 #4:顯示空類別

預設情況下,WooCommerce 會顯示所有類別,包括空類別。

解決方法

要隱藏空類別,請在主題的 functions.php 檔案中新增以下程式碼段:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );
function hide_empty_categories( $args ) {
$args['hide_empty'] = 1;
return $args;
}
add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' ); function hide_empty_categories( $args ) { $args['hide_empty'] = 1; return $args; }
add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' );
function hide_empty_categories( $args ) {
$args['hide_empty'] = 1;
return $args;
}

問題 #5:分類頁面未被搜尋引擎收錄

有些使用者可能會發現,他們的 WooCommerce 類別頁面沒有被搜尋引擎收錄。

解決方法

  • 確保您的分類頁面未在搜尋引擎優化外掛設定(如 Yoast SEO 或 Rank Math)中設定為 “noindex”。
  • 此外,檢查“設定”>閱讀 ”中的“搜尋引擎可見性”設定,確保“阻止搜尋引擎索引此網站”選項未被選中。

小結

在 WooCommerce 商店中顯示類別和子類別對於為客戶提供清晰有序的購物體驗至關重要。通過對產品進行分類,您可以讓客戶更容易找到他們正在尋找的產品,並鼓勵他們探索相關產品。

在本教學中,您已經瞭解瞭如何建立一個外掛,從產品列表中獨立輸出產品類別或子類別。

通過實施這些方法,您可以增強 WooCommerce 商店的可用性和功能,從而提高客戶滿意度和銷售額。

常見問題

Q. 如何在WooCommerce中顯示產品分類?

要在 WooCommerce 中顯示產品類別,您可以

  • 轉到外觀 > 自定義
  • 導航至 WooCommerce > 產品目錄
  • 選擇在商店頁面顯示類別
  • 單擊儲存更改

Q. 如何查詢 WooCommerce 中的產品類別 ID?

以下是查詢 WooCommerce 產品類別 ID 的方法:

  • 進入 WooCommerce 控制面板 → 產品 → 類別
  • 將滑鼠懸停在[類別名稱]上 → 點選[類別名稱]或在出現時點選編輯
  • 找到 URL。例如,tag_ID=16,其中 16 是類別的 ID。

Q. 什麼是WooCommerce產品屬性?

產品屬性是一項附加功能,允許您新增產品尺寸、顏色等。要將產品與其屬性關聯起來,您必須進入產品頁面並建立產品變體。

Q. 如何在 WooCommerce 中新增產品?

請按照以下步驟在 WooCommerce 中新增產品:

  • 進入 WooCommerce 面板。
  • 點選產品 → 新增新產品。
  • 新增產品詳細資訊,如產品標題、描述、價格、圖片等。

Q. 什麼是WooCommerce中的簡單產品?

簡單產品只有一個 SKU,沒有變化或其他專屬功能。例如,空白服裝。

Q. 什麼是WooCommerce中的可變產品?

在可變產品中,您有多個變體/選項,每個變體/選項可能有不同的 SKU 或價格。例如,一把椅子有多種顏色和尺寸可供選擇。

Q. 如何在WooCommerce中建立可變產品?

請按照以下步驟在 WooCommerce 中建立可變產品:

  • 轉到 WooCommerce → 產品。
  • 選擇新增產品按鈕或編輯現有產品。
  • 顯示“產品資料”。
  • 從產品資料下拉選單中選擇變數產品。

Q. 什麼是 WooCommerce 中的 SKU?

SKU 是一個唯一識別符號,您可以根據資訊系統使用的 “Part number” 或 “Product ID” 名稱找到它。

Q. 如何更改WooCommerce中產品的價格?

以下是在 WooCommerce 中更改產品價格的方法:

  • 轉到“產品”選項卡。
  • 選擇您要編輯的產品。
  • 然後轉到產品資料面板,選擇常規選項卡。
  • 用數字更新正常價格欄位或銷售價格欄位。

Q. 如何顯示 WooCommerce 中的所有產品?

請按照以下步驟顯示 WooCommerce 商店中的所有產品:

  • 轉到 WooCommerce 設定
  • 單擊“產品”選項卡,然後選擇“顯示”選項。
  • “商店頁面顯示” 預設分類” 顯示選項中選擇“顯示產品”。
  • 儲存更改。

Q. 如何在WooCommerce中顯示類別說明?

要在 WooCommerce 中顯示類別描述,請按照以下步驟操作:

  • 進入 WordPress 面板並導航至產品 > 類別。
  • 選擇要新增或編輯描述的類別。
  • 在描述框中新增所需的內容。
  • 單擊“更新”儲存更改。
  • 預設情況下,WooCommerce 會在類別檔案頁面上顯示類別描述。如果看不到,請檢查您的主題設定或使用 PHP 自定義主題檔案,以確保描述包含在佈局中。

Q. 如何在WordPress中顯示類別?

要在 WordPress 中顯示分類,可以使用以下方法:

  • 進入 WordPress 面板。
  • 導航至外觀 > 小工具。
  • 將“類別”小部件拖動到所需的小部件區域(如側邊欄)。
  • 配置部件設定,例如顯示為下拉或顯示帖子計數,然後儲存更改。

Q. 如何在WooCommerce中新增分類Banner?

要在 WooCommerce 中新增分類 banner 廣告,請按以下步驟:

  • 進入 WordPress 儀表板中的“產品”>“類別”。
  • 選擇您要編輯的類別。
  • 在縮圖部分上傳圖片。

評論留言