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 code. Thankfully, WooCommerce makes it easy. Add the following code to your theme. If you’re unsure where and how to add it, you can read here how to do it.

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 code. This code will make sure that when your visitor changes options, the WooCommerce price will be updated. Add the code below to your theme.

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.

Not working? Let’s troubleshoot

Is the price change still not working after finishing the steps above? If you are using Elementor as your page builder, page sure to add a class name to the “Product Price” element on your Single Product template. The class name should be “summary” (without the quotes of course!).

Wrapping up

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

Was this article helpful?

Related Articles