方法2

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

好的，所以我不得不潜入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;
}

我知道这很疼。但它只是＆＃34;唯一＆＃34;方式。

方法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可以在任何地方，而不仅仅是在表格内。

最终结果：

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中实际的select（“下拉”）元素的更改状态来完成它。它还考虑了价格范围的默认状态，以提供更完整的解决方案。

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 按钮后，我们将最高价格设置回页面加载时的价格。

移动woocommerce变化价格

7 个答案:

方法2