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