Woo Products
Pro Feature
Last updated
Was this helpful?
Pro Feature
Last updated
Was this helpful?
The Woo Products option gives you the opportunity to display the Calculator on the product page so the users are able to calculate the price of a product in different parameters.
In the following steps, we'll show you how to add a calculator to products on a WooCommerce store page:
After creating the WooCommerce Products, let's have a look at the settings of the Calculator.
First, open the Cost Calculator dashboard and edit the selected calculator to display on the WooCommerce products page:
Next, you need to enable the option by turning on the WooCommerce Products from the Settings of the calculator:
You can enable showing calculators by category or based on the product.
Turn on the Show calculator by category field and choose the product category where you wish to display the Calculator:
This option allows us to display the calculator only in those product categories that we have selected:
Turn on the Show calculator by product field and choose the product where you wish to display the Calculator:
This option allows us to display the calculator only in those product that we have selected:
Then, to sell your service/product configured by the calculator on your website you need to enable Woo Checkout from the Settings of the calculator:
After enabling the Woo Checkout option, the list of your WooCommerce products will appear. We need to choose the "%Current Woo Product%" to display the calculator on selected categories.
Also, you can disable the WooCommerce Add To Cart Form option to remove the WooCoomerce default Add to Cart button on the product page.
This option makes customers use only a calculator to calculate the price:
You can use the price and the amount of the WooCommerce product left in your calculator. To do that, go to the Connect WooCommerce Meta to Calculator Fields section. Here you can link the WooCommerce Meta with the Calculator Fields using provided actions.
On the WooCommerce Meta field select the available meta, a product price, and stock.
Then indicate your needed field on the Calculator Field (the current calculator fields appear). After select with which action you want to tie them: Set Value or Set Value and disable.
Set Value - automatically displays the value of Meta on the calculator field
Set Value and disable - shows the value on the calculator field and makes the field impossible to change.
After, choose where to display the Calculator on the product page under the Select Hook For Showing Calculator field.
The Calculator can be displayed:
Before Single Product - before the product content begins (At the Top of the Product )
Before Product Meta - before the product's meta info (on the right side of the product image)
After Product Meta - after the product's meta info (on the right side of the product image)
After Single Product Summary - after the product main information (before the product tabs)
After Single Products - at the end of the product content (At the Bottom of the Product)
If you have suggestions on which product meta we should add, please create a Feature Request ticket on our .
The WooCommerce Meta section works with and fileds of the calculator.
