HomeHelp Center

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.

As you proceed through the following steps, ensure that both the Wordpress Admin interface and the Simplio3D application remain open in your browser.

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

  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:

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

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/ .

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.

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.

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.

More detailed steps in getting the Consumer key and Consumer secret from WooCommerce are also explained in 'Redirect to Checkout' integration mode.

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_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

  • 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.

PreviousRedirect to CheckoutNextShopify

Last updated

Was this helpful?