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

For each product page with pricing-enabled options, Advanced Product Fields will display a pricing summary near the add to cart button:

example-pricing-summary

We’ve documented how to hide (parts of) the summary, but with additional code snippets, you can also add extra lines to the summary.

What we’re building

One of our example products is a wooden window configurator. Customers can purchase windows of any size through a width and height option. The plugin already calculates the correct addon price, but we’d also like to display the calculated frame surface ( = width * height) to the user:

pricing-summary-example

Now that we know what we’ll build, let’s dive in!

1. Preparing your configuration

We’ll need some Javascript that watches the width and height fields for changes and then calculates the correct surface. To do that, we need to give our respective fields class names in the backend so we can target them with Javascript later. To do so, give your width & height field a class name. We chose calc-width and calc-height:

calc-width

2. Adding the PHP code

Now you’ll have to add your HTML to our pricing summary. This can be done by adding a small code snippet:

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.

Notice the two lines in bold. In the first line, you should add the product ID’s this code snippet should run on. The 2nd bold line line defines the HTML to be added to the pricing summary. It should always be a div with 2 span elements as children.

3. Hook it up with Javascript

Javascript will make sure that each time the width or height is changed, the window surface is calculated and displayed. Add the following code:

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.

Notice the bold line, where you can enter the product ID’s these changes should be applied on. Also notice that our class names from the first step (calc-width and calc-height) are used in this code snippet. We’re basically calculating the square meters from the width and height (in millimetres) and displaying that in the HTML element with class name sw-frame-surface, which was added in step 2 of this article.

Wrapping up

It takes 2 small code snippets to add an interactive line to the pricing summary. You can alter this code to fit your exact use case but this should give you a pretty good idea of how to get started.