Add to Basket
Integrate with WooCommerce using 'Add to Basket' mode
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.
Quick Setup — Simplio3D → WooCommerce: Add to Basket
Install and activate the Simplio3D WooCommerce plugin in WordPress.
Create a WooCommerce product (hidden), including SKU and a placeholder price.
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=22Access token
Store URL
WooCommerce consumer key & secret
In the Simplio3D, in Products, link your configurator to the WooCommerce product using its ID.
Embed the configurator into your site using the provided shortcode:
[simplio3d_configurator url="…" product_id="123" height="850px" width="100%"]On your WooCommerce Cart page, insert the cart shortcode:
[woocommerce_cart]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; }
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.

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

After the plugin is installed, click Activate Plugin.

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.

Create any product in WooCommerce and keep the product hidden.

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.
Add Price

Add SKU

Now click 'Publish' to create your product.
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.
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.

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.

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.

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.
Both Consumer key and Consumer secret are taken from WooCommerce>Settings>Advanced>REST API.

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.
Its important to make sure that Permissions are set to Read/Write.

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.

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.

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.

Be sure to enter the Product ID of the hidden product created in WooCommerce.
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.

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.

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

Leave the URL field blank, as this setup is intended to add the product directly to the WooCommerce cart.
Name the Add to Cart button and click 'Save'.

Go to the Share tab to copy the source link (src) for embedding into your WordPress website.

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_configuratorURL: 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
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.

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.

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

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.

Last updated
Was this helpful?