實用的 WordPress ICP 備案許可管理器

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 主題的時候,不妨多嘗試使用簡碼,相信會在一定程度上加快開發速度。

文章沒看懂?程式碼不會用?需要幫助您可以

園長 的頭像