如何在 WooCommerce 中新增網格產品？

在 WooCommerce 商店的任何位置添加網格產品佈局可以讓客戶輕鬆瀏覽和探索您網站上的產品，從而大大增強用戶體驗。

無論您將其放在主頁、產品頁面還是自訂部分，網格佈局都提供了一種簡化的方式來顯示您的產品並提高可見度。

在這篇文章中，我將指導您完成建立 WooCommerce 產品網格並將其新增至您網站上的任何頁面的步驟。

為什麼在 WooCommerce 中加入網格產品？

預設情況下，WooCommerce 在商店部分顯示網格產品，但將網格產品新增至網站的其他部分可以提高參與度並提高轉換率。

將此網格產品放置在您的主頁、登陸頁面或部落格文章上，可以讓訪客更輕鬆地發現和探索各種網格產品，鼓勵他們更有效地瀏覽和購買。

如何在 WooCommerce 中新增網格產品？

使用 Elemento Addon for Elementor 可以輕鬆新增網格產品。這個強大的工具可讓您為 WooCommerce 商店創建動態且引人入勝的滑桿，從而增強產品發現和使用者體驗。

關於 Elementor 的 Elemento 外掛：

Elemento Addon for Elementor 是一款多功能插件，可協助您建立美觀且實用的 WooCommerce 部分。

它提供了各種小部件，包括網格產品，讓您可以輕鬆地在網站上的任何位置展示產品。

如何在 WooCommerce 中新增網格產品？

第 1 步：安裝並啟動 WooCommerce 和 Elementor

確保您的 WordPress 網站上安裝並啟動了 WooCommerce 和 Elementor。

如果您尚未安裝它們，請導航至插件>新增插件，搜尋“WooCommerce”或“Elementor”，然後按一下“立即安裝” ，然後按一下「啟用」 。

第 2 步：安裝並啟用 Elemento Addons 插件

從 ThemeHunk 下載Elemento Addons外掛程式。

在 WordPress 儀表板中，前往外掛程式>新增外掛程式。

點擊“上傳外掛程式”按鈕，然後選擇下載的 zip 檔案。

第 3 步：使用 Elementor 建立新頁面

若要建立新頁面，請導覽至「頁面」部分，然後按一下「新增頁面」 。如果需要進行更改，也可以選擇現有頁面進行編輯。

此外，您可以將網格產品無縫添加到任何頁面，以有序的佈局展示您的產品。

選擇「使用 Elementor 編輯」以啟動 Elementor 頁面建立器。

在左側，您可以找到可以透過向下捲動來存取插件的面板。

步驟 5： 搜尋並新增 Grid 產品外掛程式。

在 Elementor 面板中，搜尋「Grid Product」 （此小工具可在Elemento Addons中找到）。

將網格產品小工具拖曳到您建立的部分中。

第 6 步：客製化網格產品。

新增小工具後，您將在左側面板上看到一系列自訂選項。

在「內容」標籤中，選擇您希望在網格中展示的特定 WooCommerce 產品類別。

您可以調整每行顯示的產品數量，修改佈局設置，並在「佈局」 、「要顯示的產品數量」、「列數」和「樣式」標籤中調整滑桿速度。

第 7 步：發布和預覽

完成設定後，按一下「發布」即可上線。

網格產品現在顯示在新建立的頁面上。

常問問題：

結論

在 WooCommerce 商店中添加網格產品佈局是增強用戶體驗、提高產品可見度和增加轉換率的好方法。

使用 Elementor Addon 插件，可以輕鬆有效地創建引人入勝且具有視覺吸引力的網格顯示。

透過以結構化網格格式展示您的產品，您可以讓客戶更輕鬆地瀏覽您的產品，鼓勵更多互動並推動您網站上的銷售。

如果本文有幫助，請隨時與其他人分享。有任何疑問嗎？請在下面發表評論，我們將很樂意為您提供協助。感謝您的閱讀！

請訂閱我們的YouTube 頻道，我們也在那裡上傳精彩內容，也請在Facebook和Twitter上關注我們

更多有用的讀物：

• Elemento 的 Elemento 外掛程式可增強您的網站設計體驗
• 如何解決“更新失敗。 WordPress 中的回應不是有效的 JSON 回應”
• 如何使 WooCommerce 插件相容高效能訂單存儲