Please note this article is meant for the premium version of the plugin.

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: hide the plugin’s pricing summary

example-pricing-summary

Hiding the pricing summary can be done with a small bit of custom CSS. Read about it here.

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:

Please supply your license key to unlock the code

Since this is a custom-coded snippet, we kindly ask for your license key so our system 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:

Please supply your license key to unlock the code

Since this is a custom-coded snippet, we kindly ask for your license key so our system can verify your purchase.

Wrapping up

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