How to hide the plugin pricing summary and use WooCommerce default pricing

Please note this article is meant for the premium version of the plugin and only works on simple and variable products. Furthermore, it expect a standard WooCommerce installation without modification to the price features.

Not a fan of the pricing summary that the plugin generates at the bottom of your custom options? Then this article will explain how you can hide it, and use WooCommerce’s pricing HTML instead. We’ll also make sure that WooCommerce’s price updates in real time if your user selects different options.

Let’s get started!

Step 1: (optionally) hide the plugin’s pricing summary

example-pricing-summary

Hiding the pricing summary can be done by going to WooCommerce → Settings → Product Fields and set the Display Pricing Summary setting to Hide The Summary.

Step 2: change WooCommerce’s price output

We need to make some minor changes to the WooCommerce price HTML, so we can easily target it with Javascript. Thankfully, WooCommerce makes it easy. Add the following code at the bottom of your (child) theme’s functions.php file:

Supply your license key to unlock the code

Since this is a custom-coded snippet, please enter your license key so we can verify your purchase.

Step 3: add JavaScript

In this last step, we’ll be adding some Javascript. This code will make sure that when your visitor changes options, the WooCommerce price will be updated. Add the code below at the bottom of your (child) theme’s functions.php file:

Supply your license key to unlock the code

Since this is a custom-coded snippet, please enter your license key so we can verify your purchase.

Wrapping up

That’s it! You can now test your work.

Was this article helpful?

Related Articles