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

Step 2: Introduce the Variation Price

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

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 && $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>';
}

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

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 && $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>';
}

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!