WooCommerce:在商店頁面上顯示類別!
已發表: 2022-06-16客戶在您的 WooCommerce 商店的商店頁面上看到您的商品。 因此,此頁面的呈現方式和風格對您的轉化至關重要。 此外,您商店的佈局選擇可能會因您的業務類型而異。
按類別組織您的 WooCommerce 商店的商品是一種很好的方法,可以讓客戶更輕鬆地找到他們正在搜索的內容。 由於 WooCommerce 能夠對您的產品進行分類,您的客戶將能夠快速掃描並發現他們正在尋找的商品。
您可以在 WooCommerce 商店和存檔頁面中僅顯示產品、類別或同時顯示產品和類別。 創建 WooCommerce 類別並在商店或存檔頁面上顯示它們是本文的主題。
我們將在這篇文章中研究在商店頁面上顯示類別的過程。
在商店頁面中顯示類別
轉到 WordPress 管理面板中的外觀 -> 自定義 -> WooCommerce 並選擇產品目錄以查看選項。 商店頁面顯示選項可在此處找到。 顯示產品、顯示類別或顯示類別和產品都是下拉菜單中的選項。

如果要在商店頁面上顯示所有類別,請選擇第一個選項。 現在將顯示您的所有項目,正如您通過查看它們所看到的那樣。

當您有許多項目和類別時,您必須考慮客戶找到他們正在尋找的東西是多麼容易。 第二個選項允許您只顯示類別。 當用戶選擇一個類別時,他們可以查看該類別中的所有產品。

如果您想為您的消費者提供兩全其美的體驗,您可以選擇第三個選項。 此處將顯示產品和子類別的組合。 想要按類別查找產品的人可以訪問類別頁面。 如果你想直接進入產品頁面,你也可以這樣做。

分類頁面顯示
使用 WooCommerce,您可以自定義類別頁面的外觀。 單擊商店頁面上的類別名稱的客戶將被發送到該類別的單個頁面。 您將如何管理類別頁面的顯示? 這將在以下設置中完成。
產品和子類別可以單獨顯示,也可以同時顯示。
如果您選擇產品,類別頁面會顯示一個類別中的所有商品。
您可以通過選擇一個或多個子類別來查看該類別的所有子類別。 此外,可以通過單擊子類別訪問子類別。
類別頁面可以將產品和子類別一起顯示為最終選項。 同樣,您在這裡有多種選擇,因此請選擇最適合您業務的選擇。
解決問題後,如果您發現某些產品缺少圖像,則可以輕鬆解決。 轉到 WordPress 儀表板 -> 產品 -> 類別。 開始編輯要添加圖像的類別。 然後向下滾動,您會看到一個上傳/添加圖片選項,您可以在其中添加圖片。
ProductX 商店頁面
現在,我們已經了解了默認情況下如何在商店頁面上顯示類別。 但是,如果您製作自定義商店頁面,您將無法顯示它。 這就是 ProductX 發揮作用的地方。使用 ProductX,您可以輕鬆管理和自定義您的商店頁面、默認類別和自定義類別。 例如,在 WooCommerce 中,您不能顯示特定產品和另一個特定類別(或子類別)。 但是,使用 ProductX,您可以輕鬆做到這一點,因此可能性是無限的。
ProductX 提供多個產品網格、產品列表、產品類別、產品滑塊、包裝器等,以創建和自定義商店頁面和商店頁面模板。
所以,事不宜遲,讓我們開始吧。
類別
首先,你必須去 WordPress Dashboard->ProductX->Addon。 然後打開構建器選項。

然後從 ProductX 中選擇一個構建器並單擊添加新的。

隨意命名您的模板,然後在“選擇模板類型”中選擇商店。

首先,選擇一個產品類別。 ProductX 目前提供 2 種產品類別網格。
然後,您可以通過右側邊欄上的設置開始對其進行自定義。 轉到查詢,您將找到以下選項:
- 常規的
- 的孩子
- 家長
- 風俗
如果您選擇常規,商店頁面將展示所有類別。

如果您選擇 Child Of,您將看到名為 Category 的新選擇菜單,就在 Query Type 的正下方。 例如,您有一個名為“服裝”的父類別。 在此之下,您有一些子類別,例如“襯衫”和“連帽衫”。 選擇這些選項將展示“服裝”中的所有子類別。

如果您選擇父,您可以在商店頁面上顯示所有類別。 您可以通過在查詢類型下方的類別菜單上選擇它來自定義要顯示的父類別。

然後是稱為習慣的終極自由。 如果您選擇自定義,您可以專門選擇您選擇的類別以將其顯示在您的商店頁面上。

產品
在您的自定義商店頁面中,您還可以在類別旁邊顯示產品商店頁面。 為此,您必須選擇一個產品網格。 ProductX 目前提供多個產品網格。
你猜怎麼著! 您也可以通過選擇右側邊欄中的設置選項來自定義它。 您將在此處看到多個設置:
- 一般的
- 詢問
- 價格
- 審查
- 銷售量
- 大車
- 圖片
- 標題
- 標題
- 類別
- 先進的

結論
我們可以看到,您可以在使用 ProductX 時在商店頁面、子類別以及兩者上顯示類別。 因此,您將能夠更好地組織您的商店,並使客戶更容易找到他們正在尋找的東西。
自定義您的 WooCommerce 商店時,此插件有多種可用選項和設置。
我們希望這篇文章能讓您更好地了解如何使用 ProductX 在商店頁面上顯示類別。
創建完整網站的最佳 WordPress 新聞插件
介紹 ProductX 的 WooCommerce 延期交貨插件
如何在 Gutenberg 編輯器中完美顯示自定義分類法
PostX 2.4.9:新功能!