> For the complete documentation index, see [llms.txt](https://docs.stylemixthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylemixthemes.com/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-products.md).

# Woo

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

The **WooCommerce** option gives you the opportunity to display the Calculator on the product page so users are able to calculate the price of a product in different parameters and use the [WooCommerce Checkout](/cost-calculator-builder/cost-calculator-settings/calculator-settings/woo-products/woo-checkout.md) with hundreds of integrated payment methods.

<figure><img src="/files/1OpigHE5M7RIoUG3lRyb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The Calculator only works with simple WooCommerce products. &#x20;
{% endhint %}

![](/files/VrZUQyJ4rSIkT760jteC)

In the following steps, we'll show you how to add a calculator to products on a WooCommerce store page:

![](/files/Cma3f22ezhEZTDueiACU)

After creating the WooCommerce Products, let's have a look at the settings of the Calculator.

### **Enable Calculator for Products**

WooCommerce can be enabled from the **Woo** Tab of the [**Calculator Settings**](/cost-calculator-builder/cost-calculator-settings/calculator-settings.md):

<figure><img src="/files/2TRhLH7aKwM0JdCXmXEF" alt=""><figcaption></figcaption></figure>

You can enable showing calculators by category or by product.

### Showing Calculators by Category

Turn on the **Show calculator by category field** and choose the product category where you wish to display the **Calculator:**

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

This option allows us to display the calculator only in those product categories that we have selected:

![](/files/W5kcn0DaER1kEWRFaqvn)

### Showing Calculators by Product

Turn on the **Show calculator by product field** and choose the product where you wish to display the **Calculator:**

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

This option allows us to display the calculator only in those products that we have selected:

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

Then, to sell your service/product configured by the calculator on your website, you need to enable **WooCommerce Checkout** from the **same tab**:

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

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.

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

### Hide WooCommerce Add To Cart Form

Also, you can disable the **WooCommerce Add To Cart Form** option to remove the WooCommerce default Add to Cart button on the product page.&#x20;

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

This option makes customers use only a calculator to calculate the price:

![](/files/iDTFOEniN6yzGlr4F6t3)

### Connect WooCommerce Meta to Calculator Fields

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 the provided actions.

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

On the **WooCommerce Meta** field, select the available meta, a product price, and stock.&#x20;

{% hint style="info" %}
Right now, on the WooCommerce Meta section, only the Price and Stock meta fields are available. Other meta will be added in the next updates of the plugin based on customer requests.

If you have suggestions on which product meta we should add, please create a Feature Request ticket on our [support website](https://support.stylemixthemes.com/).&#x20;
{% endhint %}

Then, indicate the needed field on the Calculator Field (the current calculator fields appear). After selecting which action you want to tie them: **Set Value** or **Set Value and disable**.&#x20;

* **Set Value -** automatically displays the value of Meta on the calculator field

![](/files/e374gqzHdaq4V9aU8j2h)

* **Set Value and disable -** shows the value on the calculator field and makes the field impossible to change.&#x20;

![](/files/tAoXSUqZ58kZcdOc3tmy)

{% hint style="info" %}
The WooCommerce Meta section works with [Quantity](/cost-calculator-builder/calculator-elements/quantity.md) and [Range](/cost-calculator-builder/calculator-elements/range-button.md) fileds of the calculator.
{% endhint %}

### **Calculator position**

After, choose where to display the  **Calculator** on the product page under the Select Hook For Showing Calculator field.

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

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's main information (before the product tabs)
* **After Single Products -** at the end of the product content  (At the Bottom of the Product)

![](/files/seKfizgo1BsCSVmqTy5x)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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-products.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.