变动价格

Question

我在Woocommerce下运行我的演示商店，我想将当您选择产品变体时显示的价格移动到数量字段的正下方，而不是介于数量字段和上一个变体之间。

这是我在函数中尝试的代码。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

我想我找到了一个非常简单的解决办法。当变体的选择发生变化时，Woocommerce将启动一个javascript事件。

我们可以收听该事件并复制该事件。吴宇森：价格变化。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 2

这会将变动价格移动到数量下方，刚好在“添加到购物车”按钮上方。您可能需要根据需要应用一些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 3.0中添加了添加到购物车数量后的woocommerce\uhook，以便在woocommerce 2.6中使用上述代码。x、 您需要覆盖单个产品/添加到购物车/变体添加到购物车按钮。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 3

javascript文件woocommerce/assets/js/frontend/addtocart变体。js负责显示可变产品价格，基本上使用$（'form'）。查找（“.单变量”）更新价格，因此如果。单变量在表单之外，它将不起作用。

所以像这样的事情是行不通的：

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\u before\u variations\u表单hook。

woocommerce\u single\u variationhook也会显示“添加到购物车”按钮，因此您必须使用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。这个新的价格分区可以是任何地方，而不仅仅是表单内部。

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;
}