How to Replace the Variable Price Range with a Chosen Variation Price in WooCommerce 3?-PHP Tutorial-php.cn

How to Replace the Variable Price Range with a Chosen Variation Price in WooCommerce 3?

DDD

Release： 2024-11-11 15:17:03

Original

823 people have browsed it

How to Replace the Variable Price Range with a Chosen Variation Price in WooCommerce 3?

Replace the Variable Price Range by the Chosen Variation Price in WooCommerce 3

Scenario: In WooCommerce, the variable product page typically displays a price range based on the chosen variation. This behavior can be undesirable for some users who prefer a single, default price that adjusts dynamically based on the selected variations.

Challenge: The goal is to remove the variable price range and replace it with the lowest available price, which will be updated as the variation is selected. This applies to both the product page and the shop page.

Solution:

Step 1: Remove the Price Range

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

Copy after login

Step 2: Introduce the Variation Price

add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );

Copy after login

Step 3: Get Variation Price and Display

function replace_variation_single_price(){
    global $product;

    // Get prices
    $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 &amp;&amp; $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

    echo '<p class=&quot;price&quot;>'.$price.'</p>';
}

Copy after login

Step 4: CSS and JavaScript for Dynamic Updates

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

// JavaScript
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=&quot;availability&quot;>'+$('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');
        }
    });
});

Copy after login

Complete Code:

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;

    // Get prices
    $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 &amp;&amp; $product->is_on_sale() ) {
        $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
    }

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

    // CSS
    echo '<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>';

    // JavaScript
    echo '<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=&quot;availability&quot;>'+$('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>';
}

Copy after login

This improved code will prevent issues in themes that have their own pricing or html structure. It will also work across non-variable products in various themes.

The above is the detailed content of How to Replace the Variable Price Range with a Chosen Variation Price in WooCommerce 3?. For more information, please follow other related articles on the PHP Chinese website!