移动 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 钩子也会弹出添加到购物车按钮，因此您必须使用 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;
}

最终结果：

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_after_add_to_cart_quantity 挂钩，为了使上述代码在 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 3

我想我找到了一个非常简单的解决方案。 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 4

你可以使用 CSS：

.woocommerce div.product .summary.entry-summary {
 display: flex;
 flex-direction: column;
}

和 order 属性按您想要的顺序对元素进行排序：

 .product_title.entry-title {
      order: 1;
 }
 div.woo-short-description {
      order: 2;
 }
 form.cart {
      order: 3;
 }
 p.price {
      order: 4;
 }
 div.quick_buy_container {
      order: 5;
 }

更多信息请访问：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Answer 5

我用过这个：

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

并且完美运行。关于的代码似乎不起作用。

Answer 6

我刚刚使用Lucas'answer above 作为模板编写了这个，但利用jQuery 中实际的选择（“下拉”）元素的更改状态来完成它。它还考虑了价格范围的默认状态，以提供更完整的解决方案。

CSS：

/* Hide variant prices since we have JS to show that in place of the range */
body.woocommerce .product .single_variation_wrap {
    display: none !important;
}

JavaScript：

/* Product Detail Page: Variant Pricing Updater  */ 
// Updates price according to variable price
jQuery(function() {
    if (jQuery('form.variations_form').length !== 0) {

        /* Set this to the ID of your variant select drop-down.
         * Example: var $variant_selector = jQuery('#color');  */ 
         var $variant_selector = jQuery('#color');

        var variable_product_price = '';
        var vpu_timeout;

        // Get and save the original price range
        var original_price_range = jQuery('.product .summary p.price').html();
        $variant_selector.change(function() { 

            // Clear any previous timeouts to avoid possible stacking
            clearTimeout(vpu_timeout);

            // setTimeout so we don't get ahead of WooCommerce's JS
            vpu_timeout = setTimeout(function(){ 

                // If there's no value, set back to default.
                if($variant_selector.val().length < 1) {
                    jQuery('.product .summary p.price').html(original_price_range);
                    return(false);
                }

                // Make sure we have a price to pull from
                if (jQuery('.single_variation_wrap span.price').length !== 0) {
                    if ($variant_selector.val().length > 0) {

                        // Update the price HTML variable if different
                        variable_product_price = jQuery('.single_variation_wrap span.price').html();

                        // Then change the displayed price
                        jQuery('.product .summary p.price').html(variable_product_price);

                        return(true);
                    }
                }
            }, 5); 
        });

    }
});

Answer 7

如果搜索到更完整的解决方案，这就是我解决手头任务的方式-

// Edit single page variable product pricing 
add_filter( 'woocommerce_variable_price_html', 'wrap_variation_price_html', 9999, 2 );  
function wrap_variation_price_html( $price, $product ) {
    if( ! is_product() ) return;
    $price = sprintf( __( '<span class="wrap-top-price">%1$s</span>', 'woocommerce' ), $price );
    return $price;
}

add_action('wp_footer', 'update_variable_product_price', 999, 0);
function update_variable_product_price() {
    if( ! is_product() ) return;
    ?>
    <script>
        jQuery(function ($) {
            $(document).ready(function() {
                var original_price_html = $('.wrap-top-price').html();
                $('.entry-summary').on('click', '.reset_variations', function() {
                    $('.wrap-top-price').html(original_price_html);
                });
                $('.variations_form').on('woocommerce_variation_has_changed', function () {
                    if($('.woocommerce-variation-price .woocommerce-Price-amount').html().length) {
                        $('.wrap-top-price').empty();
                        $('.wrap-top-price').html($('.woocommerce-variation-price .woocommerce-Price-amount').html());
                    }
                });
            })
        });
    </script>
    <?php
}

第一个过滤器是在顶部的价格周围添加一个包装器跨度，无论传入什么，最低价格或范围。

然后将JS添加到单个产品页面的页脚中。它将价格的初始值复制到顶部以缓存它以供以后使用。我们监听woocommerce_variation_has_changed 事件并将动态添加的变化价格元素复制到我们之前添加的顶级价格包装器中。单击reset_variations 按钮后，我们将最高价格设置回页面加载时的价格。