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 Customize Dynamic Pricing Display in WooCommerce

June 14, 2021

5 Min Read
woocommerce dynamic pricing

WooCommerce pricing display is an important area of the product page. Customers check out the prices and carry out price and product comparisons 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' );

 

ct_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.

Cloudways Woocommerce Hosting Has No Restrictions!

Test your code, plugins and themes with ease.

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 provides 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 the main 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 questions or suggestions about the code or the article, do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great performance for the price, and plenty of control”

Sean P [SMB Owner]

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 [email protected]

×

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

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!