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
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 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.
- 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.
In the “Expivi product ID” drop-down selector, find the corresponding 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: 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.
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, the google provided 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.
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.
At the moment this requires some extra code. If you’re going to use the image upload feature to allow product personalization, let us know and we can help implement this.
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.
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.
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 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.
My Woocommerce product is still showing a picture instead of the Expivi viewer, after following the documentation.
It might be possible that you are using a theme where some woocommerce/wordpress hooks are not used. The Expivi plugin depends on several wordpress hooks to be able to run properly. If those hooks are not defined in the theme, than the plugin could work incorrectly. Please contact us for further support.