How to Change the WooCommerce Variable Product Price on Shop Page and Product Loop?
Changing the display of WooCommerce variable product prices on the shop page and product loop typically requires customizing your theme’s code. Here’s a step-by-step guide on how you can achieve this. In this post we are showing multiple example with there result:
Access Theme Files:
First, access your WordPress installation’s files via FTP or the file manager provided by your web hosting service. Navigate to wp-content/themes/your-theme-name/ directory. and write Function in your Function.php file.
OR
Using the “Snippet Plugins” create the snippet and write the code on on this snippet and active it for the “Only run on site front-end”.
1. Display the Minimum Price
Following is the code to display the minimum price for the variable products. It will change the variable product price display on the shop and product pages.
// Display the minimum price for variable products
add_filter('woocommerce_variable_sale_price_html', 'woosuite_custom_variable_product_price', 10, 2 );
add_filter('woocommerce_variable_price_html', 'woosuite_custom_variable_product_price', 10, 2 );
function woosuite_custom_variable_product_price( $price, $product ) {
// Check if it's a variable product
if ( $product->is_type('variable') ) {
// Get all variations for the product
$variations = $product->get_available_variations();
// Loop through variations to find the minimum price
$min_price = null;
foreach ( $variations as $variation ) {
$variation_price = floatval($variation['display_price']);
// Set the initial minimum price or update it if a lower price is found
if ( $min_price === null || $variation_price < $min_price ) {
$min_price = $variation_price;
}
}
// Display the minimum price
if ( $min_price !== null ) {
$price = wc_price($min_price);
}
}
return $price;
}
Here are the final results upon adding the code snippet to my store.
Similarly, on shop page only see the minimum price for all the variable products.
2. Display the Maximum Price
In the above example we show how to change the price range to show only lower price of the product variations, Now the example for how to show only the maximum price among the variations.
Here the Code :
// Display the maximum price for variable products
add_filter('woocommerce_variable_sale_price_html', 'woosuite_custom_variable_product_price', 10, 2);
add_filter('woocommerce_variable_price_html', 'woosuite_custom_variable_product_price', 10, 2);
function woosuite_custom_variable_product_price($price, $product) {
// Check if it's a variable product
if ($product->is_type('variable')) {
// Get all variations for the product
$variations = $product->get_available_variations();
// Loop through variations to find the maximum price
$max_price = null;
foreach ($variations as $variation) {
$variation_price = floatval($variation['display_price']);
// Set the initial maximum price or update it if a higher price is found
if ($max_price === null || $variation_price > $max_price) {
$max_price = $variation_price;
}
}
// Display the maximum price
if ($max_price !== null) {
$price = wc_price($max_price);
}
}
return $price;
}
This code is similar to the previous example, but instead of finding the minimum price, it finds the maximum price among the available variations.
It updates the $max_price variable if a higher price is found during the loop. Finally, it displays the maximum price by setting the $price to the formatted price using the wc_price() function.
Here are the final results upon adding the code snippet to my store.
Similarly, on shop page only see the minimum price for all the variable products.
3.Display the Price Range With any text
Now if you want to display any text before the price like if you showing the lowest price then you want to display “FROM” before the price to understand the price starting from this price then:
//Display the price range with "From" for variable products
add_filter('woocommerce_variable_price_html', 'woosuite_custom_variable_product_price', 10, 2);
function woosuite_custom_variable_product_price($price, $product) {
// Check if it's a variable product
if ($product->is_type('variable')) {
// Get all variations for the product
$variations = $product->get_available_variations();
// Get the minimum and maximum prices
$prices = array();
foreach ($variations as $variation) {
$variation_price = floatval($variation['display_price']);
$prices[] = $variation_price;
}
// Set the price range
$min_price = min($prices);
$max_price = max($prices);
// Format the price range with "From"
if ($min_price === $max_price) {
$price = wc_price($min_price);
} else {
$price = sprintf(__('From %s', 'woocommerce'), wc_price($min_price));
}
}
return $price;
}
Here are the final results upon adding the code snippet to my store.
Similarly, on shop page only see the minimum price for all the variable products.
4. Display the selected price on shop page.
Now if you want to display the price which one user select from the variations :
// Display the price of the selected variation dynamically
add_action( 'woocommerce_variable_add_to_cart', 'woosuite_change_price_with_variations' );
// Define the 'woosuite_change_price_with_variations' function
function woosuite_change_price_with_variations() {
global $product; // Access the global $product object
$price = $product->get_price_html(); // Get the current price HTML for the product
wc_enqueue_js( "
// Attach an event listener to the 'found_variation' event on the cart form
$(document).on('found_variation', 'form.cart', function( event, variation ) {
if (variation.price_html) {
$('.summary > p.price').html(variation.price_html); // Update the price HTML in the product summary
}
$('.woocommerce-variation-price').hide(); // Hide the variation price display
});
// Attach an event listener to the 'hide_variation' event on the cart form
$(document).on('hide_variation', 'form.cart', function( event, variation ) {
$('.summary > p.price').html('" . $price . "'); // Restore the original price HTML in the product summary
});
" );
}
The result:
