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.

Add to Basket

There are 6 essential steps to properly integrate your configurator with WooCommerce using the Add to Basket mode.

Step 1 - Begin by installing the Simplio3D WooCommerce plugin on your WordPress website.

Step 2 - Create a product in your WooCommerce store.

Step 3 - Use the Simplio3D application to establish the integration with your WooCommerce website.

Step 4 - Embed the Simplio3D configurator into your WooCommerce website.

Step 5 - Customize the cart page in your WooCommerce website.

Step 6 - Add the CSS code in the theme’s Additional CSS section.

Let’s review each step in detail.

Step 1

Begin by installing the Simplio3D WooCommerce plugin on your WordPress website.

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 product in your WooCommerce store.

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.

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

Use the Simplio3D application to establish the integration with your WooCommerce website.

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: http://mydomain.com

• Consumer key: Add WooCommerce Consumer key.

• Consumer secret: Add WooCommerce Consumer secret.

Both Consumer key and Consumer key 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.

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.

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.

Step 4

Embed the Simplio3D configurator into your WooCommerce website.

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.

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 5

Customize the cart page in your WooCommerce website.

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 6

Add the CSS code in the theme’s Additional CSS section.

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