如何用Elementor製做Woocommerce產品列表

本文是LOYSEO的外貿網站建設教程內容之一，我將逐步介紹如何使用Elementor Pro製做woocommerce產品列表模板，下面進入正題。

原文首發於：https://loyseo.com/creating-a-woocommerce-archive-template-with-elementor-pro/

視頻教程

20201129備註：1.你也能夠用下面圖文教程中的post元素塊來製做產品列表；2.在視頻中，在側邊欄插入的搜索按鈕換行問題是主題Bug,你能夠安裝一個Ajax Search for WooCommerce來替代它（相關教程排期中）

圖文教程

進入「 模板」>「添加新模板」，選擇類型爲 「Product archive」，爲其命名，而後單擊「 建立模板」

而後，在彈出的模板庫頁面上，能夠選擇一個模板，點擊insert按鈕導入

導入後，頁面上只有兩個元素，一個是archive title（列表標題）、一個是archive products（產品列表），請點選他們後右鍵刪除，模板裏的元素塊都很差用，設置受限，咱們會換兩個發揮空間更大的元素；而後按照下圖所示，將標題的context選項關閉，關閉後就不會在標題前顯示文案「Archives:」了。

接下來按下圖所示，咱們在左側元素庫中搜索Heading元素，並將它拖拽到右側的畫布中，按照下圖設置，點擊title右側的按鈕，並選擇archive title，並在setting中將標題的include context選項關閉，關閉後就不會在標題前顯示文案「Archives:」了；此外，將HTML tag從H2改成H1，表示當前標題爲整個頁面的大標題。

而後，咱們在左側元素庫中搜索POST元素，並將它拖拽到右側的畫布中，而後按左側圖片所示，設置這個POST元素的Query，將source選爲current query，由於默認post元素是展現Posts（文章）的，設置爲current query，就能夠根據頁面的用途來選取展現的內容，這裏咱們作的是產品列表，那麼就會取產品展現，譬如打開某個產品分類頁面時，就會取該分類下的產品展現。

再次，咱們能夠按需調整一下產品的皮膚，見下圖，有三種模式：classic、cards、full content，我比較喜歡第二種card，也是下圖中所示的效果。

接下來咱們進行細節調整，下圖是調整後的效果：

• colunms：默認爲3，表示一行展現3個產品，點擊旁邊的電腦圖標，能夠切換到平板、手機設備模式，這樣能夠配置在不一樣設備上一行能展現的產品數量

• Posts per page：默認爲6，表示一頁展現6個產品，你也能夠設置爲-1，那就是一頁展現全部產品。

• Show image：默認爲YES，表示展現產品圖片，若選擇NO，那就不展現圖片啦

• Masonry：默認是關閉的，關閉時，不論產品簡介內容長短，每一行的產品都是等高的，若是一行中產品簡介又長又短，那麼短的下方會留有空白；若開啓masonry時，那產品就像砌牆同樣，不會留有空白，而是錯落有致。（說了這麼多不如你本身點一下按鈕試試看了~）

• Image size：調整圖片的尺寸，默認是300×300px，通常也不用改

• Image ratio：用於設置圖片比例，一般保持默認的0.66便可

• Title：默認爲開啓，滑動開關能夠選擇顯示或隱藏標題

• Title html tag：默認是H3，因爲頁面的標題是H1，若是頁面沒有其餘H2的話，此處我建議改成H2

• Excerpt：默認爲開啓，選擇顯示或隱藏產品簡介（又叫產品簡短描述）

• Excerpt length：設置簡介的文字長度，默認爲25，按需增減吧

• Meta data：默認是data、comments，還有author、time兩個選項，能夠多選，但做爲產品列表頁，咱們將他們都去掉，去掉就再也不顯示在產品中了

• Separator between：默認是·，用於間隔不一樣的mata data

• Read more：默認是開啓，滑動開關能夠選擇顯示或隱藏查看更多按鈕

• Read more Text：在這裏設置按鈕的文案，默認是read more

• open in new windows：默認是關閉，滑動開關能夠選擇是否須要開啓在新窗口打開產品

• Badge：徽章，顯示在圖片上，滑動開關能夠選擇顯示或隱藏徽章

• Badge taxonomy：此處選擇徽章上顯示的內容，若是是產品列表頁，此處要改成product category

• Avatar：滑動開關能夠選擇顯示或隱藏發表當前產品或文章的用戶頭像，默認是開啓，此案例中我將它關閉

最後，咱們點擊左下角的update，並將conditon設置爲all product archive，保存後，產品列表模板頁面就完成了，咱們就能夠去找到任一產品分類，打開它的的頁面查看一下了。

相關教程：對模板進行樣式調整、添加自定義的產品字段
查看更多Elementor教程

本文原文由LOYSEO 發佈，LOYSEO專一於WordPress外貿網站建設教程、Elementor教程。