Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Change WooCommerce Dynamic Pricing Display

May 14, 2019

5 Min Read
Reading Time: 5 minutes

WooCommerce pricing display is an important area of the product page. Customers check out the prices and carry out price and product comparison before buying the products. Thus, the request to change the WooCommerce price display is a common store alteration. I am assuming that your WooCommerce store is up running on an optimized best WooCommerce hosting. Now let’s move on:

Changing the WooCommerce pricing display involves two important filters:

Change WooCommerce Price Display for All Products

function cw_change_product_price_display( $price ) {
		$price .= ' At Each Item Product';
		return $price;
	}
	add_filter( 'woocommerce_get_price_html', 'cw_change_product_price_display' );
	add_filter( 'woocommerce_cart_item_price', 'cw_change_product_price_display' );

The woocommerce_get_price_html filter will change this on the shop pages:

Change WooCommerce Price Display

Similarly, on individual product pages:

individual product pages

The woocommerce_cart_item_price filter will adjust this display within the cart as well:

individual product pages

Sort Single Product Price Display

What if you want to especially change the price display for a particular product? This can be done using the same filters, as they will also pass additional arguments for conditionally changing the price.

This time I will separate out these filters and use two functions to modify the product and cart prices.

I will first check the product ID,  and then change the pricing display for that product only.

function cw_change_product_html( $price_html, $product ) {
 if ( 22 === $product->id ) {
 $price_html = '<span class="amount">$50.00 per Unit</span>';
 }

 return $price_html;
}
add_filter( 'woocommerce_get_price_html', 'cw_change_product_html', 10, 2 );


function sv_change_product_price_cart( $price, $cart_item, $cart_item_key ) {
 if ( 22 === $cart_item['product_id'] ) {
 $price = '$50.00 per Unit<br>(7-8 skewers per Unit)';
 }
 return $price;
}
add_filter( 'woocommerce_cart_item_price', 'sv_change_product_price_cart', 10, 3 );

The first function will change my product page:

change my product page

Along with the shop display:

shop display

While the second function will adjust my cart display with my new WooCommerce pricing:

adjust my cart display

However, if you have multiple products with unit prices, this method could be very cumbersome, and I probably do not want to use a switch or an if statement block for every product ID. Instead, I recommend using a product custom field to adjust the price display. I will use the ID to get this field, and then save myself from a lot of coding because I will pull the field in programmatically.

Change WooCommerce Price Display Based on Product Fields

If you want to change the pricing display for some products (each product might have a different unit price), a custom field will result in far simpler code, as I can add the field for each product on the list and then simply retrieve this field in the code:

simply retrieve this field in the code:

Add Custom Field

Once you have added the custom field, you can then retrieve the unit price, and if one is set for the product, adjust the pricing display to use the unit price and a custom label instead:

function cw_change_product_html( $price_html, $product ) {
	$unit_price = get_post_meta( $product->id, 'unit_price', true );
	if ( ! empty( $unit_price ) ) {
		$price_html = '<span class="amount">' . wc_price( $unit_price ) . ' per kg</span>';	
	}
	
	return $price_html;
}
add_filter( 'woocommerce_get_price_html', 'cw_change_product_html', 10, 2 );
// Change the cart prices if a unit_price is set
function cw_change_product_price_cart( $price, $cart_item, $cart_item_key ) {
	$unit_price = get_post_meta( $cart_item['product_id'], 'unit_price', true );
	if ( ! empty( $unit_price ) ) {
		$price = wc_price( $unit_price ) . ' per kg';	
	}
	return $price;
}	
add_filter( 'woocommerce_cart_item_price', 'cw_change_product_price_cart', 10, 3 );

Note: wc_price() is a handy function for formatting numbers within the shop pricing display settings. All the codes put in functions.php which is located in the theme folder.

In this case, the pricing display on the product/shop page will only be changed if a unit price is set. If not, the price will remain the same.

pricing display on the product

This will also happen with the items in the cart — the WooCommerce price display will be conditionally adjusted depending on whether the item has a unit_price set in the custom field:

unit_price set in the custom field

Display WooCommerce Pricing using WP_Query

The following code displays dynamic WooCommerce pricing using WP_Query.

<?php
 
$product_categories = array('cat-name');

$wc_query = new WP_Query( array(
    'post_type' => 'product',
    'post_status' => 'publish',
    'posts_per_page' => 10,
    'tax_query' => array( array(
        'taxonomy' => 'product_cat',
        'field'    => 'slug',
        'terms'    => $product_categories,
        ) )
) );
?>
<h1> Category Name </h1>

    <?php if ($wc_query->have_posts()) : ?>
    <?php while ($wc_query->have_posts()) :
        $wc_query->the_post(); ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('full'); ?>

            <h1><?php the_title(); ?> </h1>
            <?php $price = get_post_meta( get_the_ID(), '_price', true ); ?>
            <p><?php echo wc_price( $price ); ?></p>

        </a>
        <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    <?php else:  ?>
    <li>
        <?php _e( 'You have no entry' ); ?>
    </li>
    <?php endif; ?>

In the code snippet above, the most important function is WP_Query that provide several important functions such as post_type, post_status, posts_per_page and tax_query. All these functions provide common functionality within the main loop. The get_post_meta() fetches the meta values. the currently selected currency is displayed through the wc_price() function. In th emain query, wp_reset_postdata() is used to set the $post global to the current post. Finally, $woocommerce_price_display_cat has the currently selected WooCommerce product category.

Before moving to another window read how you can make a custom dashboard for your store using WooCommerce REST API.

Wrapping up!

In this article, I discussed the issue of changing the price display on WooCommerce product pages. This is an easy alteration that could be carried out by adding simple code to product page filters. If you have any question or suggestion about the code or the article, do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Your WooCommerce Store Needs A Reliable Host

With no compromise on Performance, Security & Support.

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!