如何創建漂亮的 WooCommerce 商店頁面（5 個步驟）

正在尋找自定義 WooCommerce 商店頁面的最簡單方法？

WordPress 提供了各種各樣的塊來幫助您創建專業網站。 如果您使用 WooCommerce，您還可以訪問可用於在線商店的專用 WooCommerce 塊。

因此，您可能想知道如何使用這些元素來構建推動轉化的 WooCommerce 商店頁面。

幸運的是，這個過程非常簡單。 使用這些塊，WooCommerce 可以讓您以不同的方式展示您的產品。 此外，您還可以添加過濾器和搜索功能，讓用戶更輕鬆地瀏覽您的商店。

在本文中，我們將向您展示如何使用 blocks 創建漂亮的 WooCommerce 商店頁面。 您可以遵循我們的指南並根據需要選擇要使用的塊。 讓我們開始吧！

目錄：

1. 放置所有產品塊
2. 添加特色產品和/或精選產品塊
3. 在商店頁面上啟用產品搜索
4. 使用特色類別塊
5. 添加按價格過濾產品的選項

如何使用塊自定義 WooCommerce 商店頁面

首先，您需要打開商店商店頁面的編輯器。 然後，按照這些說明自定義其內容。

1. 放置所有產品塊

商店頁面有各種形狀和大小。 在在線商店中，此頁面通常會顯示您要出售的所有產品。 用戶可以單擊單個商品打開各自的產品頁面或直接將它們添加到購物車（如果商店允許的話）：

使用 WordPress 和 WooCommerce，您可以完全控製商店頁面中要包含的元素。 此頁面的外觀將取決於您使用的主題以及您如何配置它。

當您開始使用該插件時，WooCommerce 會自動設置一個商店頁面，因此您可以繼續查看您的外觀。 當您準備好對其進行編輯時，請轉到Pages並找到Shop選項。

在塊編輯器中打開此頁面，您應該會看到如下內容：

默認情況下，商店頁麵包括所有產品塊和標題。 如果您沒有看到此塊，您可以通過單擊加號 (+)並從選項列表中選擇它來將其添加到頁面：

所有產品塊顯示一個網格，其中包含您商店的所有產品，從新到舊排序。 要更改產品的顯示順序，請單擊該塊並轉到右側的設置面板。 然後，導航到Content Settings部分並從Order Products By菜單中選擇您的偏好：

同時，在Layout Settings下，您可以選擇要在產品網格中顯示的列數和行數。 隨意探索此塊可用的其他選項。

2. 添加特色產品和/或精選產品塊

許多商店頁面突出顯示特定產品。 這些通常是店主想要引起注意的項目，例如新的或打折的庫存或最近添加的產品。 WooCommerce 帶有一個特色產品塊，可讓您展示商店中的任何商品。

將此塊放置在頁面上後，您需要選擇要展示的產品並單擊完成：

然後，WooCommerce 將顯示產品的圖像、名稱、價格、描述和號召性用語 (CTA)。 該塊應如下所示：

然後，您可以根據自己的喜好自定義此塊。 例如，您可能會更改圖像並修改 CTA 按鈕。

將特色產品塊添加到您的 WooCommerce 商店頁面的缺點是它可能會分散用戶對您其他產品的注意力。 為了解決這個問題，我們建議使用列並排顯示多個特色產品：

特色產品塊的替代方案是精選產品選項。 此塊使您可以選擇多個產品並並排顯示它們。 它使用與All Products塊相同的樣式：

Featured Products 和 Hand-Picked Products 塊都實現了類似的目的。 理想情況下，您將選擇兩個選項之一，以免過多的特色項目使訪問者不知所措。 我們還建議將這些塊放置在頁面頂部，這樣用戶就不會錯過它們。

3.在商店頁面啟用產品搜索

如果您的商店擁有大量產品目錄，則需要提供搜索功能。 通過這種方式，用戶無需瀏覽整個商店即可查找他們心目中的任何特定商品。

向商店頁面添加搜索塊時，您需要查找產品搜索選項，而不是默認的 WordPress 搜索塊。 產品搜索會將結果限制為 WooCommerce 產品，而其他搜索塊將包括您網站上的所有其他頁面。

這是 WooCommerce 搜索功能的樣子：

請記住，產品搜索塊在編輯器中不起作用，因此您需要在前端對其進行測試。 此外，該塊不提供自動完成功能，因此用戶需要輸入完整的查詢並加載新頁面才能查看結果。

4.使用特色類別塊

除了將用戶引向精心挑選的產品外，您可能還希望突出顯示特定的產品類別。 如果您銷售多種類型的產品，這可能特別有用，因為它使用戶能夠在特定部門中查找商品。

首先將特色類別塊添加到您的 WooCommerce 商店頁面。 然後，選擇您要突出顯示的產品類別並單擊完成：

以下是特色類別塊的外觀：

該塊允許您更改背景和文本的顏色，但它不提供很多額外的自定義選項。 此外，由於塊佔用大量空間，我們建議使用列並排放置多個特色類別：

由於特色產品類別塊非常基本，我們建議您查看諸如 Otter Blocks 之類的插件以進行進一步定制。

使用 Otter Blocks，您可以通過添加動畫和其他可見性設置來修改 WooCommerce 塊：

此外，Otter Blocks 添加了多種新的積木，您可以在您的在線商店中使用這些積木。 其中包括彈出窗口（非常適合收集電子郵件註冊）和產品評論等選項。

5. 添加按價格篩選產品的選項

到目前為止，您的商店有一個搜索欄、精選產品、特色類別和您的整個產品目錄。 您所缺少的只是用戶過濾產品的一種方式。

按價格篩選產品塊使客戶能夠做到這一點。 該塊顯示一個滑塊，讓客戶可以設置他們想要查看的產品的最低和最高價格：

價格值不可編輯 - 它們取決於您的產品價格。 訪問者可以輸入他們想要的值或使用滑塊來修改它們。

當您更改價格滑塊時，所有產品塊將更新以顯示符合條件的產品。 這發生在用戶無需重新加載頁面的情況下。

就展示位置而言，我們建議您在產品目錄上方添加按價格篩選產品塊。 這樣，用戶在向下滾動頁面時就會看到它。

您還可以讓用戶按尺寸、顏色和其他功能過濾產品。 按屬性篩選產品塊可讓您根據商店中可用的選項瀏覽符合所選屬性的產品。

差不多就是這樣！ 完成後，請確保保存更改，您的新商店頁面將立即開始工作。

立即設置您的 WooCommerce 商店頁面

您的最終目標是創建一個頁面，通過為用戶提供他們在佈局和合理的順序中尋找的所有選項，從而最大限度地提高轉化率。

設置 WooCommerce 商店頁面後，您可以將注意力轉向單個產品頁面。 為此，請務必查看我們關於如何優化 WooCommerce 產品頁面的指南。

您對如何使用塊創建 WooCommerce 商店頁面有任何疑問嗎？ 在下面的評論部分讓我們知道！