移动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-variation-price .woocommerce-Price-amount 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 3

好的，所以我不得不深入研究WooCommerce的海底发现。

woocommerce/assets/js/frontend/add-to-cart-variation.js负责显示可变产品价格的javascript文件基本上用于$('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;
}

我知道很痛。但这是“唯一”的方法。

方法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，它将检查可变产品价格是否已更改，并使用新值更新实际价格div。这个新的价格div可以在任何地方，不仅限于表格内。

最后结果：