将可变价格范围替换为 WooCommerce 4+ 中选择的可变价格 [英] Replace the Variable Price range by the chosen variation price in WooCommerce 4+

问题描述

在我们的 woocommerce 网站上，我试图根据客户从下拉菜单中选择的变化来更新显示的价格，如下所示:

我使用了 LoictheAztec 在另一个答案中提交的 php 函数:

因此，如果有人能帮助我确定此错误的原因，以便现在根据已选择的变体显示和更新价格，我们将不胜感激.

解决方案

2021 年 3 月更新 (至少从 WooCommerce 3.7 到 5+)

代码:

add_action('woocommerce_before_add_to_cart_form', 'selected_variation_price_replace_variable_price_range');函数 selected_variation_price_replace_variable_price_range(){全球$产品；if( $product->is_type('variable') ):?><风格>.woocommerce-variation-price {display:none;} </style><脚本>jQuery(函数($){var p = 'p.price'q = $(p).html();$('form.cart').on('show_variation', function( event, data ) {如果(data.price_html){$(p).html(data.price_html);}}).on('hide_variation', function( event ) {$(p).html(q);});});<?php万一;}

代码位于活动子主题(或活动主题)的functions.php 文件中.经测试有效.

On our woocommerce website I am trying to update the displayed price based on the variations the customer selects from dropdown menus as shown here:

I used a php function that had been submitted in another answer by LoictheAztec:
Replace the Variable Price range by the chosen variation price in WooCommerce 3

add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
    global $product, $post;

    if ( $product->is_type( 'variable' ) ) {
        // removing the variations price for variable products
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

        // Change location and inserting back the variations price
        add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
    }
}

function replace_variation_single_price(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    // Sale Price
    $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
    sort( $prices );
    $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

    if ( $price !== $saleprice && $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    ?>
    <style>
        div.woocommerce-variation-price,
        div.woocommerce-variation-availability,
        div.hidden-variable-price {
            height: 0px !important;
            overflow:hidden;
            position:relative;
            line-height: 0px !important;
            font-size: 0% !important;
        }
    </style>
    <script>
    jQuery(document).ready(function($) {
        $('select').blur( function(){
            if( '' != $('input.variation_id').val() ){
                if($('p.availability'))
                    $('p.availability').remove();
                $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
                console.log($('input.variation_id').val());
            } else {
                $('p.price').html($('div.hidden-variable-price').html());
                if($('p.availability'))
                    $('p.availability').remove();
                console.log('NULL');
            }
        });
    });
    </script>
    <?php

    echo '<p class="price">'.$price.'</p>
    <div class="hidden-variable-price" >'.$price.'</div>';
}

However when a variation is selected it displays undefined underneath the From: $price as shown here:

Example of undefined error:

So if anyone could help me determine the cause of this error so that the price is now displayed and updated based on variations that have been selected it would be greatly appreciated.

解决方案

Update March 2021 (Works at least from WooCommerce 3.7 up to 5+)

The code:

add_action('woocommerce_before_add_to_cart_form', 'selected_variation_price_replace_variable_price_range');
function selected_variation_price_replace_variable_price_range(){
    global $product;

    if( $product->is_type('variable') ):
    ?><style> .woocommerce-variation-price {display:none;} </style>
    <script>
    jQuery(function($) {
        var p = 'p.price'
            q = $(p).html();

        $('form.cart').on('show_variation', function( event, data ) {
            if ( data.price_html ) {
                $(p).html(data.price_html);
            }
        }).on('hide_variation', function( event ) {
            $(p).html(q);
        });
    });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

这篇关于将可变价格范围替换为 WooCommerce 4+ 中选择的可变价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！