WooCommerce: Display default Variation Regular and Sale Price

To display the default selected variation regular price and sale price on the WooCommerce archive Shop or Category pages, you’ll need to modify the code to identify and display the prices of the default selected variation.

Suppose you are a WordPress/ WooCommerce developer or business owner and looking for a WooCommerce function to display the default selected variation’s regular price and sale price on the shop/category page. Then this article is important for you to resolve your problem.

Before Layout/Output: Refer the below screenshot

WooCommerce: Display Regular & Sale Price for variable products on shop page

Table of Contents

Display Default Variation Regular and Sale Price on Archive Page (shop, category, etc.)

Place the below code in your child theme functions.php file or a custom plugin dedicated to custom WooCommerce functionalities.

Always test any changes on a staging site or make a backup before applying them to a live website.

Also Read: Create WooCommerce custom product type programmatically


function wc_codevyne_custom_variable_price( $price, $product ) {
  
	if ( $product->is_type( 'variable' ) ) {
		
		
	$default_attributes = $product->get_default_attributes();
       foreach($product->get_available_variations() as $variation_values ){
            foreach($variation_values['attributes'] as $key => $attribute_value ){
                $attribute_name = str_replace( 'attribute_', '', $key );
                $default_value = $product->get_variation_default_attribute($attribute_name);
                if( $default_value == $attribute_value ){
                    $is_default_variation = true;
                } else {
                    $is_default_variation = false;
                    break; // Stop this loop to start next main lopp
                }
            }
            if( $is_default_variation ){
                $variation_id = $variation_values['variation_id'];
				if ( ! empty( $variation_id ) ) {
            $variation = wc_get_product( $variation_id );
            
            if ( $variation ) {
                $pricereg = $variation->get_regular_price();
                $saleprice = $variation->get_sale_price();
				
          if ( $pricereg !== $saleprice ) {
        $price = ' <del> '.wc_price($pricereg) .' </del><ins style="font-weight:600;"> '. wc_price($saleprice).' </ins>  ';
    }else{
		$price ='<ins style="font-weight:600;"> '. wc_price($pricereg).' </ins>  ';
	}
			}
		}
                break; // Stop the main loop
            }
        }
}
    return $price;
}
add_filter( 'woocommerce_get_price_html', 'wc_codevyne_custom_variable_price', 10, 2 );

function wc_codevyne_custom_variable_price( $price, $product ) {

if ( $product->is_type( 'variable' ) ) {

$default_attributes = $product->get_default_attributes();

foreach($product->get_available_variations() as $variation_values ){

foreach($variation_values['attributes'] as $key => $attribute_value ){

$attribute_name = str_replace( 'attribute_', '', $key );

$default_value = $product->get_variation_default_attribute($attribute_name);

if( $default_value == $attribute_value ){

$is_default_variation = true;

} else {

$is_default_variation = false;

break; // Stop this loop to start next main lopp

}

if( $is_default_variation ){

$variation_id = $variation_values['variation_id'];

if ( ! empty( $variation_id ) ) {

$variation = wc_get_product( $variation_id );

if ( $variation ) {

$pricereg = $variation->get_regular_price();

$saleprice = $variation->get_sale_price();

if ( $pricereg !== $saleprice ) {

$price = ' <del> '.wc_price($pricereg) .' </del><ins style="font-weight:600;"> '. wc_price($saleprice).' </ins> ';

}else{

$price ='<ins style="font-weight:600;"> '. wc_price($pricereg).' </ins> ';

}

break; // Stop the main loop

}

return $price;

}

add_filter( 'woocommerce_get_price_html', 'wc_codevyne_custom_variable_price', 10, 2 );

After Layout/Output: Default Variation Regular and Sale Price are Showing now below the screenshot

WooCommerce: Display variable products Regular & Sale Price in loop

Let’s see how this code works:

It hooks into the woocommerce_get_price_html filter, which allows us to modify the price HTML displayed on product archive pages.
Check if the product is of type “variable”.
Retrieves available variations and their regular and sale prices.
Constructs the HTML markup to display the regular price and sale price (if applicable) for variable products.

Are you want to get implementation help, or modify or extend the functionality of this script?

A Tutorialswebsite Expert can do it for you.

Hire an Expert

Display Variation Minimum Sale Price and Maximum Regular Price on Archive Page


function wc_codevyne_custom_variable_price( $price, $product ) {
  
	if ( $product->is_type( 'variable' ) ) {
	
	$min_reg_price = $product->get_variation_regular_price('max');
        $min_sale_price = $product->get_variation_sale_price('min');

        if ( $min_reg_price !== $min_sale_price ) {
        $price = ' <del> '.wc_price($min_reg_price) .' </del><ins style="font-weight:600;"> '. wc_price($min_sale_price).' </ins>  ';
    }
			}

    return $price;
}
add_filter( 'woocommerce_get_price_html', 'wc_codevyne_custom_variable_price', 10, 2 );

function wc_codevyne_custom_variable_price( $price, $product ) {

if ( $product->is_type( 'variable' ) ) {

$min_reg_price = $product->get_variation_regular_price('max');

$min_sale_price = $product->get_variation_sale_price('min');

if ( $min_reg_price !== $min_sale_price ) {

$price = ' <del> '.wc_price($min_reg_price) .' </del><ins style="font-weight:600;"> '. wc_price($min_sale_price).' </ins> ';

}

return $price;

}

add_filter( 'woocommerce_get_price_html', 'wc_codevyne_custom_variable_price', 10, 2 );

This code snippet filters the display of the variable product price HTML. It gathers all visible variations’ regular and sale prices and finds the minimum sale and maximum regular price.

This code will display the regular price and sale price range for variable products on archive pages (shop, category, etc.). You can place this code snippet in your theme’s functions.php file or a custom plugin created for this purpose. As always, ensure you test this code in a staging environment or make a backup before implementing it on a live site.

Wrapping Words

Thanks for reading 🙏, I hope you found the How to Display Default Variation Regular and Sale Price in WooCommerce tutorial helpful for your project. Keep learning! If you face any problems – I am here to solve your problems.

FAQs

WooCommerce to display Variation Sale and Regular Price on Archive Page

If you want to display the sale and regular prices for the default selected variation of variable products on the WooCommerce archive pages (shop, category, etc.), you can utilize the above code snippets.

How to display variable product’s Regular and sale Prices in the loop?

woocommerce_get_price_html filter allows us to modify the price HTML displayed on product archive pages. display variable product’s Regular & Sale Prices in the loop you can use “Display Default Variation Regular and Sale Price on Archive Page (shop, category, etc.)” code Snippets.

Is it possible to display only the maximum regular and sale price on Archive Page or Shop Page?

Yes, It is possible to display only the maximum regular and sale prices using $product->get_variation_regular_price(‘max’); and $product->get_variation_sale_price(‘max’);