如何按類別顯示 WooCommerce 產品

已發表: 2020-08-16

WooCommerce 按類別顯示產品 您是否在經營 WooCommerce 商店，並且想在 WordPress 中按類別顯示產品？ 這篇文章詳細解釋瞭如何按類別顯示 WooCommerce 產品。 如果您熟悉 WooCommerce，您就會知道產品類別在組織產品以供客戶正確展示和訪問方面發揮著重要作用。

按類別顯示 WooCommerce 產品

開箱即用，WooCommerce 為您提供了一些選項，可讓您在存檔頁面上顯示什麼，例如產品、類別或子類別或產品和類別。 但是，大多數 WooCommerce 用戶選擇第三個選項來顯示產品和類別/子類別。 對 woocommerce 類別進行排序

此選項將允許您的訪問者直接從主頁選擇產品或通過單擊產品類別存檔來優化他們的搜索。

然而，這方面的主要缺點是它將類別/子類別一起顯示，兩者之間沒有分離。 由於圖像尺寸不同，這使得佈局看起來有點混亂。

從專家的角度來看，即使您的圖像大小相同，如果存檔頁面中的某一行同時包含類別和產品，則缺少類別的“添加到購物車”按鈕會使該行看起來雜亂無章，因為並非所有元素都具有相同的尺寸。

在這個簡短的教程中，您將學習如何在顯示產品之前在單獨的列表中顯示類別。

  • 識別或區分 WooCommerce 中的代碼，用於在存檔頁面上輸出類別和子類別。
  • 為代碼創建一個自定義插件。
  • 編寫一個函數，將類別或子類別放在產品列表之前。
  • 為輸出創建自定義樣式。

a) 顯示產品和類別或子類別

顯示產品和類別或子類別的步驟。

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 自定義。 單擊商店頁面並選擇WooCommerce > 產品目錄。 在Shop Display選項上，選擇Show categories & products 。 在類別顯示選項上，選擇顯示子類別和產品，如下所示： 按類別顯示 WooCommerce 產品
  3. 請記住保存您所做的更改。
  4. 這將是結果： 按類別顯示 WooCommerce 產品

b) 顯示 WooCommerce 產品類別

但是，您可以使用下面的代碼片段顯示 WooCommerce 產品類別，該代碼片段應放置在 functions.php 文件中。

顯示 WooCommerce 產品類別的步驟

以下是您應該遵循的步驟：

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 主題編輯器 打開主題編輯器頁面後，查找主題函數文件，我們將在其中添加將顯示 WooCommerce 產品類別的函數。
  3. 將以下代碼添加到php文件中：
 功能 woocommerce_product_category( $args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = 數組（

             '父' => $woocommerce_category_id
  );

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

  如果（$條款）{

             迴聲'<ul class="woocommerce-categories">';

             foreach ( $terms 作為 $term ) {

             echo '<li class="woocommerce-product-category-page">';

            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'，'woocommerce_product_category'，100）；
  1. 這將是結果： 按類別顯示 WooCommerce 產品

但是，它需要一些自定義 CSS 才能很好地顯示產品。 我們將在本教程的後面部分執行此操作。

代碼如何運作

此代碼通過簡單地使用woocommerce_product_category() function來工作，該函數在運行輸出產品的循環之前輸出類別或子類別。 它可以覆蓋主題，因為該功能是可插拔的。

c) 列出 WooCommerce 產品類別的子類別

通過使用利用父產品類別 slug 的自定義函數，很容易獲得 WooCommerce 產品類別的子類別。

列出 WooCommerce 產品類別的子類別的步驟

  1. 登錄您的 WordPress 站點並以管理員用戶身份訪問儀表板。
  2. 從儀表板菜單中，單擊外觀菜單 > 主題編輯器 打開主題編輯器頁面後，查找主題函數文件，我們將在其中添加列出 WooCommerce 產品類別的子類別的函數。
  3. 將以下代碼添加到php文件中：
 功能 woocommerce_get_product_category_of_subcategories( $category_slug ){

$terms_html = 數組（）；
$taxonomy = 'product_cat';
$parent = get_term_by('slug', $category_slug, $taxonomy );
$children_ids = get_term_children($parent->term_id, $taxonomy);

foreach($children_ids 作為 $children_id){

    $term = get_term($children_id, $taxonomy);

    $term_link = get_term_link($term, $taxonomy);

    if ( is_wp_error( $term_link ) ) $term_link = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' 。 $術語->名稱。 '</a>';
}

返回 '​​<span class="subcategories-' . $category_slug . '">' 。 內爆（'，'，$terms_html）。 '</span>';

}
  1. 這將是結果： 列出 WooCOMmerce 產品類別的子類別

代碼如何工作。

WP_Term 對象獲取產品類別父級。 然後，它獲取數組中的子 ID，最後，通過對子 ID 數組運行循環，子類別在 HTML 中顯示。

d) 識別 WooCommerce 用於在檔案中輸出類別和產品的代碼

在我們創建插件之前，第一步肯定是確定 WooCommerce 如何輸出類別和子類別。 這意味著我們必須手動查找 WooCommerce 源代碼才能找到相關功能。

為了簡化您的流程，只需在模板文件夾中查找archive-product.php即可。 這是 WooCommerce 用於顯示存檔頁面的文件。 您現在需要找到輸出類別和產品的代碼：

 <?php
/**
* woocommerce_before_shop_loop 鉤子
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action('woocommerce_before_shop_loop');
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php wc_get_template_part('內容', '產品'); ?>

<?php 結束； // 循環結束。 ?>

<?php woocommerce_product_loop_end(); ?>

代碼如何工作：

woocommerce_product_subcategories() function在運行輸出產品的循環之前輸出類別或子類別。 我之所以讓你注意這個功能是因為它是可插拔的，這意味著我們可以在我們的主題中覆蓋它。

但是，這將不起作用，因為 WooCommerce 具有用於清除項目的內置樣式，這將出現在默認顯示的行的開頭。 那麼我們應該怎麼做呢？ 答案很簡單。 我們需要關閉存檔頁面上類別和子類別的顯示，以便僅顯示產品。

在此之後，下一步是創建一個輸出產品類別或子類別的新函數，並將其連接到woocommerce_before_shop_loop action ，確保我們使用高優先級，以便它在已經連接到該操作的函數之後觸發。

然而，重要的是要注意 WooCommerce 會在每三個產品列表中添加清除。 這意味著我們不能使用woocommerce_product_subcategories() function或其編輯版本來顯示類別。 對此的解釋是，即使我們使用此功能單獨顯示類別，此功能也會清除列出的第三、第六（等等）類別或產品。 這意味著我們必須創建一個覆蓋它的函數。 這可以通過創建插件來完成。

e) 創建插件

您需要先創建一個新的舊版本，並在wp-content/plugins目錄中為其指定一個唯一名稱。 對於此示例，請在執行步驟時小心，以便您可以實現我們需要的功能。 我將使用這個名稱njengah-separate-products-categories-in-archives 。

在此文件夾中，您需要創建一個新文件，再次使用唯一名稱。 我將為此文件夾njengah-separate-products-categories-in-archives.php使用相同的名稱。

創建插件的步驟

  1. 打開您的文件並添加以下代碼：
 <?php
/**
* 插件名稱：WooCommerce 產品類別
* 描述：在 WooCommerce 產品頁面上顯示 WooCommerce 類別

**/
  1. 在編寫我們的函數之前，您需要通過登錄到您的 WordPress 站點並以管理員用戶身份訪問儀表板來關閉管理屏幕中的類別列表。
  2. 從儀表板菜單中，單擊外觀菜單 > 自定義。 單擊商店頁面並選擇WooCommerce > 產品目錄。 在Shop Display選項中，選擇Show products 。 在類別顯示選項上，選擇顯示產品。
  3. 請記住保存您所做的更改。
  4. 這將是結果： 按類別顯示 WooCommerce 產品
  5. 將此添加到插件文件中：
 功能 njengah_product_subcategories( $args = array()) {

}

add_action（'woocommerce_before_shop_loop'，'njengah_product_subcategories'，50）；
  1. 然後你需要在函數中添加這段代碼：
  2.  $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>';

}

    這將是結果： 按類別顯示 WooCommerce 產品

從上圖中可以看出，類別沒有很好地組織。 這意味著我們必須添加自定義樣式。 但是，在此之前，讓我們了解一下代碼是如何工作的。

代碼如何運作

我們創建的函數識別當前查詢的對象並將其 id 定義為$parentid 。 然後它使用get_terms()來識別當前查詢項作為其父項的術語。 如果這是主商店頁面，它將返回頂級類別，如果這是一個類別存檔，它將返回子類別。

此外，該函數在為每個循環和一個ul元素打開之前檢查是否有任何項。 這意味著對於每個術語，它都會創建一個li元素，然後category image using woocommerce_subcatgeory_thumbnail() ，然後在指向其存檔的鏈接中添加類別名稱。

設置類別列表樣式的步驟

這些是您需要遵循的步驟，但要做到這一點，我們需要在我們的插件中添加一個樣式表，我們需要將其排入隊列。

  1. 創建一個名為CSS的文件夾，並在其中創建一個名為 CSS. 這應該在插件文件夾中完成才能正常工作。
  2. 在您已經創建的函數的頂部添加此代碼：
 功能 njengah_product_cats_css() {




/* 註冊樣式表 */

wp_register_style('njengah _product_cats_css', plugins_url('css/style.css', __FILE__));




/* 將樣式表排入隊列 */

wp_enqueue_style('njengah _product_cats_css');




}




add_action（'wp_enqueue_scripts'，'njengah _product_cats_css'）；
  1. 下一步是打開您的樣式表並添加下面的代碼。 然而，重要的是要注意 WooCommerce 使用移動優先的樣式，所以這也是我們將使用的樣式。
 ul.product-cats li {
列表樣式：無；
左邊距：0；
邊距底部：4.236em；
文本對齊：居中；
位置：相對；
}

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


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

ul.product-cats {
左邊距：0；
明確：兩者；
}

ul.product-cats li {
寬度：29.4117647059%；
向左飄浮;
保證金-權利：5.8823529412%；
}

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

}
  1. 這將是結果： 按類別顯示 WooCommerce 產品

結論

在這篇文章中，我強調了按類別顯示 WooCommerce 產品的不同方式。 從這個簡短的教程中，您可以了解為什麼產品類別是 WooCommerce 中的一個很棒的功能，但它們的顯示方式並不總是理想的。

此外，您還學習瞭如何創建一個插件，將產品類別或子類別與產品列表分開輸出，以及如何設置類別列表的樣式。 本教程最突出的部分是創建自定義插件，通過將函數掛鉤到 WooCommerce 模板文件中的不同操作掛鉤，在頁面上輸出類別或子類別的列表。

類似文章

  1. 如何刪除默認產品排序 WooCommerce
  2. 如何在 WooCommerce 中獲取當前產品類別名稱
  3. 如何使用 WooCommerce 銷售數字產品
  4. 如何對 WooCommerce 類別進行排序以獲得更好的用戶體驗
  5. 如何在 WooCommerce 中的產品上添加 GTIN 編號
  6. 從 WooCommerce 產品頁面隱藏或刪除數量字段
  7. 如何隱藏 WooCommerce 優惠券代碼字段
  8. 在 WooCommerce 中如何在價格前添加文本 » 在價格前添加文本
  9. 如何在 WooCommerce 中以編程方式更改產品價格
  10. 如何在 WooCommerce 中移動圖像下的描述
  11. 如何刪除 WooCommerce 產品圖像的縮放效果
  12. 如何在 WooCommerce 中的價格後添加描述
  13. 如何調整 WooCommerce 產品圖像的大小
  14. 如何在 WooCommerce 中隱藏產品或按類別或角色隱藏產品