移动woocommerce价格变化

Question

进出口运行Woocommerce下我的演示店，我想调价，显示了当你选择产品的变化是对的下方数量字段而不是他最后的变动之间。这是我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

这将改变价格移动到下面的数量和正上方的添加到购物车按钮。您可能需要根据需要应用一些CSS样式。

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

由于woocommerce_after_add_to_cart_quantity钩在WooCommerce 3.0新增加的，为了得到上面的代码是在WooCommerce 2.6.x的工作，你将需要保存到你主题的single-product/add-to-cart/variation-add-to-cart-button.php文件夹，然后将在行动挂钩覆盖woocommerce模板。见下文：

<?php
/**
 * Single variation cart button
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 2.5.0
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;
?>
<div class="woocommerce-variation-add-to-cart variations_button">
    <?php if ( ! $product->is_sold_individually() ) : ?>
        <?php woocommerce_quantity_input( array( 'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : 1 ) ); ?>
    <?php endif; ?>

    <?php do_action( 'woocommerce_after_add_to_cart_quantity' ); ?>

    <button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
    <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->id ); ?>" />
    <input type="hidden" name="product_id" value="<?php echo absint( $product->id ); ?>" />
    <input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>

Answer 2

好了，所以我不得不深入了解WooCommerce海狗屎发现这一点。

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钩将弹出添加到购物车按钮，所以你将不得不隐藏了与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;
}

我知道这很伤。但它是“唯一”的方式。

Method 2

好吧，我用方法1生气，并用这种新方法，不需要在PHP中，只有Javascript和CSS的任何变化上来：

使用Javascript：

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

CSS：

.single_variation_wrap .price {
    display: none;
}

这是一个Javascript将检查变量产品价格变化，并不断更新与新价值的实际价格股利。这个新的价格格可以在任何地方，不仅在表单内。

最终结果：

Answer 3

我想我已经找到了一个非常简单的解决方案。 Woocommerce推出时变化的选择改变了JavaScript事件。

我们可以收听事件并复制.woocommerce-变化价格.woocommerce牌量的html的地方，我们想要的。

接下来，我离开你我的解决方案的例子：

JS

    jQuery(function ($) {
        /**
        * Change Price Variation to correct position
        */
        $('.variations_form').on('woocommerce_variation_has_changed', function () {
            $('.wrap-price-variation').empty();
            $('.wrap-price-variation').html($('.woocommerce-variation-price .woocommerce-Price-amount').html())
        });
    });

CSS

    .woocommerce-variation .woocommerce-variation-price {
        display: none;
    }

Answer 4

我已经使用这个：

jQuery('form.variations_form #size').change(function(){
    setTimeout(function() { 
        jQuery('.price-wrapper .price > .amount').text(jQuery('.woocommerce-variation-price .price > .amount').text());
    }, 800);
});

和完美的作品。代码约似乎不起作用。