How to add items to the pricing summary
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:
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:
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:
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:
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.
Notice line 5 and 6. In line 5, you should add the product ID’s this code snippet should run on. The 6th 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:
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.
Notice line 5, 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.