Woo Checkout
Pro Feature
Last updated
Was this helpful?
Pro Feature
Last updated
Was this helpful?
Woo Checkout is used to charge the clients through WooCommerce Checkout. This option allows you to use hundreds of payment methods of WooCommerce.
You should first create your own special Calculator Product using the WooCommerce plugin to use WooCommerce Payments. So you can assign your Calculator Product to the specific calculator form to be redirected to the Cart or Checkout page.
If the product quantity in stock is not important, you can use one WooCommerce product for all calculators.
However, if the product quantity in stock is important, you have to create separate products for them. Product quantity can be decreased per order based on the values in the calculator fields using the Change Product Quantity Based on Calculator Fields settings feature.
To do this navigate to WP Dashboard > Products and click Add New:
The product that we are creating should be Simple type and must have a price greater than zero 0:
The price of the product will be changed to the cost that will be given by your calculator as a total (final) price.
The setting of the product image is optional. You can hide the product from the catalog to not display it on the WooCommerce Shop page:
After creating the WooCommerce Product we can start configuring the calculator from Calculator Settings.
Open the Cost Calculator dashboard and edit the necessary calculator:
Then, to sell your service/product configured by the calculator on your website you can enable Woo Checkout from the Settings tab of the calculator:
We have enabled WooCheckout for our calculator. Now let's see the settings of the Woo Checkout tab to learn how to customize it accordingly.
Make sure to turn off the Order Form if you have enabled it before for this calculator to use the WooChekout feature. Order Form is not necessary, because in WooCheckout all processes (billing info, email sending, orders management, etc.) regarding the transaction will be managed by WooCommerce.
Replace Product - by default, when the calculation is done in the same Product and redirected to the WooCommerce cart, it will replace the previously added product. When Replace Product option is disabled the same Product can be added to the cart with different values.
Example: Let's say we have a Calculator for Printing Services:
The user makes calculations for A4 paper size and adds to the Cart. Then, make calculations for A5 paper size as well. Depending on whether the "Replace Product" is enabled or disabled the Product will be added to the cart differently.
After enabling the Woo Checkout option, the list of your WooCommerce products will appear. We need to choose the Calculator product we have previously created.
After choosing your proper Calculator Product from the list, you should also choose Action after Submits whether you would like to redirect the visitors directly to the Cart, Checkout, or Stay on the Page page after filling out the Calculator form.
In the next option, you will need to select the total field to charge the customers.
You can select more than one Formula (Total) Field. In this case, the sum of the selected formula (total) field elements will be taken as a final price to charge.
This section of the WooCheckout tab in the Calculator Settings is designed to give you more control over the product quantities in the shopping cart based on the inputs from the user. Essentially, it allows for the automatic adjustment of the quantity of a product added to the cart, according to the specific fields in your calculator.
For example, if you have 100 T-shirts in your product and there is a calculator field that asks for the number of T-shirts that the user wants to order after the order is made the number of T-shirts will automatically be decreased.
This feature enhances the flexibility and accuracy of your e-commerce store by ensuring the product quantities match the user's requirements as calculated through your customized fields.
To set up the feature follow these steps:
In your WooCommerce product make sure you have entered product quantity.
Follow WP Dashboard > Products > All Products > Edit:
Go to the Inventory tab and enable Stock Management, then enter the quantity:
Now go back to the calculator you need and move to the individual settings. Enable WooCheckout and choose the product you need:
Other settings can be adjusted according to your needs.
Enable the Dynamic Product Quantity and select the calculator fields that you want to take the quantity value to subtract from WooProduct Quantity:
You can choose any field(s) that returns a numerical value (quantity field, slider, dropdown, radio, etc.) here.
However, when two or more fields are selected, the last field that is not hidden will be considered for updating the product count.
If the user selects more products than are available in your store, they will receive a warning and will not be able to submit the order:
Now, we have a WooCheckout linked calculator embedded on the webpage. Let's see how users will be charged.
Fill out the calculator according to your needs and proceed by clicking the Add to Cart button:
If you are using other payment gateways along with the WooChekout, your calculator will look like this:
The string “Add to cart” comes from the Cost Calculator Builder PRO plugin and can be translated using the Loco translate plugin.
Based on the Action after Submits, the next look may differ. In our case, we have selected Stay on Page as Action after Submits. Proceed by clicking the View Cart button.
Please make sure that the default WooCommerce pages (Cart, Checkout, etc.) are configured and set under WooCommerce Settings > Advanced tools
As you see, our product price has been changed to the calculator's price. We set the product price as $10 once we have created it. Review the cart and go checkout:
Calculator Details are shown in the Product Column.
On the opened checkout page of the WooCommerce, fill out the billing details and complete the checkout:
The next page confirms the order:
By opening the order, you can find details of all selected options (as order details) from the calculator and change the order status:
Do not forget to save the changes
Now you are done, once the user makes an order, the selected amount will be substracted automatically
