WooCommerce 為您提供了一些關于可以在存檔頁面上顯示的內容的選項：
- 產品
- 類別（在主商店頁面上）或子類別（在類別頁面上）
- 產品和類別
當我建立商店時，我通常選擇第三個選項：產品和類別/子類別。這意味著我商店的訪問者可以直接從主頁選擇產品，也可以通過點擊產品類別檔案來優化搜索。
但是，這種方法有一個缺點：它將類別/子類別一起顯示，兩者之間沒有分離。這意味著，如果您的產品圖片與產品圖片的尺寸不同，則布局可能看起來有點混亂。即使您的圖像大小相同，如果存檔頁面中的某一行同時包含類別和產品，則缺少類別的“添加到購物車”按鈕會使該行看起來不整潔，因為并非所有元素都具有尺寸相同。
在本教程中，我將向您展示如何在顯示產品之前在單獨的列表中顯示類別。
為此，我們將遵循四個步驟：
- 確定 WooCommerce 用于在存檔頁面上輸出類別和子類別的代碼。
- 為我們的代碼創建一個插件。
- 編寫一個函數，將類別或子類別放在產品列表之前。
- 設置輸出樣式。
但在開始之前，您需要安裝 WooCommerce，并添加一些產品并設置產品類別和子類別。
您需要什么
要繼續操作，您需要：
- WordPress 的開發安裝
- 代碼編輯器
- 已安裝并激活 WooCommerce
- 已添加產品 – 我已導入 WooCommerce 附帶的虛擬產品數據；有關如何執行此操作的詳細信息，請參閱本指南
- 已激活 WooCommerce 兼容主題 – 我正在使用 Storefront
開始之前：默認選項
讓我們看看 WooCommerce 默認為我們提供的內容。
我首先向我的產品類別和子類別添加一些圖像，因為 WooCommerce 虛擬數據不包含這些圖像。我只是使用了每個類別或子類別中的一種產品的圖像，如屏幕截圖所示：
現在，讓我們看看 WooCommerce 如何在存檔頁面上顯示產品類別和產品。
如果您尚未打開定制器，選擇 WooCommerce 標簽，然后點擊產品目錄。
在商店頁面顯示下，選擇顯示類別和產品，然后在類別顯示下選擇顯示子類別和產品強>.
點擊發布保存您的更改并訪問您網站的商店頁面。我的看起來像這樣：
因為我有四個類別和一個由三個并排圖像組成的網格，所以前兩個產品會與其中一個類別并排顯示。
我想讓我的類別和子類別更加突出，并簡單地將它們與產品列表分開顯示。那么讓我們這樣做吧。
識別 WooCommerce 用于輸出檔案中的類別和產品的代碼
第一步是確定 WooCommerce 如何輸出類別和子類別。那么讓我們深入研究 WooCommerce 源代碼來查找相關函數。
WooCommerce 用于顯示存檔頁面的文件是 archive-product.php，位于 templates 文件夾中。
在該文件中，您可以找到此代碼，它輸出類別和產品：
<?php /** * woocommerce_before_shop_loop hook * * @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( 'content', 'product' ); ?><?php endwhile; // end of the loop. ?><?php woocommerce_product_loop_end(); ?>
因此，有一個 woocommerce_product_subcategories() 函數，該函數在運行輸出產品的循環之前輸出類別或子類別。
該函數是可插入的，這意味著我們可以在主題中覆蓋它。不幸的是，這并不完全有效，因為 WooCommerce 具有用于清除項目的內置樣式，該樣式將出現在默認顯示的行的開頭。
因此，我們將關閉存檔頁面上類別和子類別的顯示，以便僅顯示產品。然后，我們將創建一個輸出產品類別或子類別的新函數，并將其掛鉤到 woocommerce_before_shop_loop 操作，確保我們使用高優先級，以便它在已經掛鉤到該操作的函數之后觸發。 p>
注意：由于 WooCommerce 向每個第三個產品列表添加了清除內容，因此我們無法使用 woocommerce_product_subcategories() 函數或其編輯版本來顯示類別。這是因為即使我們使用此功能單獨顯示類別，它也會清除列出的第三、第六（等等）類別或產品。我們可以嘗試覆蓋它，但編寫我們自己的函數更簡單。
所以讓我們創建一個插件來實現這一點。
創建插件
在您的wp-content/plugins目錄中，創建一個新文件夾并為其指定一個唯一的名稱。我將我的命名為tutsplus-separate-products-categories-in-archives。在其中創建一個新文件，同樣具有唯一的名稱。我使用相同的名稱：tutsplus-separate-products-categories-in-archives.php。
打開您的文件并向其中添加以下代碼：
<?php /** * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479 * Description: Display products and categories / subcategories as two separate lists in product archive pages * Version: 1.0 * Author: Rachel McCollin * Author URI: https://rachelmccollin.co.uk * * */
您可能想要編輯作者詳細信息，因為這是您正在編寫的插件。保存您的文件并通過 WordPress 管理員激活插件。
編寫我們的函數
現在讓我們編寫函數。但在開始之前，請關閉管理屏幕上的類別列表。打開定制器，單擊 WooCommerce 選項，然后單擊產品目錄。對于每個商店頁面顯示和默認類別顯示選項，選擇顯示產品。點擊發布保存您的更改。
您的商店頁面現在看起來像這樣：
在您的插件文件中，添加以下內容：
function tutsplus_product_subcategories( $args = array() ) { } add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );
現在，在函數中添加以下代碼：
$parentid = get_queried_object_id(); $args = array( 'parent' => $parentid ); $terms = get_terms( 'product_cat', $args ); if ( $terms ) { echo '
- ‘; foreach ( $terms as $term ) { echo ‘
- ‘; woocommerce_subcategory_thumbnail( $term ); echo ‘
‘; echo ‘‘; echo $term->name; echo ‘‘; echo ‘
‘; echo ‘
‘; } echo ‘
‘; }
讓我們看一下該函數的作用：
- 它標識當前查詢的對象并將其 ID 定義為 $parentid。
- 它使用 get_terms() 來識別以當前查詢項作為其父項的術語。如果這是商店主頁面，則會返回頂級類別；如果這是一個類別存檔，它將返回子類別。
- 然后，它會檢查是否存在任何術語，然后打開 for every 循環和 ul 元素。
- 對于每個術語，它都會創建一個 li 元素，然后使用 woocommerce_subcategory_thumbnail() 輸出類別圖像，后跟其存檔鏈接中的類別名稱。
現在保存您的文件并刷新主商店頁面。我的看起來像這樣：
類別已顯示，但需要一些樣式。接下來我們就這樣做。
設置類別列表的樣式
為了添加樣式，我們的插件中需要一個樣式表，我們需要將其排隊。
在您的插件文件夾中，創建一個名為 css 的文件夾，并在其中創建一個名為 style.css 的文件。
現在，在您的插件文件中，將其添加到您已創建的函數上方：
function tutsplus_product_cats_css() { /* register the stylesheet */ wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) ); /* enqueue the stylesheet */ wp_enqueue_style( 'tutsplus_product_cats_css' ); } add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );
這會正確地將您剛剛創建的樣式表排入隊列。
現在打開樣式表并添加以下代碼。 WooCommerce 使用移動優先樣式，因此我們也將使用它。
ul.product-cats { margin-left: 0; } ul.product-cats li { list-style: none; margin-left: 0; margin-bottom: 4.236em; text-align: center; position: relative; } ul.product-cats li img { margin: 0 auto; } @media screen and (min-width:768px) { ul.product-cats li { width: 29.4117647059%; float: left; margin-right: 5.8823529412%; } ul.product-cats li:nth-of-type(3) { margin-right: 0; } }
我已從 WooCommerce 使用的樣式中復制了準確??的寬度和邊距。
現在再次檢查您的主商店頁面。這是我的：
這是服裝類別存檔：
這是它在較小屏幕上的外觀：
摘要
產品類別是 WooCommerce 的一大功能，但它們的顯示方式并不總是理想。在本教程中，您學習了如何創建一個插件，該插件可以與產品列表分開輸出產品類別或子類別，然后設置類別列表的樣式。
您可以使用此代碼在頁面其他位置（例如，產品下方）輸出類別或子類別列表，方法是將函數掛鉤到 WooCommerce 模板文件中的不同操作掛鉤。
如果您目前正在經營一家想要擴展的商店，或者您正在尋找一些與 WooCommerce 相關的其他插件來研究，請隨時查看 CodeCanyon 上提供了哪些插件。
CodeCanyon 2021 年最佳 WooCommerce 插件
CodeCanyon 提供市場上最靈活、功能最豐富的 WooCommerce WordPress 插件，并將為您的在線商店添加用戶習慣的另一個功能維度。
無論您需要實現自定義字段和上傳、顯示多種貨幣還是提供會員資格，CodeCanyon 上提供的各種 WooCommerce 插件都可以幫助您完成這些任務。
除了所有可用的高質量 WooCommerce 插件外，CodeCanyon 上還有數千個其他高質量 WordPress 插件可以幫助增強您的網站。瀏覽一下廣泛的插件庫，您會發現所有類型的插件，包括論壇、媒體和 SEO 插件。
立即利用 CodeCanyon 上龐大的高質量 WordPress 插件庫！
如果您需要一些幫助來選擇適合您的 WooCommerce 插件，請查看 Envato Tuts+ 上的其他帖子：
