為了方便我們外掛產品到文章或頁面中,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 主題的時候,不妨多嘗試使用簡碼,相信會在一定程度上加快開發速度。