WooCommerce簡碼（shortcode）可以讓我們將產(chǎn)品、購物車等內(nèi)容加入到頁面或者文章中。我們在外貿(mào)建站時，可以直接通過Elementor Pro的Product元素塊來配置產(chǎn)品的展示，但如果元素塊或是主題無法提供所需的產(chǎn)品配置呢？那學(xué)習(xí)WooCommerce簡碼能讓你自定義所需的產(chǎn)品展示，譬如在網(wǎng)站首頁，以tab標簽的形式展示不同類目的產(chǎn)品。
此外，如果你使用WordPress默認的古騰堡編輯器來編輯頁面或者文章，如下圖所示，點擊左上角的加號按鈕，在面板中你可以找到WooCommerce區(qū)塊，單擊區(qū)塊即可加入到頁面中。
它們與本文即將介紹的簡碼的作用是一樣的，簡碼是一小段代碼，需要你自己撰寫代碼規(guī)則，相比之下，這種區(qū)塊更易用。
雖然我們在制作網(wǎng)站頁面時，不大會使用古騰堡編輯器，譬如我常用Elementor編輯器進行外貿(mào)建站，即便如此，你依舊可以在給外貿(mào)網(wǎng)站寫博客文章時，通過這種方式插入相關(guān)的產(chǎn)品信息。
此外，學(xué)習(xí)了WooCommerce簡碼，當你再使用Elementor制作頁面時，能夠體會到更多的便利和靈活性，下文會有一些示例。
如何使用WooCommerce簡碼
以[woocommerce_cart]為例，它表示購物車頁面。當你向頁面中添加這個短代碼時，那這個頁面將包含購物車內(nèi)容。
在后臺給頁面添加了購物車簡碼
這是該頁面的預(yù)覽效果
如何修改WooCommerce我的賬戶、結(jié)算、購物車頁面的設(shè)計樣式
你也可以使用Elementor編輯這個頁面，給他增加一些設(shè)計樣式，下圖便是我用Elementor加了樣式后的效果（譬如我給內(nèi)容加了邊框和投影，給標題添加了背景色和底部形狀分隔線）。
如果你在嘗試用Elementor編輯這些頁面時提示無法編輯，請先前往WooCommerce的設(shè)置中取消關(guān)聯(lián)再編輯，編輯完成后再建立關(guān)聯(lián)。
推薦相關(guān)教程： Elementor的Advanced高級設(shè)置教程（18個功能點）
好，接下來我們開始介紹各種WooCommerce簡碼及其用途、示例。
頁面簡碼
在安裝WooCommerce時，如果按照WooCommerce安裝向?qū)?/a>操作，會自動生成4個頁面：我的賬戶、購物車、結(jié)算、商店。如果你想自行制作這些頁面，只需要添加頁面并加入這些簡碼即可。
其中購物車、結(jié)算、我的賬戶的簡碼如下。
[woocommerce_cart]– 購物車頁面[woocommerce_checkout]– 結(jié)算頁面[woocommerce_my_account]– 我的賬戶頁面[woocommerce_order_tracking]– 訂單跟蹤頁面，這個頁面未自動生成，你也可以自行添加。
當你編輯這些頁面時，你將看到下圖，實際上就是將簡碼加入了對應(yīng)頁面中。
購物車頁面
簡碼：[woocommerce_cart]
結(jié)算頁面
簡碼：[woocommerce_checkout]
我的賬戶頁面
簡碼：[woocommerce_my_account]
訂單跟蹤頁面
簡碼：[woocommerce_order_tracking]
產(chǎn)品簡碼
你可以使用產(chǎn)品簡碼在頁面、文章、產(chǎn)品詳情中插入產(chǎn)品。產(chǎn)品簡碼是products，你需要在簡碼中加入各種屬性組合，以便實現(xiàn)你想要展示的產(chǎn)品信息，我們繼續(xù)往下看。
我們先看一個示例，譬如：展示6個賣的最好的促銷產(chǎn)品，每行3個產(chǎn)品，它的簡碼如下。注意：下面的圖例中的展示效果與主題強相關(guān)，主題不同看到的“皮膚”不同哦。
[products limit="6" columns="3" orderby="popularity" on_sale="true"]
limit=”6″：表示展示6個
columns=”3″：表示一行展示3個
orderby=”popularity”：表示挑選賣的最好的商品
on_sale=”true”：表示挑選出來的產(chǎn)品是有促銷價格的
用簡碼存在的一個問題是，產(chǎn)品展示的外觀取決于你用的主題，無法在Elementor中對簡碼進行樣式上的細致修改，但能做一些整體的設(shè)置，譬如內(nèi)外間距、背景、邊框等等。
如果你想對細節(jié)進行樣式修改，那么建議你不要用簡碼，而是購買一個Elementor Pro，使用它的Product元素來自定義樣式。
接下來我們介紹一下可供使用的產(chǎn)品屬性
產(chǎn)品屬性
以下屬性可與Products簡碼一起使用。
展示類產(chǎn)品屬性
limit– 需要展示的產(chǎn)品數(shù)量，譬如，limit=”6″，默認是limit=”-1″，表示顯示全部產(chǎn)品，默認的意思是：如果你想展示全部產(chǎn)品，limit=”-1″可省略不寫，下方同理。columns– 每行的列數(shù)，默認為4，表示一行展示4個產(chǎn)品。paginate– 啟用翻頁功能，要與limit一起使用，默認值為false，設(shè)置為true可以啟用分頁功能，譬如：paginate=”true”。下圖的簡碼是：[products limit=”4″ columns=”4″ paginate=”true”]，表示每頁展示4個產(chǎn)品，每行展示4個產(chǎn)品，顯示產(chǎn)品翻頁功能。
-
orderby– 根據(jù)你設(shè)置的內(nèi)容選項來定義排序， 如果你想加入多個選項，多個選項之間以空格間隔，可用的選項包括如下：
rand– 在頁面加載時隨機呈現(xiàn)產(chǎn)品（可能不適用于使用緩存的站點，因為它可能會保存特定的順序）。rating– 產(chǎn)品的評分title– 產(chǎn)品標題，這是默認的orderby模式。date– 產(chǎn)品的發(fā)布日期-
id– 產(chǎn)品IDimage 120 - WooCommerce簡碼【實例講解】 -
menu_order– 菜單排序，編輯產(chǎn)品時，在產(chǎn)品數(shù)據(jù)》高級中可以設(shè)置菜單排序，請?zhí)顚憯?shù)值，數(shù)值越大越優(yōu)先展示。image 119 - WooCommerce簡碼【實例講解】 popularity– 產(chǎn)品的銷量
order– 為orderby中設(shè)置的選項定義排序方式，含：升序（ASC）和降序（DESC），默認為ASC。-
skus– 以英文逗號分隔多個產(chǎn)品的SKU，每個產(chǎn)品的sku是唯一的。編輯產(chǎn)品時，在產(chǎn)品數(shù)據(jù)》庫存中可以設(shè)置產(chǎn)品的SKU。image 121 - WooCommerce簡碼【實例講解】 -
category– 以英文逗號分隔多個產(chǎn)品分類的slug。image 122 - WooCommerce簡碼【實例講解】 -
tag– 以英文逗號分隔多個產(chǎn)品標簽，你可以在編輯產(chǎn)品時添加標簽，也可以在產(chǎn)品列表中，快速修改產(chǎn)品并添加多個標簽。image 123 - WooCommerce簡碼【實例講解】 class– 添加一個CSS Class，以便你可以使用自定義CSS修改產(chǎn)品的樣式（難度頗高，無CSS知識儲備的無視它）。on_sale– 展示促銷商品，不能與下文的best_selling或top_rated一起使用。best_selling– 展示銷量最好的商品，不能與on_sale或top_rated一起使用。top_rated– 展示評價最好的商品，不能與on_sale或best_selling一起使用。
內(nèi)容類產(chǎn)品屬性
-
attribute– 產(chǎn)品屬性，由你自己定義產(chǎn)品屬性，譬如鞋子顏色、尺碼，你可以指定產(chǎn)品的屬性slug來選取要展示的產(chǎn)品。image - WooCommerce簡碼【實例講解】 terms– 產(chǎn)品屬性值，通過指定產(chǎn)品屬性值來選取要展示的產(chǎn)品，譬如紅色、黃色鞋子，多個屬性值之間要用英文逗號分隔terms_operator– 產(chǎn)品屬性值之間的運算關(guān)系，包括：
AND– 表示“和”關(guān)系，將顯示包含全部所選屬性值的產(chǎn)品。IN– 表示“包含”關(guān)系，將顯示包含任一所選屬性值的產(chǎn)品，這也是TERMS_OPERATOR的默認值。NOT IN– 表示“不包含”關(guān)系，將顯示不包含任一所選屬性值的產(chǎn)品。
-
tag_operator– 產(chǎn)品標簽之間的運算關(guān)系，包括：
AND– 表示“和”關(guān)系，將顯示所有選定標簽中的產(chǎn)品。IN– 表示“包含”關(guān)系，將顯示包含任一所選標簽的產(chǎn)品。這是TAG_OPERATOR的默認值。NOT IN– 表示“不包含”關(guān)系，將顯示不包含任一所選標簽的產(chǎn)品。
示例：
按顏色屬性（attribute=”color”）展示不包含（terms_operator =”not in”）綠色或紅色（terms=”green,red”）的產(chǎn)品6個（limit=”6″），每行3個產(chǎn)品（columns=”3″）。
[products limit="6" columns="3" attribute="color" terms="green,red" terms_operator ="not in"]
-
visibility– 可見性，將根據(jù)你選定的可見性選項來展示產(chǎn)品，可見性的選項如下：image 2 - WooCommerce簡碼【實例講解】
visible– 可見的：在商店和搜索結(jié)果中可見的產(chǎn)品。這是默認的可見性選項。catalog– 產(chǎn)品目錄：產(chǎn)品僅在商店頁面、產(chǎn)品目錄頁中可見，在搜索時不可見。search– 搜索結(jié)果：產(chǎn)品僅在搜索結(jié)果中可見，但在商店、產(chǎn)品目錄頁中不可見。hidden– 隱藏：產(chǎn)品在商店、產(chǎn)品目錄頁和搜索結(jié)果都隱藏，只能通過訪問URL訪問。-
featured– 特色產(chǎn)品：是指標記為特色產(chǎn)品的產(chǎn)品，在產(chǎn)品列表中點亮小星星即為特色產(chǎn)品。image 3 - WooCommerce簡碼【實例講解】
category– 展示你選擇的產(chǎn)品類別的產(chǎn)品。cat_operator– 產(chǎn)品類別之間的運算關(guān)系，包括：
AND– 表示“和”關(guān)系，將顯示包含全部所選類別的產(chǎn)品。IN– 表示“包含”關(guān)系，將顯示包含任一所選類別的產(chǎn)品，這是cat_operator的默認值NOT IN– 表示“不包含”關(guān)系，將顯示不包含任一所選類別的產(chǎn)品。
-
tag– 展示你選擇的產(chǎn)品標簽的產(chǎn)品。
示例：只展示產(chǎn)品標簽里帶有demo的產(chǎn)品
[products tag="demo"]
ids– 展示所選產(chǎn)品ID的產(chǎn)品，多個ID之間以英文逗號分隔skus– 展示所選SKU的產(chǎn)品，多個ID之間以英文逗號分隔
注意：如果你所選的產(chǎn)品未展示，請確保它們的可見性沒有被設(shè)置為“隱藏”。
進階示例
我以前在建站時，會遇到這種需求：用標簽切換的形式展示不同類目的產(chǎn)品（見下方視頻）。但Elementor Pro里不提供這種形式的產(chǎn)品元素塊，學(xué)習(xí)了WooCommerce簡碼，我們就能用tab類元素塊+簡碼來實現(xiàn)。
Elementor免費版就提供了3種標簽切換元素塊，上圖用到的是tabs。
你只需要將簡碼放到tab的內(nèi)容里即可，如下圖所示，如果在編輯模式下無法看到效果，請update頁面后預(yù)覽。
產(chǎn)品分類簡碼
下面這兩個簡碼能夠在任何頁面上展示產(chǎn)品分類
product_category]– 展示指定分類下的產(chǎn)品product_categories]– 展示所有產(chǎn)品分類
產(chǎn)品分類屬性
-
ids– 指定要展示的分類id，多個id之間用英文逗號分隔，用在[product_categories]簡碼中 ，你可以通過下圖所示方式獲取分類的id，也可以查看編輯產(chǎn)品分類頁面的url獲取id
category– 可以是分類id、slug或名稱，用在product_categorylimit– 要展示的分類數(shù)量columns– 每行展示的數(shù)量，即列數(shù)，默認值是4。hide_empty– 默認值是1，表示隱藏?zé)o產(chǎn)品的空分類。如果設(shè)置為0，則展示空的分類。parent– 可設(shè)置展示某個分類ID的所有子分類。如果設(shè)置為“0”，則僅顯示一級分類。orderby– 默認按“名稱”排序，可設(shè)置為按“ID”、“Slug”或“menu_order”排序。如果要按你指定的ID排序，則可以使用orderby=“include”order– 基于orderby中的排序依據(jù)，設(shè)置產(chǎn)品分類的排序是升序（ASC）還是降序（DESC），默認為升序ASC。
產(chǎn)品分類簡碼示例
展示指定的多個產(chǎn)品分類，并按照所選的產(chǎn)品分類id排序
[product_categories ids="16,17,19,18" orderby="include"]
展示2個有產(chǎn)品的一級產(chǎn)品分類
[product_categories limit="2" parent="0"]
展示指定分類下的所有產(chǎn)品
[product_category category="clothing"]
這個代碼我放到了不同主題里效果不同，有些主題下展示的樣貌慘不忍睹つ﹏?，目前porto主題的預(yù)覽效果不錯。
產(chǎn)品頁面簡碼
按ID或SKU顯示一個完整的產(chǎn)品頁面。（雖然我也想不到這個的常見使用場景，譬如在博客文章里直接插入產(chǎn)品？emm..也是可以的哈）
[product_page id="16"]
[product_page sku="99"]
相關(guān)產(chǎn)品簡碼
[related_products limit=”12″]
這個簡碼通常用于放在產(chǎn)品頁面，主題通常都會配置展示相關(guān)產(chǎn)品的功能。
加入購物車簡碼
按產(chǎn)品ID顯示單個產(chǎn)品的價格和“添加到購物車”按鈕。
在非WooCommerce的頁面上顯示W(wǎng)ooCommerce通知
shop_messages簡碼允許您在非WooCommerce頁面上顯示W(wǎng)ooCommerce通知（如“產(chǎn)品已添加到購物車”）。
當您使用其他簡短代碼（如add_to_cart）并希望用戶對其操作獲得一些反饋時，這將非常有用。
簡碼
效果示例
常見注意事項
- 建議在編輯器的文本模式下加入簡碼，而不是可視化模式
- 注意簡碼的雙引號是英文符號””，而非中文的雙引號“”
本文首發(fā)于：https://loyseo.com/woocommerce-shortcodes/
推薦閱讀：
WooCommerce教程
本文原文由LOYSEO 發(fā)布，LOYSEO專注于WordPress外貿(mào)網(wǎng)站建設(shè)教程、Elementor教程。
