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

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

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:

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:

Wrapping up

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