---
title: "Installing the WooCommerce Plugin"
canonical: https://customerscanvas.com/docs/cc6/installing-woocommerce-plugin.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Installing the WooCommerce Plugin

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
To enable the Aurigma Personalization Plugin on your WooCommerce site, you need to install the plugin and associate WooCommerce products with your Customer's Canvas instance. This topic describes how you can perform this.
 
## Installing the Plugin
  
The current Customer's Canvas distribution does not include the Personalization plugin. Please contact our [support team↗](https://customerscanvas.com/account/cases/add) for the actual version of this plugin.
 
**Note** 
To run the plugin, you need a deployed Customer's Canvas instance - either the [cloud or on-premises](https://customerscanvas.com/docs/cc6/customers-canvas-hosted.htm.md) version will work. You can find step-by-step instructions on how to deploy the on-premises version on your server in the [corresponding topic](https://customerscanvas.com/docs/cc6/deploying-application-to-windows-server.htm.md).
 
1. In the WooCommerce control panel, click **Plugins**.
2. Install and activate the **Aurigma Personalization Plugin**. 
    ![Installing the WooCommerce plugin.](https://customerscanvas.com/docs/cc6/images/WooCommerceInstall.png)
3. Click **Settings** > **Personalization Plugin** > **Editors**. 
    ![Uploading the WooCommerce plugin.](https://customerscanvas.com/docs/cc6/images/WooCommerceUpload.png)
4. Click **Upload Editor** and upload the `UI-Framework_x.x.x.zip` file.
5. Click the uploaded editor in the list.
6. Click **Upload Config** and upload the JSON file.
7. Click the **Settings** tab. 
    ![Setting up the WooCommerce plugin.](https://customerscanvas.com/docs/cc6/images/WooCommerceApiKey.png)
8. Copy and paste the URL of your Customer's Canvas instance.
9. Copy and paste your Customer's Canvas API Key.
10. Click the **Save** button.

For details about editor configs, you can refer to the [UI Framework Tutorials↗](https://customerscanvas.com/support/ui-framework).
 
## Getting the API Key
  
To get your **API Key** and Customer's Canvas **URL**, log on to your [cloud control panel↗](https://h2.customerscanvas.com/) and click the **AppSettings.config** tab.
 
In `AppSettings.config`, your **API Key** is the value of the **ApiSecurityKey** parameter.
 
![Getting the API key and URL.](https://customerscanvas.com/docs/cc6/images/WooCommerceCloudCC.png)
 
If the following line is commented, uncomment it:
 
```
<add key="ApiSecurityKey" value="CustomerSecurityKey" />
```
 
Then, you need to replace the value **CustomerSecurityKey** with your unique key (for example, you can generate a Globally Unique Identifier (GUID)).
 
To get the URL of your Customer's Canvas instance, replace `<yourId>` with the **ID** of your instance in the following link:

```
https://h2.customerscanvas.com/Users/<yourId>/SimplePolygraphy
```
 
## Associating Products with Customer's Canvas
  
1. In the WooCommerce control panel, click **Products** and then click **Personalize**. 
    ![Enabling the product personalization.](https://customerscanvas.com/docs/cc6/images/WooCommerceAssociate.png)
2. Select an editor and config.
3. Select configuration attributes (templates and mockups).
4. Click the **Apply** button.

Most of the plugin configs require you to choose a design and mockup file. The Personalization plugin searches for these files on your Customer's Canvas instance. Just place them in the `\ProductTemplates\designs\` and `\ProductTemplates\mockups\` folders respectively, and these files will appear in the drop-down lists.
 
To verify that Customer's Canvas is integrated with your WooCommerce store, you can navigate to a product view and click the **Personalize** button to open the editor.
 
If you want to remove the connection between your WooCommerce product and the editor, click **Unlink**.
 
## Downloading High-Resolution Outputs
  
To download the resulting PDF files for an order, click **WooCommerce** &gt; **Orders**. Then, open the order details and click **Download design**.
 
![Downloading hi-res PDF outputs.](https://customerscanvas.com/docs/cc6/images/WooCommerceHiRes.png)
 
## See Also
  
### Manual
 
- [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc6/integration-with-e-commerce.htm.md)
- [Integration with NopCommerce](https://customerscanvas.com/docs/cc6/integration-with-nopcommerce.htm.md)
- [UI Framework](https://customerscanvas.com/docs/cc6/product-editors.htm.md)