Prerequisites

Before we start on the WooCommerce Integration, it is important to have an Expivi account. You can register an account on: https://www.expivi.com/ or contact our sales team.

A product in Expivi is required to follow the integration steps. Stuck on creating an Expivi product? Check out our knowledge base and YouTube channel!

Overview

Installing and integrating Expivi on your Store can be done in 4 simple steps:

1. Install Expivi WordPress plugin on your website
2. Creating an Access Token on Expivi to allow linkage of your Expivi account with your website
3. Making the API connection on your store and linking with your account on Expivi system
4. Connecting your WooCommerce product with your product on the Expivi system

How to integrate Expivi WordPress plugin

1. Installing the Expivi WordPress plugin for WooCommerce

Go to your WordPress admin page (https://WWW.YOURDOMAIN.COM/wp-admin) and navigate to Plugins > Add new now search for “Expivi” and install the plugin. Don’t forget to activate it.

2. Creating the Access Token

Login to the Backoffice of Expivi (https://admin.expivi.net/) and go to Team > API Keys. Create a new API key by clicking the “Create” button in the top right corner. A small pop-up box will appear. Give the API key a descriptive name and set the Role to “Viewer Token”, leave the host on “*”. Now click on “Create“.

You’ll see a new popup window with the Access Token. Copy the access token and save it for your future reference. Warning: For your product’s security, the access token will only be shown once and cannot be retrieved again. Thus, you will have to create a new access token if you need one.

Note:

• The Viewer token is meant for viewing of the products in third-party integrations. For usage with plugins, embedding on-site, etc, the Viewer token should be used.
• The Host field can take either a value of ‘*’ or a specific domain name through which Expivi’s API will be allowed to be called for the created API Key.

3. Making the API connection

Go back to your WordPress admin page and go to Settings > Expivi settings. You’ll see five fields:

• API URL: enter https://www.expivi.net/api/ in this field.
• API Token: enter the complete access token you’ve just created in this field.
• Upload URL: if you’re going to use the image upload feature to allow product personalization, you need to enter the upload URL. If this has not been prefilled already, enter https://WWW.YOURDOMAIN.COM/upload.php NOTE: developer support is required when you want to make use of uploading images. This is not in the plugin by default.
• Price selector: in order to display the dynamic Expivi price, we need to locate the original WooCommerce price to replace it. The standard selector for the WooCommerce price is p.price (<p class="price">). If your WordPress theme uses a different selector, enter the correct selector here.
• Append options to hook: the Expivi options can be placed before or after the “Add to cart” button. This can be changed later.

Hit “Save Changes” and you’ve created the API connection.

4. Connecting the products

Now that you’ve setup an API connection, it’s time to add the 3D product configurator to the WooCommerce product pages.

On the WordPress backend, go to Products > All Products. Create or click on an existing product that you want to integrate with Expivi. Now go to the Expivi product tab inside the product settings.

The “Expivi product ID” drop-down selector is a list of all your Expivi products. Find and select the corresponding Expivi product.

You will now see the product in the preview area. Now, click on “Update” in the top right corner of the product settings page to save the product.

Optionally: Checkbox options, you may notice in the Expivi product tab that there are a couple of checkboxes where some of them are already active. The options will help you configure the way how the viewer should be displayed on your website. You could show/hide the 3D hover icon, auto rotate the product, show/hide the initial progress bar, or hide the options panel and just show the viewer (most-likely used with pre-defined configuration).

Optionally: pre-defined configuration, you can configure the product in the way you would like it to show for the first time on page load. After configuring, you need to click on “Save configuration” and then “Update” in the top right corner. All your customers will now see the product in the way you configured it.

You have now replaced the standard WooCommerce image viewer and options selector with the Expivi 3D configurator. Repeat this process for all other products.

Optionally: drag-and-drop, if you want to have a product that can add other products in the same scene, you can define the products that can be added to the scene in the “Placeable products” field. This field only accepts WooCommerce products that have a Expivi product linked to it. To add a product just search for the WooCommerce product name.

NOTE: when using this feature you will first need to create a drop-area that can be 
configured at Product > Showcase in the backend of expivi

After configuring drag-and-drop, the Options selector view changes on the website to show three additional menu-tabs:

Add Product: Shows a list of products. To add a product to the scene, the customer simply needs to drag the product to the scene.

Configure Product: Allows the customer to configure the selected product.

Overview: Shows a list of all the products in the scene. Here you can delete a product from the scene or click on one, which brings you to the configuration of that product.

Done! Expivi is now integrated with your WordPress WooCommerce shop.

Adding a product to the cart

We’ve enhanced the process of how users will view their products in the cart by making the experience more personal. The plugin will take a screenshot of your product once the user clicks on the ‘Add to cart’ button. The screenshot will be shown in the cart next to the products configuration. The configuration will also be a nice reflection of what the customer has configured.

Viewing your orders

Of course, we didn’t forget about our webshop administrators. The orders will contain an overview of the configured product(s), showcased with a screenshot of the product. The ‘Options’ area will show the chosen options while the ‘Articles’ will show the corresponding SKU’s.

Additional features

1. Using custom fonts

NOTE: custom fonts are only supported from Expivi version 1.6.1 and onwards.

When using the text_to_image attribute to show text in the product configuration, you may wish to have customers choose from custom fonts.

To be able to use these fonts in your WooCommerce shop, you will have to make some changes in the WordPress settings. As seen in the image above we added two custom fonts in addition to the standard Arial font. To load these fonts in the WooCommerce shop, some CSS has to be added to the Additional CSS page in WordPress.

Here is how:

Go to https://fonts.google.com/ and add the desired fonts by clicking +. Now open Families selected in the bottom right. There will be a <link href=”etc… copy the part between the href=”(copy this part)” and open this in a new tab.

Copy the entire page and paste it in https://WWW.YOURDOMAIN.COM/wp-admin/customize.php > Additional CSS. Now publish it.

Done! The custom font will now work within your shop.

Now within an order, you will be able to see the selected font and text. Unless the customer did not change anything.

2. Image upload

You can allow customers to upload an image (for example a custom print on a shirt). To enable this you have to use the image_upload attribute in the CMS configuration.

In order to make the upload functionality work inside WordPress WooCommerce (we assume your product already has the upload attribute working correctly):

1. Download the upload.php file here: https://download.expivi.com/woocommerce-upload.zip
2. Unzip the zip file and upload it to the server where your WordPress WooCommerce site is installed, e.g. https://www.yourwebsite.com/woocommerce/upload.php
3. Go to the settings menu of the Expivi WooCommerce plugin and enter the file path in the Upload URL field
   
4. Click on the Save Changes button

After this is implemented, customers can add a custom image.

Now within an order, you will be able to see the URL of the image that the customer uploaded.

Done!

3. Localization

NOTE: localization is only supported from Expivi version 1.6.1 and onwards.

Localization works out of the box for the Expivi plugin (after it has been configured in https://admin.expivi.net/). However, the website language should be configured in the WordPress Settings, as intended, so that the language gets transmitted to Expivi system.

FAQ

In step 4, I don’t see anything in the drop-down selector

If the products are not showing up in the list, one of the fields is not correct or a product is not correctly configured. Check if there are any spaces in front or at the end of the API key or API url. Also, check you product in Expivi if the product slug doesn’t include spaces. If you still have troubles configuring the product, please contact Expivi and we’ll try to respond as quickly as possible.

After completing step 4, the product does not show in my shop page

If the product page does not show the 3D object it could be because the Shop page is not set in the WooCommerce settings. To fix this go to WooCommerce > Settings > Products and set the correct shop page. Now click on “Save changes”.

How can I use presets in Woocommerce?

Presets configured in the Expivi platform can not be used in Woocommerce as of yet. However, each WooCommerce product has an option to configure the product inside the product page. This configuration is (for now) a replacement for the presets.