WooCommerce 自定义商品价格显示HTML结构

5,683
WooCommerce 自定义商品价格显示HTML结构
  • 5.00 / 5 5
5.00分(1票)
WooCommerce 自定义商品价格显示HTML结构

WooCommerce 虽然有中文本地化支持,但整个插件本身是按照欧美人的习惯去开发的,一些细节上不可能做到各个国家或地区的用户满意。下面就用一个例子抛砖引玉,自定义商品价格显示HTML结构。

默认的话,WooCommerce 输出商品价格显示HTML结构是这样的(当商品本身设置了一般价格与优惠价):

1
2
3
4
5
6
<a href="">	
	<span class="onsale">促销中</span>
            <img src="xxxx.png">
		<h3>商品名称</h3>
	<span class="price"><del><span class="amount">¥109.00</span></del> <ins><span class="amount">¥99.00</span></ins></span>
</a>

前端显示的话类似:

新旧价格的显示大概遵循“¥109.00 ¥99.00”的形式,但根据国人的习惯(不知道是不是这样?),一般显示为 “¥99.00 ¥109.00 ”。要想显示出我们的效果的话,那就可以通过对woocommerce_get_price_html 函数下刀,hook之。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
// DeveWork.com
//这是一个可以修改woocommerce_get_price_html 函数默认输出的html代码的例子,
//作用是调换新旧价格的位置
//感谢http://wordpress.stackexchange.com/questions/83367/how-to-edit-the-get-price-html-on-woocommerce
 
add_filter( 'woocommerce_get_price_html', 'dw_change_default_price_html', 100, 2 );
 
function dw_change_default_price_html( $price,$product ){
    if ( $product->price > 0 ) {
      if ( $product->price && isset( $product->regular_price ) ) {
        $from = $product->regular_price;
        $to = $product->price;
        return '<ins><span class="amount">'.( ( is_numeric( $to ) ) ? woocommerce_price( $to ) : $to ) .'</span></ins>
        <del><span class="amount">'. ( ( is_numeric( $from ) ) ? woocommerce_price( $from ) : $from ) .' </span></del>';
      } else {
        $to = $product->price;
        return '<ins><span class="amount">' . ( ( is_numeric( $to ) ) ? woocommerce_price( $to ) : $to ) . '</span></ins>';
      }
   } else {
     return '免费';
   }
}
?>

代码已经托管到 Github gist 上:https://gist.github.com/Jeff2Ma/91c6f19ab63552be269c

喵~本文目前有2条留言,欢迎发表评论!

  1. 传说中的沙发
    :

    请问如何不显示原价?我只想显示一个价格,还有如何去掉下面的那个加入购物车按钮,感觉产品列表页面不需要那个按钮。谢谢?期待你的回复。。

    [回复]
    • 你看不到上面的 woocommerce_price 函数的吗? ❓

      [回复]

打破沉默,我来发表评论鸟~