修改 WooCommerce 变体产品页面的价格显示方式

默认情况下,WooCommerce 变体产品页面首先会在标题下方显示价格区间,然后在变体选择器下方再显示一个被选中的变体的价格。如下图,我想不明白这样设计的好处是什么,这样设计的坏处在手机上浏览该产品页面倒是挺明显的,就是当我选中某个变体之后,要想了解这个变体的图片和其对应的价格的话,需要反复上下拖动屏幕:先向上拖动看产品图片,然后再向下拖动看对应的价格,客户体验还是蛮差的。

如下图

woocommerce-price-211213-1

网上搜了一堆方法,然后分别尝试,最终找到一个相对比较完美,同时相对简单的方案,先看下最终的效果 (如下图)

woocommerce-price-211213-2

在变体被选择之前,价格一栏显示的是所有变体价格的一个区间价格。在变体被选择之后,价格区间就会被某变体的具体价格取代。这样,在同一块儿屏幕里,无需上下拖动,就可以同时看到该变体所对应的图片和价格。

实现方法很简单:

在主题的 function.php 文件末尾插入如下代码:(建议在操作之前,先对网站进行备份)

 

add_action('woocommerce_before_add_to_cart_form', 'selected_variation_price_replace_variable_price_range'); function selected_variation_price_replace_variable_price_range(){ 
    global $product; 
    if( $product->is_type('variable') ): 
    ?><style> .woocommerce-variation-price {display:none;} </style>
    <script> 
    jQuery(function($) { 
        var p = 'p.price' 
              q = $(p).html();   
       
        $('form.cart').on('show_variation', function( event, data ) { 
             if ( data.price_html ) { 
                 $(p).html(data.price_html);
             }
        }).on('hide_variation', function( event ) {
             $(p).html(q); 
        }); 
  }); 
  </script> 
  <?php 
  endif; 
}

以上代码来源:

https://stackoverflow.com/questions/50704727/replace-the-variable-price-range-by-the-chosen-variation-price-in-woocommerce-4/50707820#50707820

 

请登录后发表评论

    没有回复内容