WooCommerce簡碼（shortcode）可以讓我們将産品、購物車等内容加入到頁面或者文章中。我們在外貿建站時，可以直接通過Elementor Pro的Product元素塊來配置産品的展示，但如果元素塊或是主題無法提供所需的産品配置呢？那學習WooCommerce簡碼能讓你自定義所需的産品展示，譬如在網站首頁，以tab标簽的形式展示不同類目的産品。
此外，如果你使用WordPress預設的古騰堡編輯器來編輯頁面或者文章，如下圖所示，點選左上角的加号按鈕，在面闆中你可以找到WooCommerce區塊，單擊區塊即可加入到頁面中。
它們與本文即将介紹的簡碼的作用是一樣的，簡碼是一小段代碼，需要你自己撰寫代碼規則，相比之下，這種區塊更易用。
雖然我們在制作網站頁面時，不大會使用古騰堡編輯器，譬如我常用Elementor編輯器進行外貿建站，即便如此，你依舊可以在給外貿網站寫部落格文章時，通過這種方式插入相關的産品資訊。
此外，學習了WooCommerce簡碼，當你再使用Elementor制作頁面時，能夠體會到更多的便利和靈活性，下文會有一些示例。
以<code>[woocommerce_cart]</code>為例，它表示購物車頁面。當你向頁面中添加這個短代碼時，那這個頁面将包含購物車内容。
在背景給頁面添加了購物車簡碼
這是該頁面的預覽效果
你也可以使用Elementor編輯這個頁面，給他增加一些設計樣式，下圖便是我用Elementor加了樣式後的效果（譬如我給内容加了邊框和投影，給标題添加了背景色和底部形狀分隔線）。
如果你在嘗試用Elementor編輯這些頁面時提示無法編輯，請先前往WooCommerce的設定中取消關聯再編輯，編輯完成後再建立關聯。
推薦相關教程： Elementor的Advanced進階設定教程（18個功能點）
好，接下來我們開始介紹各種WooCommerce簡碼及其用途、示例。
在安裝WooCommerce時，如果按照WooCommerce安裝向導操作，會自動生成4個頁面：我的賬戶、購物車、結算、商店。如果你想自行制作這些頁面，隻需要添加頁面并加入這些簡碼即可。
其中購物車、結算、我的賬戶的簡碼如下。
<code>[woocommerce_cart]</code> – 購物車頁面
<code>[woocommerce_checkout]</code> – 結算頁面
<code>[woocommerce_my_account]</code> – 我的賬戶頁面
<code>[woocommerce_order_tracking]</code> – 訂單跟蹤頁面，這個頁面未自動生成，你也可以自行添加。
當你編輯這些頁面時，你将看到下圖，實際上就是将簡碼加入了對應頁面中。
簡碼：<code>[woocommerce_cart]</code>
簡碼：<code>[woocommerce_checkout]</code>
簡碼：<code>[woocommerce_my_account]</code>
簡碼：<code>[woocommerce_order_tracking]</code>
你可以使用産品簡碼在頁面、文章、産品詳情中插入産品。産品簡碼是products，你需要在簡碼中加入各種屬性組合，以便實作你想要展示的産品資訊，我們繼續往下看。
我們先看一個示例，譬如：展示6個賣的最好的促銷産品，每行3個産品，它的簡碼如下。注意：下面的圖例中的展示效果與主題強相關，主題不同看到的“皮膚”不同哦。
limit=”6″：表示展示6個
columns=”3″：表示一行展示3個
orderby=”popularity”：表示挑選賣的最好的商品
on_sale=”true”：表示挑選出來的産品是有促銷價格的
用簡碼存在的一個問題是，産品展示的外觀取決于你用的主題，無法在Elementor中對簡碼進行樣式上的細緻修改，但能做一些整體的設定，譬如内外間距、背景、邊框等等。
如果你想對細節進行樣式修改，那麼建議你不要用簡碼，而是購買一個Elementor Pro，使用它的Product元素來自定義樣式。
接下來我們介紹一下可供使用的産品屬性
以下屬性可與Products簡碼一起使用。
<code>limit</code> – 需要展示的産品數量，譬如，limit=”6″，預設是limit=”-1″，表示顯示全部産品，預設的意思是：如果你想展示全部産品，limit=”-1″可省略不寫，下方同理。
<code>columns</code> – 每行的列數，預設為4，表示一行展示4個産品。
<code>paginate</code> – 啟用翻頁功能，要與limit一起使用，預設值為false，設定為true可以啟用分頁功能，譬如：paginate=”true”。下圖的簡碼是：[products limit=”4″ columns=”4″ paginate=”true”]，表示每頁展示4個産品，每行展示4個産品，顯示産品翻頁功能。
<code>orderby</code> – 根據你設定的内容選項來定義排序， 如果你想加入多個選項，多個選項之間以空格間隔，可用的選項包括如下：
<code>rand</code> – 在頁面加載時随機呈現産品（可能不适用于使用緩存的站點，因為它可能會儲存特定的順序）。
<code>rating</code> – 産品的評分
<code>title</code> – 産品标題，這是預設的orderby模式。
<code>date</code> – 産品的釋出日期
<code>id</code> – 産品ID
<code>menu_order</code> – 菜單排序，編輯産品時，在産品資料》進階中可以設定菜單排序，請填寫數值，數值越大越優先展示。
<code>popularity</code> – 産品的銷量
<code>order</code> – 為orderby中設定的選項定義排序方式，含：升序（ASC）和降序（DESC），預設為ASC。
<code>skus</code> – 以英文逗号分隔多個産品的SKU，每個産品的sku是唯一的。編輯産品時，在産品資料》庫存中可以設定産品的SKU。
<code>category</code> – 以英文逗号分隔多個産品分類的slug。
<code>tag</code> – 以英文逗号分隔多個産品标簽，你可以在編輯産品時添加标簽，也可以在産品清單中，快速修改産品并添加多個标簽。
<code>class</code> – 添加一個CSS Class，以便你可以使用自定義CSS修改産品的樣式（難度頗高，無CSS知識儲備的無視它）。
<code>on_sale</code> – 展示促銷商品，不能與下文的best_selling或top_rated一起使用。
<code>best_selling</code> – 展示銷量最好的商品，不能與on_sale或<code>top_rated</code> 一起使用。
<code>top_rated</code> – 展示評價最好的商品，不能與on_sale或best_selling一起使用。
<code>attribute</code> – 産品屬性，由你自己定義産品屬性，譬如鞋子顔色、尺碼，你可以指定産品的屬性slug來選取要展示的産品。
<code>terms</code> – 産品屬性值，通過指定産品屬性值來選取要展示的産品，譬如紅色、黃色鞋子，多個屬性值之間要用英文逗号分隔
<code>terms_operator</code> – 産品屬性值之間的運算關系，包括：
<code>AND</code> – 表示“和”關系，将顯示包含全部所選屬性值的産品。
<code>IN</code> – 表示“包含”關系，将顯示包含任一所選屬性值的産品，這也是TERMS_OPERATOR的預設值。
<code>NOT IN</code> – 表示“不包含”關系，将顯示不包含任一所選屬性值的産品。
<code>tag_operator</code> – 産品标簽之間的運算關系，包括：
<code>AND</code> – 表示“和”關系，将顯示所有標明标簽中的産品。
<code>IN</code> – 表示“包含”關系，将顯示包含任一所選标簽的産品。這是TAG_OPERATOR的預設值。
<code>NOT IN</code> – 表示“不包含”關系，将顯示不包含任一所選标簽的産品。
示例：
按顔色屬性（attribute=”color”）展示不包含（terms_operator =”not in”）綠色或紅色（terms=”green,red”）的産品6個（limit=”6″），每行3個産品（columns=”3″）。
<code>visibility</code> – 可見性，将根據你標明的可見性選項來展示産品，
可見性的選項如下：
<code>visible</code> – 可見的：在商店和搜尋結果中可見的産品。這是預設的可見性選項。
<code>catalog</code> – 産品目錄：産品僅在商店頁面、産品目錄頁中可見，在搜尋時不可見。
<code>search</code> – 搜尋結果：産品僅在搜尋結果中可見，但在商店、産品目錄頁中不可見。
<code>hidden</code> – 隐藏：産品在商店、産品目錄頁和搜尋結果都隐藏，隻能通過通路URL通路。
<code>featured</code> – 特色産品：是名額記為特色産品的産品，在産品清單中點亮小星星即為特色産品。
<code>category</code> – 展示你選擇的産品類别的産品。
<code>cat_operator</code> – 産品類别之間的運算關系，包括：
<code>AND</code> – 表示“和”關系，将顯示包含全部所選類别的産品。
<code>IN</code> – 表示“包含”關系，将顯示包含任一所選類别的産品，這是cat_operator的預設值
<code>NOT IN</code> – 表示“不包含”關系，将顯示不包含任一所選類别的産品。
<code>tag</code> – 展示你選擇的産品标簽的産品。
示例：隻展示産品标簽裡帶有demo的産品
<code>ids</code> – 展示所選産品ID的産品，多個ID之間以英文逗号分隔
<code>skus</code> – 展示所選SKU的産品，多個ID之間以英文逗号分隔
注意：如果你所選的産品未展示，請確定它們的可見性沒有被設定為“隐藏”。
我以前在建站時，會遇到這種需求：用标簽切換的形式展示不同類目的産品（見下方視訊）。但Elementor Pro裡不提供這種形式的産品元素塊，學習了WooCommerce簡碼，我們就能用tab類元素塊+簡碼來實作。
Elementor免費版就提供了3種标簽切換元素塊，上圖用到的是tabs。
你隻需要将簡碼放到tab的内容裡即可，如下圖所示，如果在編輯模式下無法看到效果，請update頁面後預覽。
下面這兩個簡碼能夠在任何頁面上展示産品分類
<code>product_category]</code> – 展示指定分類下的産品
<code>product_categories]</code> – 展示所有産品分類
<code>ids</code> – 指定要展示的分類id，多個id之間用英文逗号分隔，用在<code>[product_categories]</code>簡碼中 ，你可以通過下圖所示方式擷取分類的id，也可以檢視編輯産品分類頁面的url擷取id
<code>category</code> – 可以是分類id、slug或名稱，用在product_category
<code>limit</code> – 要展示的分類數量
<code>columns</code> – 每行展示的數量，即列數，預設值是4。
<code>hide_empty</code> – 預設值是1，表示隐藏無産品的空分類。如果設定為0，則展示空的分類。
<code>parent</code> – 可設定展示某個分類ID的所有子分類。如果設定為“0”，則僅顯示一級分類。
<code>orderby</code> – 預設按“名稱”排序，可設定為按“ID”、“Slug”或“menu_order”排序。如果要按你指定的ID排序，則可以使用orderby=“include”
<code>order</code> – 基于orderby中的排序依據，設定産品分類的排序是升序（ASC）還是降序（DESC），預設為升序ASC。
這個代碼我放到了不同主題裡效果不同，有些主題下展示的樣貌慘不忍睹つ﹏⊂，目前porto主題的預覽效果不錯。
按ID或SKU顯示一個完整的産品頁面。（雖然我也想不到這個的常見使用場景，譬如在部落格文章裡直接插入産品？emm..也是可以的哈）
這個簡碼通常用于放在産品頁面，主題通常都會配置展示相關産品的功能。
按産品ID顯示單個産品的價格和“添加到購物車”按鈕。
shop_messages簡碼允許您在非WooCommerce頁面上顯示WooCommerce通知（如“産品已添加到購物車”）。
當您使用其他簡短代碼（如add_to_cart）并希望使用者對其操作獲得一些回報時，這将非常有用。
簡碼
效果示例
建議在編輯器的文本模式下加入簡碼，而不是可視化模式
注意簡碼的雙引号是英文符号””，而非中文的雙引号“”
本文首發于：https://loyseo.com/woocommerce-shortcodes/
推薦閱讀：
WooCommerce教程
本文原文由LOYSEO 釋出，LOYSEO專注于WordPress外貿網站建設教程、Elementor教程。