您是否曾經想創建一個包含所有或部分WooCommerce產品的可排序和可過濾的網格?

如果您經營WooCommerce商店,您就會知道WooCommerce已經帶有專用的存檔頁面,可幫助您展示單個產品。如何創建wordpress woocommerce產品網格1

但是,根據您的銷售產品,這並不總是展示產品的最有效方法。

在某些情況下,在網格中顯示WooCommerce產品更為有效。

而且,如果這聽起來像您遇到的情況,那您就很好,因為我將向您展示如何創建WooCommerce產品網格。

但是,如果您從未安裝過WordPress,請發現 如何安裝WordPress博客7步驟 et 如何找到,安裝和你的博客激活WordPress主題 

然後回到為什麼我們在這裡。

您可以使用WooCommerce產品網格做什麼?

雖然列表不完整,但在某些情況下,產品網格可以為訪問者帶來比常規存檔頁面更好的體驗:

發現 如何使用WooCommerce插件在WordPress上安裝在線商店

  • 批發商店 -如果批發很多產品,給客戶一種簡單的排序或過濾網格的方法可能比讓他們瀏覽單個產品頁面更為用戶友好。
  • 產品目錄 -同樣,如果您只想顯示易於瀏覽的產品目錄,則AJAX排序/過濾器網格將節省客戶的時間(並重新加載頁面)。
  • 訂單表格 -如果您要基於WooCommerce產品創建訂單,則網格提供了一種非常簡單的方法。 這也是顯示餐廳菜單和接受在線訂單的好方法。

如何創建WooCommerce產品網格

我們將使用該插件 WooCommerce產品表該插件僅專注於產品網格的創建。 並且由於其接口參數和 SHORTCODE,您幾乎可以自定義網格工作方式的每個方面。

另請閱讀我們的指南: 如何增加在你的WordPress博客上花費的時間

我認為以下是一些最有用的功能:

  • 輕鬆添加或刪除列 您甚至可以添加包含自定義字段或自定義分類法的列,並且WooCommerce產品表與高級自定義字段完全集成。
  • 包含4過濾器小部件。 通過側邊欄中的過濾選項,您可以為讀者提供無縫的體驗。
  • 產品變體/屬性支持。 從3種不同的方法中進行選擇,以在網格中顯示產品變體。
  • 多選框。 它允許客戶在將多種產品添加到購物車之前選擇多種產品,從而簡化了訂單的創建過程。
  • 即時搜索,排序和過濾 。 客戶無需重新加載頁面即可操縱您的網格數據。
  • 加入購物車 。 同樣,客戶可以將產品添加到購物籃中,而無需重新加載頁面。
  • 延遲加載支持。 有助於提高大型網格的性能( 儘管這會影響提供即時排序或過濾的能力 )

這是使用此插件的方法...

1步驟:配置默認網格功能

安裝並激活插件後,首先要做的是為網格配置默認功能。 查看有關如何安裝WordPress插件的分步指南。

這實質上定義了短代碼的默認行為。 但是,您還可以通過向短代碼添加參數來更改單個網格的此行為。

要訪問插件設置,請轉到 WooCommerce→設置。 然後點擊選項卡 熱銷產品 然後選擇選項 產品表 :

添加產品列woocommerce wordpress.png

配置網格的外觀

首先,您可以在該部分中選擇網格的樣式 表設計。 您可以執行以下操作:

  • 預設產品 -可以想像,此選項使用插件的默認設置,而無需您進行任何其他干預。 他將嘗試盡可能多地使用您博客的當前主題。
  • Personnalisé :選中後,它會展開樣式選項列表,使您可以自定義字體顏色和大小,而無需 自定義CSS.

自定義產品表css.png

設置樣式後,必須配置短代碼默認設置。 同樣,您可以通過後者的參數為單個短代碼編輯它們。 但是設置可以節省您的時間,並使以後的工作變得簡單一些。

配置產品表settings.png

大多數設置是不言自明的,您可以看到WooCommerce產品表在提供工具提示或文檔鏈接方面做得很好,可以幫助您了解有關每個設置的更多信息。

發現也 如何添加WooCommerce商店在Facebook上

設置短代碼默認設置後,您可以進一步滾動以配置更高級的佈局和功能設置。

產品table.png的高級配置

同樣,該插件做得很好。 一個為任何可能難以理解的參數提供附加信息的工具。 

如何控制您的WooCommerce在線商店的庫存 ? 通過單擊此鏈接來發現它。

要注意的一件事是 累進費用的限制。 如果您決定使用漸進式加載來加快在線商店的速度,則將限制插件的搜索和排序功能。

另請參閱我們的選擇 12最好的WooCommerce插件,可增強您的在線商店

配置完成後,請確保保存更改。

2步驟:添加WooCommerce網格小部件(可選)

如前所述,WooCommerce產品表還提供了四個小部件,可幫助您向側邊欄添加過濾選項( 您可以在經典的WooCommerce商店中使用 ).

要訪問它,請轉到 外觀→小部件 像往常一樣,在所需的小部件上滑動:

widget table woocommerce.png

步驟3:在要顯示產品網格的地方添加簡碼

您已到達終點! 現在您要做的就是添加簡碼 [product_table] 無論您要在哪裡顯示網格。

也發現 如何找到鏈接到WordPress的登錄頁面

默認情況下,該簡碼將根據您在步驟1中選擇的設置工作。但是,如果您要自定義特定簡碼的功能,則可以使用 許多短碼參數 可用。

例如,要僅在特定類別的產品上使用網格,可以添加如下參數:

[product_table 類別="帽子"]

您甚至可以發揮創造力,並在此處使用AND / OR條件。

例如:

  • [product_table 類別=“帽子 + in 明星« ] 僅顯示屬於 時間 帽子類別 et 在星星上。
  • Product_table 類別=“帽子 在 ] 顯示的產品 所以 帽子 ou 星級類別。

對小細節的關注使WooCommerce產品網格變得如此出色。 

另見我們的 6個WordPress插件為您的文章註入新的活力

這就是WooCommerce上產品網格的全部內容!

WooCommerce產品表插件定價

WooCommerce產品表專門是一個高級插件。 儘管WordPress.org目錄中列出了一些免費選項,但我還沒有找到任何靈活或有據可查的選項,所以我認為WooCommerce產品表值得這個價格,這是...

對於1網站 -$ 75

對於5網站 捲筒紙 -$ 135

對於20網站 -$ 275

還發現一些高級WordPress插件  

您可以使用其他 WordPress插件 賦予現代外觀並優化您的博客或網站的處理。

我們在這里為您提供了一些高級WordPress插件,它們將幫助您實現這一目標。

1。 HBook

HBook 是一個 WordPress插件 這將使您可以輕鬆地在您的網站上創建在線預訂解決方案。

書

它非常適合在酒店領域開展業務的任何人(酒店,度假公寓,露營等)。

發現我們的 5 WordPress插件可共享您博客的內容

格蘭 WordPress插件 HBook,您將能夠在幾秒鐘內將可用性日曆、價目表和預訂表格添加到您的網站。

下載 | DEMO | 虛擬主機 

2. WooCommerce Tabs Pro:產品頁面的額外選項卡

Ce WordPress插件 在產品頁面上為您提供無限的附加選項卡。額外的選項卡產品頁面,WordPress的,插件到頁面建設者

它的主要特點是: 更改標籤的標題,a 編輯器編輯自定義內容,是否固定標籤的可能性 標籤圖標,易於移除 標籤,p自定義公共界面上的標籤位置,例如還有更多...

下載 | DEMO | 虛擬主機

如果其訂戶從您現有的在線商店購買您的產品,則此WooCommerce插件使您的會員可以賺取積分。

Woocommerce多級推薦插件

其功能包括:配置個性化的信用和兌換限制,針對註冊用戶的完整管理報告,全局或特定產品參數的管理, 支持短代碼,還有更多。

也發現 如何在全球標題中添加下拉式聯繫表單

它是WooCommerce的多層聯屬會員系統,不屬於典型的聯屬會員交易系統。

下載 | DEMO | 虛擬主機

其他推薦資源

我們還邀請您參考以下資源,以進一步掌握和控製網站和博客。

結論

就是這樣! 本教程就是這樣。 希望您能夠在WordPress上創建WooCommerce產品網格. 隨意地 與社交網絡上的朋友分享提示.

但是,您也可以諮詢我們的 RESSOURCES,如果您需要更多的元素來執行創建Internet網站的項目,請參考我們關於 WordPress博客創建。

但是,與此同時,請告訴我們您的 評論 和專用部分中的建議。

...