# Add to Basket

Before integrating the configurator with a WooCommerce-based website, ensure that all necessary preparations have been completed. This includes deploying the WordPress website, installing and configuring the WooCommerce plugin, and verifying that the configurator is ready to be embedded into the site.

{% hint style="info" %}
**As you proceed through the following steps, ensure that both the Wordpress Admin interface and the Simplio3D application remain open in your browser.**
{% endhint %}

## Quick Setup — Simplio3D → WooCommerce: Add to Basket

1. Install and activate the **Simplio3D WooCommerce** plugin in WordPress.
2. Create a WooCommerce product (hidden), including SKU and a placeholder price.
3. In Simplio3D, go to Integrations → WooCommerce, choose **Add to Basket** mode, and fill in:
   * API URL (`?add-to-cart=PRODUCT_ID`) Example: <https://mydomain.com/?add-to-cart=22>
   * Access token
   * Store URL
   * WooCommerce consumer key & secret
   * Webhook Signature Secret (found in Webhooks tab)
4. In the Simplio3D, in Products, link your configurator to the WooCommerce product using its ID.
5. Embed the configurator into your site using the provided shortcode:

   ```
   [simplio3d_configurator url="…" product_id="123" height="850px" width="100%"]
   ```
6. On your WooCommerce Cart page, insert the cart shortcode:

   ```
   [woocommerce_cart]
   ```
7. Add custom CSS (in “Additional CSS”) to style thumbnails found in the cart:

   ```css
   .woocommerce-cart-form .product-thumbnail { max-width: 100px !important; }
   .woocommerce-cart-form .product-thumbnail img { max-width: 150px !important; width: auto !important; }
   .woocommerce-cart-form .product-name img { display: none !important; }
   ```

**Let’s review each step in detail.**

## Step 1

### Install and activate the Simplio3D WooCommerce plugin in WordPress.

Access the WordPress Admin dashboard and navigate to **Plugins → Add Plugin** and click **Upload Plugin** button found in the upper left screen. You can either use the **Add Plugin** button located on the **Installed Plugins** page or open the **Add Plugin** submenu and click **'Upload Plugin'**. From there, upload the plugin ZIP file to install it.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2Fplk7efmIHQleIvt6Lahf%2FScreenshot%202025-10-07%20at%2018.10.49.png?alt=media&#x26;token=052a1c04-4776-47ed-907d-c8e631c93475" alt=""><figcaption></figcaption></figure>

After selecting the ZIP file, click the **Install Now** button to install the plugin on your WordPress website.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FOTiBAHV9uobNGLVrccMk%2FScreenshot%202025-10-07%20at%2018.14.16.png?alt=media&#x26;token=c692c834-54c9-4fec-a725-32dd12915699" alt=""><figcaption></figcaption></figure>

After the plugin is installed, click **Activate Plugin**.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FIVTmQSLCynWgl3W8AYdF%2FScreenshot%202025-10-07%20at%2018.23.48.png?alt=media&#x26;token=6924efe1-2aba-46a7-b08a-71f1a6f223de" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Also, you can install the plugin by uploading the zip file directly in your server, through FTP, CPanel file manager or through terminal. Upload the Simplio3D WooCommerce plugin zip file into the ../wp-content/plugin/ .**
{% endhint %}

## Step 2

### Create a WooCommerce product (hidden), including SKU and a placeholder price.

In the WordPress Admin panel, select **Products** from the left-hand menu to create the product that will be linked to the configurator.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FCdeBu2kKAvR9TcUDD8vc%2FScreenshot%202025-10-07%20at%2020.40.12.png?alt=media&#x26;token=ce5eb9bc-903c-4272-b028-ef530a64c397" alt=""><figcaption></figcaption></figure>

Create any product in WooCommerce **and keep the product hidden.**

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FPuwHCF1XGk5AGUKdCHDI%2FScreenshot%202025-10-07%20at%2020.43.49.png?alt=media&#x26;token=5d1c773e-1dbe-4520-a90d-d7338220ec00" alt=""><figcaption></figcaption></figure>

Ensure that the product includes both an **SKU** and a **Price**. Although the final price will be generated by the configurator, an arbitrary price must still be set in WooCommerce for the product to function properly.

{% hint style="info" %}
**It’s not mandatory, but you can upload a Product Image to use as a thumbnail on the Cart and Checkout pages. If you don’t upload one, the product will automatically use the thumbnail generated from the configurator.**
{% endhint %}

**Add Price**

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F5HPsGpX2H60bmB6kigJb%2FScreenshot%202025-10-07%20at%2020.49.32.png?alt=media&#x26;token=0f414d2a-dd3b-4198-9524-1a63aa34397e" alt=""><figcaption></figcaption></figure>

**Add SKU**

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2Ff6Kz8CN0FupsyNNTjg93%2FScreenshot%202025-10-07%20at%2020.50.00.png?alt=media&#x26;token=c2bd8f41-fc14-4d31-884d-e7d9e190c22c" alt=""><figcaption></figcaption></figure>

Now click '**Publish**' to create your product.

{% hint style="warning" %}
**Create any product in WooCommerce but keep this product hidden.**

**Keep remember that product should have SKU and Price. It should be a proper product.**
{% endhint %}

In the **Products** list, you’ll see the newly added product along with its **ID**. This product ID is important and will be required in the next step.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2Fs3mHq1RLzvIzaai3sCtA%2FScreenshot%202025-10-08%20at%2011.40.43.png?alt=media&#x26;token=025486de-ea82-4f77-87c3-b58d21e4d10e" alt=""><figcaption></figcaption></figure>

## Step 3

### In Simplio3D, go to Integrations → WooCommerce, choose 'Add to Basket' integration mode, and fill in the form.

Access the **Integrations** section from the left-side menu in the Simplio3D application. Then, select **WooCommerce** to establish the connection with your account.

In this case, select the **Add to Basket** integration mode. This option ensures that the configured product is added directly to the WooCommerce cart.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FSPwy0I076O28dt8ig3xK%2FScreenshot%202025-10-07%20at%2021.02.32.png?alt=media&#x26;token=2f8b5965-c585-4f6f-98f7-6ac1bec9a246" alt=""><figcaption></figcaption></figure>

Below are the settings you need to configure to properly connect **Simplio3D** with **WooCommerce:**

* **Integration Mode:** Add to Basket
* **API URL:** This is made from the URL link of your website following *?add-to-cart=* and ID of the product. Example: <https://mydomain.com/?add-to-cart=22>
* **Access Token:** You can find this in your Simplio3D account profile under the **API Token** tab. Generate a token there and enter it in this field.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F0Nunlnpc9L2F4riCEFUB%2FScreenshot-2025-10-07-at-21.11.53.png?alt=media&#x26;token=25734f22-eb43-4f56-888f-dd2344bb794b" alt=""><figcaption></figcaption></figure>

* **Store URL:** Enter your website URL, including the **https\://** protocol. Example: <https://mydomain.com>
* **Consumer key:** Add WooCommerce Consumer key.
* **Consumer secret:** Add WooCommerce Consumer secret.
* **Webhook Signature Secret:** The secret key needs to be added in Simplio3D to validate signature from Woocommerce.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F6ei9Wuvtrvfr8aI8czEq%2Fimage.png?alt=media&#x26;token=4265eaa1-6bdf-457b-9db2-ad16e94f5ea3" alt=""><figcaption></figcaption></figure>

Both Consumer key and Consumer secret are taken from **WooCommerce>Settings>Advanced>REST API**.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2Ftw0XV9OzM1c1Ow7vEK88%2FScreenshot%202025-10-07%20at%2021.20.40.png?alt=media&#x26;token=52ce92a4-25d0-4804-a301-71944a7832cb" alt=""><figcaption></figcaption></figure>

Click the **Create an API Key** button, then fill in the **Key Details** section. Add a **Description** and ensure that **Permissions** are set to **Read/Write**.

{% hint style="warning" %}
Its important to make sure that **Permissions** are set to **Read/Write**.
{% endhint %}

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FMguJXBzZ3mJNpJx5nYHx%2FScreenshot%202025-10-07%20at%2021.23.09.png?alt=media&#x26;token=3488eaee-ad2b-431b-b4e9-091c86f226d2" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**More detailed steps in getting the Consumer key and Consumer secret from WooCommerce are also explained in** [**'Redirect to Checkout'**](https://docs.simplio3d.com/integrations/woocommerce/redirect-to-checkout) **integration mode.**
{% endhint %}

Click the **Generate API Key** button, then copy and paste the **Consumer Key** and **Consumer Secret** into the integration form in **Simplio3D**.

After entering all the integration details in **Simplio3D**, click the **Connect to WooCommerce** button to complete the integration. If the information is correct, the application will confirm a successful connection with WooCommerce.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F8Lqqo6bYyzZjfgNYeO9n%2FScreenshot%202025-10-07%20at%2021.28.08.png?alt=media&#x26;token=5df9a097-00d0-4a77-ac0e-a4b88c6e9e9f" alt=""><figcaption></figcaption></figure>

## Step 4

### In the Simplio3D app, in Products, link your configurator to the WooCommerce product using its ID.

While still in the **Simplio3D** application, navigate to **Products** to connect your configurators with WooCommerce.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FtfyXQtd9oFjyJTMygTAT%2FScreenshot%202025-10-07%20at%2021.34.14.png?alt=media&#x26;token=caa7fef0-fe6a-47ef-b20e-568b773cfc07" alt=""><figcaption></figcaption></figure>

Each product in **Simplio3D** includes a shopping cart icon that you can click to connect it with **WooCommerce**. Click the shopping cart icon for the desired configurator to open the popup window. Then select **WooCommerce**, and be sure to enter the **Product ID** of the hidden product created in WooCommerce.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F7bvgsFZR94GYUXz0Jjgx%2FScreenshot%202025-10-07%20at%2021.39.42.png?alt=media&#x26;token=9382cd47-6cb3-4f04-b431-c982ebe19004" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Be sure to enter the **Product ID** of the hidden product created in WooCommerce.
{% endhint %}

## Step 5

### Embed the configurator into your site using the provided shortcode

Let’s embed the configurator on a WordPress page so it can be displayed to users and customers. Click the **Edit** button for the configurator you previously connected to WooCommerce.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FjaJuQ5NJlZnYcPh4dyfQ%2FScreenshot%202025-10-07%20at%2021.49.57.png?alt=media&#x26;token=e31966b6-69ba-4639-873e-c156d15f6c03" alt=""><figcaption></figcaption></figure>

Once you’re on the product editing page, go to **Add Form tab**, then open the dropdown menu in the upper-right corner and select **Add to Cart**. Instead of creating a contact form, we enable a Add to cart button for the WooCommerce website.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F2oONhwBvJW79xpouJYex%2FScreenshot%202025-10-07%20at%2021.51.54.png?alt=media&#x26;token=957af491-b1f5-42e4-ba10-729b2a86cb00" alt=""><figcaption></figcaption></figure>

Click the **Add Field** button next to the dropdown menu to define and add the field block.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2Fhj1rVCt1QzaQ1tbBOxrD%2FScreenshot%202025-10-07%20at%2021.57.44.png?alt=media&#x26;token=39927621-a399-47ef-9861-83972e05a6dd" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Leave the **URL** field blank, as this setup is intended to add the product directly to the WooCommerce cart.
{% endhint %}

Name the **Add to Cart** button and click 'Save'.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FV4tucmGh8DtfDf1dhtwG%2FScreenshot%202025-10-07%20at%2022.00.10.png?alt=media&#x26;token=5f5cf7b4-8284-417e-9b10-fa3434dd68d0" alt=""><figcaption></figcaption></figure>

Go to the **Share** tab to copy the source link (**src**) for embedding into your WordPress website.&#x20;

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FuQZu9CzAtcJZynkr7zLT%2FScreenshot-2025-10-07-at-22.15.43.png?alt=media&#x26;token=a9688cae-c6a4-4ea1-90e2-f20e495c7732" alt=""><figcaption></figcaption></figure>

For the **Add to Basket** integration mode, **you’ll need to use a shortcode that also includes the product ID**. The shortcode format is as follows:

`[simplio3d_configurator url="https://app.
simplio3d.com/configurator/share/eyJpdiI6IngxS3Q1OVlPQzBzdFZGZUpaUUhJOVE9P
SIsInZhbHVlIjoiZ45545454gfggfghbffgT09IiwibWFjIjoiNGFlZTA5YzNmYzJjYj
AwNTU4NTZkZjY2YjU1MzQzZDE1M2ZhODYwZGU4YmYzZmE5NGU0MDgxMmJjNGJkZjA3O
CIsInRhZyI6IiJ9" product_id="280" height="850px" width="100%"]`

The shortcode which is supported by the Simplio3D WooCommerce plugin contains the following values:

* **Name of the shortcode:** `simplio3d_configurator`
* **URL:** where we copy/paste the source link of the configurator (as shown above)
* **Product ID:** The ID of the product taken from the WooCommerce product listing (as shown above)
* **Height:** iFrame height in pixels/percentage&#x20;
* **Width:** iFrame width in pixels/percentage

Add the shortcode anywhere on your WordPress website. For example, you can create a new page called **Configurator** and insert the shortcode there.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F0mcnzS3S4rjVvodGqvYP%2FScreenshot%202025-10-07%20at%2022.21.37.png?alt=media&#x26;token=5f896bc6-0e1e-46ec-b325-0ee02721acd9" alt=""><figcaption></figcaption></figure>

## Step 6

### In your WooCommerce Cart page, insert the cart shortcode

In the WordPress Admin panel, navigate to **Pages** and open the **Cart** page for editing.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FamYoidTyjYhXay1PGFFb%2FScreenshot%202025-10-07%20at%2022.24.40.png?alt=media&#x26;token=ba58a0ce-874b-4794-b5cb-cada63f8a7ef" alt=""><figcaption></figcaption></figure>

Within the **Cart** page, create a new shortcode block and include the shortcode shown below: `[woocommerce_cart]`

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2F0abSQLCkadxKxfUIGVu0%2FScreenshot%202025-10-07%20at%2022.28.06.png?alt=media&#x26;token=22961cc4-db03-4286-80ec-16adba8e9dc0" alt=""><figcaption></figcaption></figure>

Click **Save** to apply and save the changes made to the **Cart** page.

## Step 7

### Add custom CSS (in “Additional CSS”) to style thumbnails found in the Cart

`.woocommerce-cart-form .product-thumbnail { max-width: 100px !important; }`

`.woocommerce-cart-form .product-thumbnail img { max-width: 150px !important; width: auto !important; }`

`.woocommerce-cart-form .product-name img { display:none !important; }`

Add CSS in theme. It’s an additional CSS for the theme.

<figure><img src="https://272360655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnWstJiDljIGTKDHKp9JL%2Fuploads%2FHmJh2zxYVHtlnmspeZd6%2FScreenshot%202025-10-07%20at%2022.37.20.png?alt=media&#x26;token=4c9472b4-38de-4814-bf93-77747fb05996" alt=""><figcaption></figcaption></figure>