1. Install the Expivi WordPress plugin for WooCommerce
Go to the WordPress plugins directory and search for “Expivi” and install the plugin like all other plugins. Don’t forget to activate it.
2. Create the access token
Go to the backend 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 popup box will appear. Give it a descriptive name for the API key and set the permissions on “Read” and click on “Create”.
You’ll see a new popup window with the access token. Copy the access token in a text file. Warning: the access token will only be shown once and cannot be retrieved again. You’ll have to create a new access token if you need one.
3. Make the API connection
Go back to the backend of your WordPress WooCommerce website 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/wp-content/plugins/expivi/upload.php
- 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 could be located before or after the “Add to cart” button
Hit “Save Changes” and you’ve created the API connection
4. Connecting the products
Now you’ve setup an API connection, it’s time to add the 3D product configurator to the WooCommerce product pages.
In the WordPress WooCommerce backend find the product (Products > All Products). On the “Edit product” page, go to the “Expivi product” setting that can be found under the product description area.
In the “Expivi product ID” drop down selector, find the corresponding product, click on Load viewer and you’ll see the product in the preview area. Click on “Save configuration” and click on “Update” to save the product modifications.
You now have replaced the standard WooCommerce image viewer and options selector with the Expivi 3D configurator. Repeat this process for all other products.