默认情况下,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;
}
以上代码来源:
没有回复内容