WooCommerce 教學 – 新增「市價」

什麼是市價?因創科技每個做電子商務(購物)網站的客戶,總是喜歡用一些標價法來吸引顧客上門,像是原價多少,特價多少,標價就會類似 NT$ 1000 NT$ 800,用WooCommerce一般的做法也不過就是設定原價格,然後再設定特價價格,只要這麼做,所有標價就會顯示成我們要的樣子。只不過這麼做有缺點,由於特價相關功能會列出所有特價商品,如果我們這麼做的話,特價功能會列出所有商品,那特價功能就變得沒什麼意義了。如果你說還有特色商品 (Featured Product) 功能可以使用,把特色商品拿來做為顯示特價商品那也可以,只是我們真的不希望這些原本就有的功能被取代。

於是我們必需想個辦法來保留原有的功能,並且解決商品假特價的顯示問題,其實 WooCommerce 很好心的給我們一些 Filter 讓我們可以更改商品價格的文字內容,那麼我們就可以再新增一個市價,在商品沒輸入特價的時候顯示假特價,在有輸入特價的時候顯示真特價這樣一來就可以解決我們的問題,看看以下的教學吧。

顯示市價欄位

在 WooCommerce 編輯商品介面新增一個市價的選項,會自已抓貨幣單位。

/* Display Fields in product detail panel */
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields', 10 );
function woo_add_custom_general_fields() {

global $woocommerce, $post;

echo ‘

‘;
$currency_symbol = get_woocommerce_currency_symbol();
woocommerce_wp_text_input(
array(
‘id’ => ‘_market_price’,
‘label’ => ‘市價 (‘. $currency_symbol. ‘)’,
‘placeholder’ => ”,
‘description’ => ‘輸入市面上的價格,通常比原價高’,
‘desc_tip’ => ‘true’,
‘type’ => ‘number’,
‘custom_attributes’ => array(
‘step’ => ‘any’,
‘min’ => ‘0’
)
)
);
echo ‘

‘;
}

儲存資料

輸入商品資料後在發佈或更新商品時,一樣需要把它給儲存成post meta
/* Save custom product meta fields */
add_action( 'woocommerce_process_product_meta', 'inno_add_custom_general_fields_save' );
function inno_add_custom_general_fields_save( $post_id ){
// Check the user's permissions.
if( isset( $_POST['post_type'] ) && 'product' == $_POST['post_type'] ){
if( ! current_user_can( 'edit_post', $post_id ) ){
return;
}
}else{
return;
}

$woocommerce_text_field = esc_attr($_POST[‘_market_price’]);
update_post_meta( $post_id, ‘_market_price’, esc_attr( $woocommerce_text_field ) );
}

顯示價格

在沒輸入特價,但有輸入原價、市價時,就會顯示假特價,而且不會在後台商品列表顯示特價格式,在有輸入特價時,就顯示真特價。價格左右如果和你的版型顯示位置不一樣的話可以把 del 和 ins 的位置對換。在這裡,價格也只會顯示在簡易商品與變化類型商品,所以如果你需要其它的商品類型也可以顯示的話,自已看一下原始碼吧:)
/* add market price in the price tag */
add_filter( 'woocommerce_variable_price_html', 'inno_custom_price_html', 10, 2 );
add_filter( 'woocommerce_price_html', 'inno_custom_price_html', 10, 2 );
function inno_custom_price_html( $price, $product ){

if( is_admin() || empty( $price ) ){
return $price;
}

$product_id = $product->id;

$market_price = get_post_meta( $product_id, ‘_market_price’, true );

if( $market_price ){
$price = ‘‘ . wc_price( $market_price ) . ‘‘ . ‘ ‘ . $price .’‘ ;
}

return $price;
}

把上面的程式放到 functions.php 裡就可以了,很簡單對吧!

文章最後更新於:2019/07/22

  1. Weichun 說:

    請問這方法還適用於WC 2.5.5版嗎?!
    plugins/woocommerce下面找不到functions.php耶~~

    1. innovext 說:

      這是要放在/wp-content/themes/您的版型/functions.php 這個檔案裡面,不是woocommerce外掛底下喔

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *