如何使用所有產品 WooCommerce 塊

如果你想 你的網上商店 要取得成功,僅僅為您的客戶提供令人驚嘆的產品是不夠的。 您還需要知道如何在您的網站上有效地展示它們。 幸運的是,所有產品 WooCommerce 塊使您能夠在任何頁面或您想要的帖子上以整潔的網格展示您的所有項目。

在本文中,我們將仔細研究「所有產品」塊的工作原理,並向您展示如何將其添加到您的站點。 我們還將討論一些有效使用此塊的最佳實踐。

讓我們開始吧!

如何將所有產品 WooCommerce 塊添加到您的帖子或頁面

所有產品塊使您能夠在具有分頁和排序選項的專業網格中顯示所有產品。 但是,此功能僅在您 使用 WooCommerce. 使用該插件,您還可以訪問所有其他 WooCommerce 塊 在塊編輯器中。

要使用「所有產品」塊,請打開您想要展示您的商品的頁面或帖子。 然後單擊加號 (+) 添加新塊,並使用搜索欄查找所有產品選項:

how-to-use-the-all-products-woocommerce-block-1 如何使用所有產品 WooCommerce Block

插入塊後,您將看到完整的產品列表:

how-to-use-the-all-products-woocommerce-block-2 如何使用所有產品 WooCommerce Block

默認情況下,該塊每行顯示三個項目,每頁顯示九個。 它還顯示了每個產品的關鍵細節,包括其名稱和價格,以及圖像和 號召性用語 (CTA) 按鈕。 但是,您可以選擇修改網格的外觀和其中包含的項目。

所有產品 WooCommerce 阻止設置和選項

現在,讓我們探索所有產品塊提供的主要設置。 首先,我們將查看用於修改網格外觀的選項。

如果單擊該塊,您將在右側的面板中獲得一系列設置:

how-to-use-the-all-products-woocommerce-block-3 如何使用所有產品 WooCommerce Block

在布局設置下,您可以選擇希望每頁顯示的行數和列數。 您還可以定義最後一個內部塊的對齊方式。 在我們的示例中,這是 CTA 按鈕:

how-to-use-the-all-products-woocommerce-block-4 如何使用所有產品 WooCommerce Block

當我們打開對齊最後一個塊選項時,會發生以下情況:

how-to-use-the-all-products-woocommerce-block-5 如何使用所有產品 WooCommerce Block

如果向下滾動面板,您還會看到內容設置:

how-to-use-the-all-products-woocommerce-block-6 如何使用所有產品 WooCommerce Block

默認情況下,該塊帶有一個下拉菜單,允許用戶按受歡迎程度、平均評級、價格和其他變數對產品進行排序。 您可以選擇禁用此功能,或從訂購產品依據下的下拉菜單中選擇排序選項。

最後,我們有高級設置:

how-to-use-the-all-products-woocommerce-block-7 如何使用所有產品 WooCommerce Block

此部分使您能夠添加新的 CSS 類 到塊。 但是,我們建議您僅在知道如何使用樣式表的情況下才使用此功能。

讓我們繼續配置網格內的項目。 如果再次單擊該塊,您將獲得一個包含四個主要設置的工具欄:

how-to-use-the-all-product-woocommerce-block 如何使用所有產品 WooCommerce 塊

以下是每個選項的快速概覽:

  1. 更改塊類型或樣式:您可以將其轉換為組塊或列塊。
  2. 更改對齊方式:您可以選擇全寬或寬寬布局。
  3. 編輯:這使您能夠修改塊內的元素。
  4. 選項:您可以複製塊,將其分組,將其添加到您的 可重複使用的塊,或刪除它。

如果要編輯網格內的產品,則需要選擇第三個選項。 這將使您能夠處理預覽中的塊:

how-to-use-the-all-products-woocommerce-block-8 如何使用所有產品 WooCommerce Block

如果您單擊某個元素(例如產品圖片),您將在右側面板中看到它的一些設置:

how-to-use-the-all-products-woocommerce-block-9 如何使用所有產品 WooCommerce Block

例如,您可以選擇是將圖片鏈接到產品頁面,還是顯示相關商品的「促銷」徽章。 您還可以選擇銷售徽章的對齊方式,並將圖像大小設置為全尺寸或裁剪。

此外,您可以選擇插入其他 WooCommerce 塊。 您需要做的就是單擊加號圖標 (+) 並選擇一個元素:

how-to-use-the-all-products-woocommerce-block-10 如何使用所有產品 WooCommerce Block

您還可以使用工具欄中的向上和向下箭頭移動塊。 如果您想刪除一個塊,您只需單擊它並按鍵盤上的 Delete 鍵(或從工具欄選項中選擇「刪除塊」)。

如果您對更改感到滿意,請單擊「所有產品」塊中的「完成」按鈕。 如果要撤消所做的所有更改,可以改為選擇「重置布局」。

有效使用所有產品 WooCommerce 塊的提示和最佳實踐

正如我們所見,所有產品 WooCommerce 塊提供了一種在一個地方顯示所有產品的有效方法。 但是,在使用此功能時需要考慮一些事項。

例如,您可能希望盡量減少顯示的產品信息。 雖然您可能想在「所有產品」塊中插入更多 WooCommerce 元素,但展示太多細節可能會讓潛在客戶不知所措。 相反,我們建議您堅持最重要的細節,尤其是產品名稱和價格。

此外,您可能希望確保每個項目都鏈接回相關的產品頁面。 這樣,對產品感興趣的用戶可以單擊它以了解更多信息。

最後,我們還建議您一次只顯示幾個項目:

how-to-use-the-all-products-woocommerce-block-11 如何使用所有產品 WooCommerce Block

用無盡的產品行填滿整個頁面可能會讓您的用戶筋疲力盡。 它還可能對以下方面產生負面影響 您的頁面載入時間,這可能會損害整體用戶體驗。

關於所有產品 WooCommerce 塊的常見問題

在這一點上,我們已經涵蓋了您需要了解的有關所有產品 WooCommerce 塊的所有主要內容。 但是,您可能仍然對此有一些疑問。 讓我們來看看有關此塊的一些最常見的查詢。

我可以從所有產品塊更新產品詳細信息嗎?

不幸的是,這個問題的答案是否定的。 此塊只能選擇要顯示的產品詳細信息。 如果您想更新商品的價格或任何其他相關信息,您需要在儀錶板內的產品頁面上執行此操作。

我可以從塊中排除某些產品,或限制產品數量嗎?

顧名思義,所有產品塊顯示您的所有 WooCommerce 產品。 目前沒有排除某些產品或限制出現在塊中的項目數量的選項。

塊內是否有搜索功能?

使用「所有產品」塊,用戶可以按不同標準對產品進行排序並瀏覽各個頁面。 但是,沒有搜索功能使他們能夠在塊本身內搜索產品。 話雖如此,您可以使用產品搜索 WooCommerce 塊來幫助訪問者更輕鬆地找到他們正在尋找的內容。

結論

所有產品 WooCommerce 塊使您能夠在您網站的任何位置顯示您產品的完整目錄。 您還可以設置每頁顯示的項目數,並選擇要顯示的產品信息。

為避免讓您的訪問者感到不知所措,我們建議您僅顯示最重要的產品詳細信息,例如名稱和價格。 客戶只需單擊一個項目即可訪問相關頁面並了解有關該產品的更多信息。

您對如何使用 WooCommerce 中的所有產品塊有任何疑問嗎? 在下面的評論部分讓我們知道!

精選圖片來自 Julia Tim/shutterstock.com

來源

相關文章