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

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

Problem:

On variable products in WooCommerce, the standard layout displays a price range under the product title. This can be confusing and misleading for customers who want to know the exact price of the product with their selected variations.

Solution:

This code addresses the issue by removing the price range and displaying only the lowest product price. Additionally, it updates the displayed price based on the selected variation.

Code:

<br>add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );<br>function move_variations_single_price(){</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">global $product, $post;

if ( $product-&gt;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 );
}

Copy after login

}

function replace_variation_single_price(){

global $product;

// Prices and calculations
$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] );

$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>

}

Additional Notes:

• This code is compatible with WooCommerce versions 3.2.x and higher.
• It is recommended to optionally move the CSS to the stylesheet of your active theme for better readability.
• The code does not handle compatibility with certain plugins or themes that modify WooCommerce's hooks.

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