# Woo Checkout

{% embed url="<https://www.youtube.com/watch?t=25s&v=vO-JlXKvwes>" %}
WooCheckout Overview
{% endembed %}

Woo Checkout is used to charge the clients through WooCommerce Checkout. This option allows you to use hundreds of payment methods of WooCommerce.

{% embed url="<https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/?categoryIds=1023&collections=product&page=1>" %}

## Creating a Calculator Product

You should first create your own special **Calculator Product** using the WooCommerce plugin to use **WooCommerce Payment**s. So you can assign your Calculator Product to the specific calculator form to be redirected to the Cart or Checkout page.&#x20;

{% hint style="info" %}
If the product quantity in stock **is not important**, you can use **one** WooCommerce product for all calculators.&#x20;

***

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**](#change-product-quantity-based-on-calculator-fields) settings feature.
{% endhint %}

{% stepper %}
{% step %}
To do this navigate to **WP Dashboard** > **Products** and click **Add New**:

![](/files/GCwLtTwAGNvC2gXqXeQf)
{% endstep %}

{% step %}
The product that we are creating should be **Simple** type and **must have** a price **greater than zero `0`**:

![](/files/mmCKZHi6A458fcQSLUet)

{% hint style="info" %}
The price of the product will be changed to the cost that will be given by your calculator as a total (final) price.&#x20;
{% endhint %}
{% endstep %}

{% step %}
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:

![](/files/Y16PUSnnXmi8npEKWsQl)
{% endstep %}
{% endstepper %}

### Enabling Woo Checkout for Calculator

After creating the WooCommerce Product we can start configuring the calculator from [Calculator Settings](/cost-calculator-builder/cost-calculator-settings/calculator-settings.md).&#x20;

{% stepper %}
{% step %}
Open the Cost Calculator dashboard and edit the necessary calculator:

<figure><img src="/files/ri5cmeHCzkBAwoqZX5dr" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
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:

<figure><img src="/files/UFbWywKSq2MWAGVzWHVy" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
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.
{% endhint %}
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Make sure to <mark style="color:red;">**turn off**</mark> the [**Order Form**](/cost-calculator-builder/cost-calculator-settings/calculator-settings/order-form.md) 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.
{% endhint %}

## Adjusting Woo Checkout Settings

<figure><img src="/files/bhhfU6p8UfMVVsvGUjCP" alt=""><figcaption></figcaption></figure>

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

{% tabs %}
{% tab title="Calculator" %}

<figure><img src="/files/3J50Vg2NiA1IqGLqq9LJ" alt=""><figcaption></figcaption></figure>

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.
{% endtab %}

{% tab title="Replace Product On" %}

<figure><img src="/files/YfMxLhu2g64ztdjXpeJG" alt=""><figcaption></figcaption></figure>

When the **"Replace Product"** option is enabled, the previously added products to the cart (for A4) will be overwritten.
{% endtab %}

{% tab title="Replace Product Off" %}

<figure><img src="/files/XR6YO0cDolVjUpebCrFU" alt=""><figcaption></figcaption></figure>

When the **"Replace Product"** option is disabled, the previously added products to the cart will remain.
{% endtab %}
{% endtabs %}

After enabling the **Woo Checkout** option, the list of your WooCommerce products will appear. We need to choose the [**Calculator product**](#creating-a-calculator-product) we have previously created.

<figure><img src="/files/gzovBAVazKMhwG9B2Y8K" alt=""><figcaption></figcaption></figure>

#### **Action after Submits**

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.&#x20;

<figure><img src="/files/x3EfgH2RPz0y7VTO0m3N" alt=""><figcaption></figcaption></figure>

In the next option, you will need to select the total field to charge the customers.&#x20;

<figure><img src="/files/wjE5UlfxXBAQ0yF1qgCZ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

## Change Product Quantity Based on Calculator Fields

<figure><img src="/files/HdcybLe4DBOWTY3BRYzb" alt=""><figcaption></figcaption></figure>

This section of the **WooCheckout** tab in the [**Calculator Settings**](/cost-calculator-builder/cost-calculator-settings/calculator-settings.md) 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.&#x20;

> 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.&#x20;

{% hint style="success" %}
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.
{% endhint %}

To set up the feature follow **these steps:**

### Set Up WooProduct Quantity&#x20;

In your WooCommerce product make sure you have entered product quantity.

{% stepper %}
{% step %}
Follow **WP Dashboard > Products > All Products > Edit:**

<figure><img src="/files/NGEd4uzHPKVZnLfoc3AA" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Go to the **Inventory** tab and enable **Stock Management**, then enter the quantity:

<figure><img src="/files/RXJesh0DjqI3jZe6cUXo" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Do not forget to save the changes :white\_check\_mark:
{% endhint %}
{% endstep %}
{% endstepper %}

### Dynamic Product Quantity

{% stepper %}
{% step %}
Now go back to the calculator you need and move to the individual settings. Enable WooCheckout and choose the product you need:

<figure><img src="/files/DNn9UhSPqGtvndb7nDEu" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Other settings can be adjusted according to your needs.
{% endhint %}
{% endstep %}

{% step %}
Enable the Dynamic Product Quantity and select the calculator fields that you want to take the quantity value to **subtract** from WooProduct Quantity:

{% hint style="info" %}
You can choose any field(s) that returns a numerical value ([**quantity field**](/cost-calculator-builder/calculator-elements/quantity.md), [**slider**](/cost-calculator-builder/calculator-elements/range-button.md), [**dropdown**](/cost-calculator-builder/calculator-elements/drop-down.md), [**radio**](/cost-calculator-builder/calculator-elements/radio-button.md), etc.) here.&#x20;

***

However, when two or more fields are selected, the last field that is not hidden will be considered for updating the product count.
{% endhint %}

<figure><img src="/files/ImuSArShQX32jMV1WXiX" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Now you are done, once the user makes an order, the selected amount will be substracted automatically :white\_check\_mark:
{% endhint %}
{% endstep %}

{% step %}
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:

<figure><img src="/files/OtLTRHBH2uhGJJJEOrBU" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Example Woo Checkout Process (as user)

Now, we have a WooCheckout linked calculator embedded on the webpage. Let's see how users will be charged.&#x20;

{% stepper %}
{% step %}
Fill out the calculator according to your needs and proceed by clicking the **Add to Cart** button:

<figure><img src="/files/NL89ETSatenveWytQFmq" alt=""><figcaption></figcaption></figure>

If you are using other payment gateways along with the WooChekout, your calculator will look like this:

<figure><img src="/files/aFSWftARlJsc4NzblFXJ" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
The string “**Add to cart**” comes from the Cost Calculator Builder PRO plugin and [can be translated](https://docs.stylemixthemes.com/f-a-q/how-to-translate-or-change-the-strings-of-the-theme-and-plugins) using the [Loco translate plugin](https://wordpress.org/plugins/loco-translate/).
{% endhint %}
{% endstep %}

{% step %}
Based on the [**Action after Submits**](#action-after-submits), the next look may differ. In our case, we have selected Stay on Page as [**Action after Submits**](#action-after-submits)**.** Proceed by clicking the **View Cart** button.

<figure><img src="/files/gLR4T6oFACXe4W3nAykj" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Please make sure that the default [WooCommerce pages ](https://docs.woocommerce.com/document/woocommerce-pages/)(Cart, Checkout, etc.) are configured and set under **WooCommerce Settings > Advanced** tools
{% endhint %}
{% endstep %}

{% step %}
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:**

<figure><img src="/files/fHjfWASJHWBML8a4Ms93" alt=""><figcaption><p>Cart Page</p></figcaption></figure>

{% hint style="info" %}
Calculator Details are shown in the **Product Column.**
{% endhint %}
{% endstep %}

{% step %}
On the opened checkout page of the WooCommerce, fill out the billing details and complete the checkout:

<figure><img src="/files/PV1c5qwUi1mH3fn5fhcr" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
The next page confirms the order:

<figure><img src="/files/o68rOpycflHUoR4c2162" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Orders Management (admin)

Admin can check the created orders from the WooCommerse > Orders tab:

<figure><img src="/files/kCioKs3cg01kFfFn6iEa" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
By opening the order, you can find details of all selected options (as order details) from the calculator and change the order status:

<figure><img src="/files/hKk7AOUCNOQXURNyGm6q" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-checkout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.