woocommerce - 移动woocommerce变化价格

Question

我正在 Woocommerce 下运行我的演示商店，我想将当您选择产品变体时显示的价格移动到正下方 Qty 字段而不是它和最后一个变体之间。
这是我在 functions.php 中尝试的代码文件到目前为止，但它没有工作:

// Move WooCommerce price
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );

我是不是在某个地方弄错了？

Answer 1

javascript 文件 woocommerce/assets/js/frontend/add-to-cart-variation.js ，负责显示可变产品价格，主要使用$('form').find('.single_variation');更新价格，所以如果.single_variation在表格之外，它将不起作用。
所以这样的事情不起作用:

function move_variation_price() {
    remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_single_variation', 5 );
}
add_action( 'woocommerce_before_add_to_cart_form', 'move_variation_price' );

也就是说，如果您想在产品上使用它，最好的选择是使用 woocommerce_before_variations_form钩。 woocommerce_single_variation hook 也会显示添加到购物车按钮，因此您必须使用 CSS 将其隐藏:

form.variations_form.cart .single_variation_wrap:nth-child(1) .quantity {
    display: none !important; /* important is necessary */
}
form.variations_form.cart .single_variation_wrap:nth-child(1) button {
    display: none;
}

我知道这很痛。但这是“唯一”的方式。
方法二
好吧，我对方法 1 很生气，并提出了这个新方法，它不需要对 PHP 进行任何更改，只需要对 Javascript 和 CSS 进行更改。
将检查可变产品价格是否发生变化的 Javascript，并将使用新值更新实际价格 div。这个新的价格 div 可以在任何地方，而不仅仅是在表单内。
Javascript:

// Update price according to variable price
if (jQuery('form.variations_form').length !== 0) {
    var form = jQuery('form.variations_form');
    var variable_product_price = '';
    setInterval(function() {
        if (jQuery('.single_variation_wrap span.price span.amount').length !== 0) {
            if (jQuery('.single_variation_wrap span.price span.amount').text() !== variable_product_price) {
                variable_product_price = jQuery('.single_variation_wrap span.price span.amount').text();
                jQuery('.single-product-summary p.price span.amount').text(variable_product_price);
            }
        }
    }, 500);
}

CSS:

.single_variation_wrap .price {
    display: none;
}

最后结果: