WooCommerce 簡碼：系統默認包含的簡碼、簡碼，以及參數說明

為了方便我們插件產品到文章或頁面中，WooCommerce 默認提供了一些簡碼，使用這些簡碼，我們可以很方便的插入 WooCommerce 的商品或功能到普通的 WordPress 頁面中。

基本頁面簡碼

• [woocommerce_cart] – 顯示購物車頁面
• [woocommerce_checkout] – 顯示結賬頁面
• [woocommerce_order_tracking] – 顯示訂單跟蹤表單
• [woocommerce_my_account] – 顯示用戶賬戶頁面

大多數情況下，安裝 WooCommerce 時，嚮導會自動添加以上簡碼到響應的頁面中，如果沒有運行安裝嚮導，我們需要自行把上面的簡碼添加到頁面中。

我的賬戶頁面

在賬戶頁面顯示 ‘我的賬戶’ 內容，用戶可以瀏覽歷史訂單，更新他們的信息，我們可以指定顯示特定用戶的賬戶頁面，並指定一個頁面顯示多少訂單。

參數：

array(
     'current_user' => '',
     'order_count' => '15'
 )
[woocommerce_my_account order_count="12"]

當前頁面參數會通過 get_user_by( ‘id’, get_current_user_id() ) 函數自動添加。

下面的頁面可以在 WordPress 站點中的任何地方使用。

顯示最新商品：recent_products

列出最新的商品 ，通常在網站首頁比較常用，‘per_page’ 參數確定顯示幾個最新商品， columns 參數確定把商品顯示為幾列。

參數：

array(
     'per_page' => '12',
      'columns' => '4',
      'orderby' => 'date',
      'order' => 'desc'
 )
[recent_products per_page="12" columns="4"]

如需了解怎麼使用 ‘orderby’ 參數, 參見 WordPress Codex Class Reference

顯示特色推薦商品：featured_products

和最新商品簡碼類似，只不過這個簡碼顯示的是後台推薦的特色商品。下面的示例簡碼中，顯示 12 個推薦商品，每行顯示 4 個。

參數：

array(
     'per_page' => '12',
      'columns' => '4',
      'orderby' => 'date',
      'order' => 'desc'
 )
[featured_products per_page="12" columns="4"]

顯示單個商品：product

通過商品 ID 或這 SKU 顯示某個商品。

[product id="99"]
[product sku="FOO"]

如果商品沒有顯示，確認一下是否在後台設置為隱藏了。

顯示多個商品：products

通過商品 ID 或 SKU 顯示多個商品，和上面的 product 簡碼類似，只不過這個顯示的是多個商品。注意複數形式 ‘products’ 。

參數：

array(
      'columns' => '4',
      'orderby' => 'title',
      'order' => 'asc'
 )
[products ids="1, 2, 3, 4, 5"]
[products skus="foo, bar, baz" orderby="date" order="desc"]

如果商品沒有顯示，確認一下是否在後台設置為隱藏了。

顯示添加到購物車按鈕：add_to_cart

通過商品 ID 顯示價格和添加到購物車按鈕。

參數：

array(
      'id' => '99',
      'style' => 'border:4px solid #ccc; padding: 12px;',
      'sku' => 'FOO'
 )
[add_to_cart id="99"]

顯示添加到購物車 URL：add_to_cart_url

通過商品 ID 顯示價格和添加到購物車按鈕，上面的 add_to_cart 顯示的直接是功能，這個簡碼只是輸出了一個加入到購物車的鏈接。

Args:

array(
      'id' => '99',
      'sku' => 'FOO'
 )
[add_to_cart_url id="99"]

顯示單個商品分類的商品：product_category

通過商品分類別名顯示分類中的多個商品。

參數：

array(
     'per_page' => '12',
      'columns' => '4',
      'orderby' => 'title',
      'order' => 'asc',
      'category' => ''
 )
[product_category category="appliances"]

顯示多個商品分類中的商品：product_categories

顯示多個商品分類中的商品，和上面的 product_categorie 類似，只不過這個顯示的是多個商品分類中的商品。

參數：

array(
      'number' => 'null',
      'orderby' => 'title',
      'order' => 'ASC',
      'columns' => '4',
      'hide_empty' => '1',
      'parent' => '',
      'ids' => ''
 )
`number` 參數用來指定顯示多少商品， `ids` 參數用來指定顯示哪些分類中的商品。
 
[product_categories number="12" parent="0"]

設置 parent 參數為 0，只顯示頂級分類，設置 ‘ids’ 為逗號分隔的分類 id 列表，只顯示指定分類中的商品。

商品頁面：product_page

通過指定的 IPS 呀 ID 或 SKU 顯示完整的商品詳情頁面。

[product_page id="99"]
[product_page sku="FOO"]

顯示打折特價促銷商品：sale_products

列出促銷中的商品：

參數：

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc'
 )
 
[sale_products per_page="12"]

顯示銷量最高的商品：best_selling_products

列出銷量最高的商品。

參數：

array(
     'per_page' => '12',
     'columns' => '4'
 )
 
[best_selling_products per_page="12"]

顯示相關商品：related_products

列出相關商品。

參數：

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title'
 )
 
[related_products per_page="12"]

顯示評價最高的商品：top_rated_products

顯示評價最高的商品。

參數：

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc'
 )
 
[top_rated_products per_page="12"]

商品屬性：product_attribute

列出指定屬性的商品。

參數：

array(
     'per_page' => '12',
     'columns' => '4',
     'orderby' => 'title',
     'order' => 'asc',
     'attribute' => '',
     'filter' => ''
 )
 
[product_attribute attribute='color' filter='black']

‘per_page’ 參數

注意：參數 ‘per_page’ 指定在頁面上顯示多少件商品，並不會輸入分頁。

簡碼問題排除

如果您在頁面上粘貼了代碼，在前端卻看不到商品輸入，請確認簡碼沒有被包含，這個問題很常見，移除標籤，重新保存一下頁面就可以了。

根據自定義字段排序商品

很多列出商品的 WooCommerce 簡碼都是支持自定義排序的，如：

[recent_products]
[featured_products]
[products]
[product_category]
[sale_products]
[top_rated_products]
[product_attribute]
[related_products]

我們可以通過下面的屬性對商品進行排序：

menu_order
title
date
rand
id

“orderby” 屬性的使用方法如下：

[products skus="foo, bar, baz" orderby="date" order="desc"]

除了上面的屬性，我們還可以通過自定義字段對商品進行排序，下面的實例中，我們使用價格對商品進行排序。

add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby' );
 
function woocommerce_shortcode_products_orderby( $args ) {
 
	$standard_array = array('menu_order','title','date','rand','id');
 
	if( isset( $args['orderby'] ) && !in_array( $args['orderby'], $standard_array ) ) {
		$args['meta_key'] = $args['orderby'];
		$args['orderby']  = 'meta_value_num'; 
	}
 
	return $args;
}

我們需要把上面的代碼放到主題的 functions.php 文件中，然後根據需要編輯 meta_key 。

總結一下

WordPress 中，簡碼相當於是一個封裝，把顯示商品的功能邏輯和 HTML 代碼封裝到了一起，直接使用簡碼，就可以輸出簡碼指定的內容，非常方便，可重用性非常高。下次開發 WooCommerce 主題的時候，不妨多嘗試使用簡碼，相信會在一定程度上加快開發速度。