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

1年前发布

1550

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

如下图

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

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

实现方法很简单：

在主题的 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

评分

欢迎为他评分