How to Display the Chosen Variation Price Instead of the Price Range on WooCommerce Variable Product Pages?

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

In WooCommerce, the variable product page displays a price range instead of a single price. While this can be useful for some products, it can be undesirable in other cases. This article provides a solution to replace the price range with the chosen variation price, ensuring that only the lowest available price is displayed.

To achieve this, we will use a custom PHP function and a jQuery script. The PHP function will remove the default price range and replace it with a placeholder price. The jQuery script will then update the placeholder price with the chosen variation price when a variation is selected.

Here is the code that will handle this:

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()+'');
                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.'
    <div class='"hidden-variable-price"'>'.$price.'</div>';
}

The code can be placed in any PHP file in your child theme or theme's functions.php file. It is recommended to use a child theme to avoid losing any customizations when updating your theme.

Once the code is added, the variable product page will show the lowest available price instead of the price range. When a variation is selected, the price will be updated to reflect the chosen variation's price.

This solution is compatible with WooCommerce 3 and above. It replaces the variable price range with the chosen variation price, ensuring that customers see a clear and accurate price for the selected product variation.

The above is the detailed content of How to Display the Chosen Variation Price Instead of the Price Range on WooCommerce Variable Product Pages?. For more information, please follow other related articles on the PHP Chinese website!