WooCommerce Shortcode 產品教學 – 以短代碼呈現產品列表

WooCommerce Shortcode 產品教學

WooCommerce Shortcode 產品教學內容綱要:

1. WooCommerce 通用產品列表代碼

2. WooCommerce 產品列表代碼可用屬性解析

3. WooCommerce 產品列表代碼組合範例

WooCommerce Shortcode 產品 列表可以應用在網站頁面中,在 WooCommerce 本身已經將顯示產品的頁面都已經定義完成的狀態下,運用 WooCommerce 原生代碼就能客製化產品可以出現的位置,比如說在促銷頁面中顯示銷售量最高的產品列表 ; 或者是在指定商品活動頁中顯示具有同樣分類或屬性的相關商品等。

在本篇教學中,鵠學苑將會介紹 WooCommerce  6 組以不同條件篩選顯示產品列表條件的基礎代碼,屬於只要插入在正確的位置就會顯示的類型,另外是稍微比較進階一點的短代碼,必須要先熟悉 WooCommerce 說明中的代碼屬性進而製作特殊顯示方式的產品列表代碼,當然,此類做法會比較符合大部分站長的需要,提供給有需要的朋友參考看看!

WooCommerce 下載點:https://tw.wordpress.org/plugins/woocommerce/

WooCommerce 代碼說明文件:https://docs.woocommerce.com/document/woocommerce-shortcodes/

WooCommerce WordPress 外掛技術支援論壇:https://wordpress.org/support/plugin/woocommerce/

• 基礎產品列表代碼

  1. [featured_products]:顯示有勾選特色的產品列表。
  2. [sale_products]:顯示具有折扣價的產品列表。
  3. [best_selling_products]:顯示銷售數量最多的產品列表,預設會由多到少排列。
  4. [recent_products]:顯示上架日期為最新的產品列表。
  5. [product_attribute]:按照產品設定的”屬性”來顯示產品列表。
  6. [top_rated_products]:顯示最高評分的產品列表。

下方以使用 Elementor shortcode 小工具加入代碼作為示範:

第一步:在 Elementor 編輯畫面中的工具欄搜尋 shortcode 小工具,直接加入到空白區域中。

WooCommerce Shortcode 產品

第二步:在欄位中貼上 shortcode,下圖是顯示特色商品的示意。

WooCommerce Shortcode 產品

第三步:下圖是顯示折扣商品的示意。

WooCommerce Shortcode 產品

 

• 產品列表代碼可用屬性解析

WooCommerce 產品列表代碼中可以加入更多屬性,以控制產品列表顯示方式,比如數量、分頁、排序、貨號、指定產品分類或標籤等,以下列出各種屬性的說明:

    • limit-控制顯示的產品數量,-1 代表全部顯示。
    • columns-產品顯示的列數。
    • paginate-產品列表是否要顯示分頁,默認為 false,可給定 true 以顯示分頁。
    • orderby– 產品列表排序的依據,下方是可用的屬性。
      1. date- 按照產品發布日期排序。
      2. id- 按照產品編號排序,id 可以在全部產品頁中,將滑鼠游標移動至產品上將會是 “id=XX”。
      3. menu_order- 按照選單號碼順序排列,數字越小優先顯示。
      4. popularity- 按照商品已購買數量排列。
      5. rand- 按照隨機順序排列。
      6. rating- 按照評分排列。
      7. title- 按照產品標題排列,這也是預設的排列順序。
  • skus– 以產品貨號來顯示產品列表,以逗點隔開連續的產品貨號。
  • category–  以產品分類顯示產品列表。
  • tag– 以產品標籤顯示產品列表。
  • on_sale– 顯示具有折購的產品列表。
  • best_selling– 顯示最高銷售量的產品列表。
  • top_rated– 顯示評分最高的產品列表。

注意事項:on_sale、best_selling、top_rated 這三個在同一組短代碼中只能出現一個,無法同時使用。

• 產品列表代碼組合範例

下方我們將展示產品列表代碼配合屬性後所呈現的樣式,提供給大家做參考。

1.顯示四個具有折扣的熱門商品

[products limit="4" columns="4" orderby="popularity" class="quick-sale" on_sale="true" ]

WooCommerce Shortcode 產品

2.顯示兩個特色商品

[products limit="4" columns="2" visibility="featured" ]

WooCommerce Shortcode 產品
3.顯示四個最新產品(以 id 排序):

[products limit="4" columns="4" orderby="id" order="DESC" visibility="visible"]

WooCommerce Shortcode 產品

4.只顯示特定分類的八個產品:

[products limit="8" columns="4" category="hoodies, tshirts"]

WooCommerce Shortcode 產品

結語:

WooCommerce Shortcode 產品列表、產品分類彙整頁設定相當簡單,只要了解每一段代碼中應該具有的規則,就能輕易上手,如果說對 WooCommerce 頁面 Shortcode 也有興趣,可以參考這一篇文章:WooCommerce Shortcode 教學 – 頁面基本短代碼呈現效果說明

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WooCommerce 教學相關文章:

網站架設知識推薦閱讀:

新冠肺炎大流行 – 企業線上數位轉型網站架設重點與優勢分析

AMP Stories 介紹 – 你一定要了解的 Google 行動網站技術

Google 優先索引行動版內容 將於一年內對所有網站實施

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top