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