WooCommerce Designer Pro
Create your online printing!!
Thank you for purchasing our WooCommerce Designer Pro plugin. Customize your products and create your awesome online printing!!
WooCommerce Designer Pro is a plugin for WordPress used to design business cards, postcards, flyers, diptych, triptych, posters, t-shirts, stickers and everything you have in your imagination.
WordPress minimum version 4.7
WooCommerce minimum version 3.0
PHP ImageMagick Extension only if the workspace is used in CMYK.

In the administration panel of your WordPress, click on Plugins > Add new

Then we are click on Upload Plugin

Click on Choose file and select the file wc-designer-pro.zip

Click on Install Now to start the installation

When the installation finishes click on Activate Plugin
We started by creating two pages:
-
The page where the designs will be personalized,
-
The page where the saved designs of the user will be displayed.
Note: In the manual, we have created the pages with the titles "Designer" and "My designs", but you can put the title you want.
To this go administration panel of your WordPress, click Pages

Then we are click on Add New

Enter title for the new page

Click on Publish to save the configuration.
We repeat the process and create the second page.
After creating the pages as we see below:

Go to the administration panel of your WordPress, click on WC Designer Pro > Settings
-
Default page for editor: This option allows you to select the default page where the designs will be personalized. Select the "Designer" page that we created earlier.
-
Add shortcode manually for editor page: This option allows you to add the editor any part the page using the shortcode [wcdp_editor].
We see an example in the image below:

-
Default page for my designs: This option allows you to select the default page where the saved designs of the user will be displayed. Select "My designs" page that we created earlier.
-
Add shortcode manually for my designs page: This option allows you to add the my designs any part the page using the shortcode [wcdp_my_designs].
We see an example in the image below:

Note: Shortcodes must be inserted in the same selected pages.
-
Add buttom my designs for account page: This option allows you to add a button with the link to page of my designs, on page my user account. Requires to have selected the page of my designs for link.
We see an example in the image below:

-
Enable RTL mode: This option allows you to enable reading mode from right to left.
-
Enable CMYK editor (Requires ImageMagick): This option allows you to put the workspace in CMYK:
-
Convert all images to CMYK automatically.
-
The color picker will show colors in CMYK.
-
When you receive an order from a user, the design will also included for administrator in CMYK 300dpi. Requires option output CMYK enabled.
Note: If this option is disabled or ImageMagick extension is not installed, the workspace will be displayed in RGB.
See more information on CMYK and RGB colors:
-
Conversion ImageMagick by shell commands: This option is to change all conversions to CMYK by shell commands. There are servers that have ImageMagick extension installed but only convert the images by commands, if you have this problem enable the option.
Important!! The use of commands will have a higher overhead and the processes tend to be slower depending on your server.
-
Enable CMYK in color picker: This option allows you to display the color picker in CMYK. Requires the CMYK option enabled. If option is deactivated it will be show in RGB.
-
Update colors table in color picker: This option allows you to update the color table for the color picker in CMYK mode. The color picker works through a color table previously created with the profiles RGB: "sRGB-IEC61966-2.1" and CMYK: "ISOcoated_v2_eci", this makes the change of colors in objects much faster, if you change the default profiles, you can update the CMYK color table with the new profiles. Requires the CMYK option enabled.
-
Max colors chunck by conversion to CMYK: This option allows you to select the maximum number of colors per conversion at a time. The color conversion is used to update the color picker table and to convert the SVG images into CMYK. You can increase the value according to the speed and memory of your server.
Note: If updating the table gives an error, try a lower value.
-
Convert images uploads to CMYK automatically: This option allows you to convert the uploaded images from the editor and the cliparts and calendar sections in CMYK automatically. Requires the CMYK option enabled.
-
Select RGB profile: This option allows you to change the default RGB profile.
-
Select CMYK profile: This option allows you to change the default CMYK profile.
Let's see an example of how to upload a profile:

We click on Upload profile

Click on Select Files and select your icc profile

Click Use this file to add it in the settings
Note: You must ensure that the profiles are valid, because it can cause errors in image conversions.
-
Zip output name: This option allows you to change zip output name.
-
Output SVG: This option allows include SVG design in the output.
-
Add SVG to the user downloads: This option allows to include SVG design in users downloads. Requires the option Output SVG enabled.
-
Output PDF: This option allows include PDF design in the output. You can configure size and margins in parameters section.
-
Add PDF to the user downloads: This option allows to include PDF design in users downloads. Requires the option Output PDF enabled.
-
Output PDF with SVG: This option allows you to include the SVG design in the output PDF. Requires the PDF Output option enabled.
-
Output PNG: This option allows include PNG design in the output.
-
Add PNG to the user downloads: This option allows to include PNG design in users downloads. Requires the option Output PNG enabled.
-
Output CMYK: This option allows includes the CMYK 300dpi design in the output for the admin.
-
Output CMYK to the user: This option allows includes the CMYK 300dpi design in the output for the user. Requires the option Output CMYK enabled.
-
Output JSON: This option allows includes the JSON design in the output for the admin. Can be very useful, for example if you need to have 100% customizable design of the user after the purchase. You can edit it from editor in tab Execute code > Add Json.
-
Enable SVG image uploads to the user: This option allows you to enable / disable the user to upload SVG images in the editor. This option is disabled by default, for security reasons.
-
Static maps API: This option allows you to add an API key so that maps can be created in the editor from the Map tab. The API key is required, you can get from this link.
-
Pixabay API: This option allows you to add an API key for image search in Pixabay from the editor in the Images tab. The API key is required, you can get from this link.
-
Unsplash API: This option allows you to add an API key for image search in Unsplash from the editor in the Images tab. The API key is required, you can get from this link.
-
Pexels API: This option allows you to add an API key for image search in Pexels from the editor in the Images tab. The API key is required, you can get from this link.
-
Flaticon API: This option allows you to add an API key for image search in Flaticon from the editor in the Images tab. The API key is required, you can get from this link.
-
Add Flaticon icons in SVG: This option allows you to add the Flaticon resource icons to the canvas in SVG format.
-
Convert resources in CMYK: This option allows you to convert the images of Pixabay, Unsplash and Pexels in CMYK before adding it to the canvas. Requires option CMYK enabled.
-
Preload fonts unicode: This option allows you to select an alphabet to preload in fonts. This option is only necessary when working with Arabic or Latin extended fonts and they do not load in the editor.
-
Add loader image: This option allows you to change the image that reports when you are loading the editor or need to make queries.
Let's see an example of how to upload a loader image:

We click on Upload image

Click on Select Files and select your gif image loader

Click Use this file to add it in the settings
-
Loader image width: This option allows you to set the loader image width in pixels.
-
Loader image height: This option allows you to set the loader image height in pixels.
-
Hide add to cart button in the editor: This option allows you to hide the add button to the cart and the options tab of the product in the editor.
-
Hide add to cart button for customized products: This option allows you to hide the add button to the cart for customizable products on the product page.
-
Number of designs the user can save: This option allows you set number of designs the user can save in the editor. Default empty can save unlimited designs.
-
Download design from the editor: This option allows users to download the design from the editor in the My designs tab.
-
Download design from shopping cart: This option allows users to download the design from the shopping cart page.
-
Download design only to user logged: This option allows you to enable / disable the download of design from the editor and the shopping cart only to user logged.
-
Download design in the order: This option allows users to download the design in the order.
-
Add link to email for download the design after finishing the order: This option allows users to download design by adding a link in the confirmation email of their new order.
-
Add link to email for download the design after change in the order status to completed: This option allows users to download design by adding a link in the email when changing the status to completed.
-
Add confirmation box to review design: This option allows you to add a mandatory confirmation box so that the user has to review design before adding to the cart.
Let's see an example image:

-
Text for confirmation box: This option allows you to add the text of the confirmation you want.
-
Label for confirmation box: This option allows you to add the text of the label you want.
-
Restore all defaults settings: This option allows you to restore all the default settings.
Note: Be careful with the option to restore all the default settings as it will erase all your saved settings.
In the administration panel of your WordPress, click on WC Designer Pro > Settings > Shortcut Keys Tab

To define shortcut keys, we click on the key that we want to change and select the new one. You can combine keys with Shift, Alt, Ctrl.
You can also enable or disable the shortcuts that you want to be active in the editor.
Then click on Save Changes to save the configuration.
In the administration panel of your WordPress, click on WC Designer Pro > Settings > Style Tab
From this tab we can change all the colors of editor and customize palettes:
- Skin predesigned colors: This option allows you to select predesigned skin colors: Gray & Blue, Green & Coral, Blue & Orange, Violet & Dark blue, Black & Red.
Icons color:

- This section allows you to change colors of editor icons.
Buttons color:

- This section allows you to change colors of editor buttons.
Buttons color box messages:


- This section allows you to change colors the buttons box messages.
Buttons color folders:

- This section allows you to change the colors the editor folders of cliparts and calendars sections.
Tabs color:

- This section allows you to change colors of editor tabs and their contents.
Tooltip section:

- Tooltip color, tooltip offset x, tooltip offset y: These options allow you to change color and vertical or horizontal position the tooltip.
Scroll bar section:

- Background: These option allow you to change color background of the scrollbars.
Border colors:

- This section allows you to change colors of borders the editor and bleed area.
Color picker section:


- Color picker colors: This section allows you to change colors of the color picker.
- Show picker palette: This option allows you can enable or disable the palette of the color selector.
- Columns for colors picker palette: This option allows you to change the number of columns that will display the colors of the selector palette.
Colors default in editor:

- This section allows you to change the default colors when objects are added to canvas. For example if the user adds a new text it will be displayed in the color you choose.
- Automatic bleed area color: This option allows you to enable or disable the automatic color of the light bleed area on dark backgrounds.
- Auto snap: This option allows you to enable or disable auto snap mode.
- Auto snap tolerance: This option allows you set tolerance when lock the objects with auto snap mode.
- Auto snap color: This option allows you to change the color of the guides displayed with auto snap mode.
- Centered scaling: This option allows you to enable or disable centered scaling for objects using the central point as the origin of the transformation.
- Add centered objects: This option allows you to enable or disable add the objects centered on canvas.
Corners section:

- Corners size, corners style, corners border, corners color: These options allow you to change the size, style, border and colors the control corners of object.
- Corners outside box: This option allows you to enable or disable corners outside the object's controlling box.
- Hide middle corners: This option allows you to hide the middle scaling corners of object's controlling box.
- Show pop-up thumbnails: This option allows you to enable or disable pop-up for preview the thumbnails.
- Hide note boxes: This option allows hide the note boxes of the QR Code & Map tabs.
Customize the color picker:

- Allows you to customize a palette by adding or removing colors, so your users can use it in their designs.
Customize the background color section:

- Allows you to customize a palette by adding or removing colors, so that users can use it from background colors tab.
Then click on Save Changes to save the configuration.
In the administration panel of your WordPress, click on WC Designer Pro > Settings > License Tab
In this tab is to configure automatic updates. Once configured, you will receive a notification when there is a new version available.

- Choose a token name, for example: My token
- Enable the option: Download the user's purchased items.
- Enable the option: I have read, understood and agree to the Terms and Conditions.
- Click on create token.
- Purchase Code: Where is my Purchase Code? follow the instructions of Envato
Then click on Save Changes to save the configuration.
In the administration panel of your WordPress, click on WC Designer Pro > Fonts
Add google fonts:

We select a google font as we see in the image

We click on Add google font

Click on Update to save the configuration
Add custom fonts:

Click on Add custom font

Click on Select Files and select the fonts you want to upload
Note: The formats of the compatible custom fonts are "TTF, EOT, WOFF, WOFF2", it is recommended to use the WOFF or TTF, since they are the most compatible in web browsers.

Click on Use this file to add the fonts in the section

Click on Update to save the configuration
In the administration panel of your WordPress, click on WC Designer Pro > Shapes

Click on enable or disable the shapes you want to appear in the editor.
Then click on Update to save the configuration.
In the administration panel of your WordPress, click on WC Designer Pro > Cliparts

Then we are click on Add new clipart category

Enter title for the new category

Click on Add new clipart

Click on Select Files and select the cliparts you want to upload

Click on Use this file to add the cliparts in the section

Click on Publish to save the configuration

In the administration panel of your WordPress, click on WC Designer Pro > Calendars

Then we are click on Add new calendar category

Enter title for the new category

Click on Add new calendar

Click on Select Files and select the calendars you want to upload

Click on Use this file to add the calendars in the section

Click on Publish to save the configuration

In the administration panel of your WordPress, click on WC Designer Pro > Image filters

Click on enable or disable the filters you want to appear in the editor.
Then click on Update to save the configuration.
The parameter is a group of options that allow you to configure a type of design. To create a parameter go to the administration panel of your WordPress, click on WC Designer Pro > Parameters

Then we are click on Add New parameter

Enter title for the new parameter and we configure the options:
-
Select page for editor: This option allows you to select a page where the designs will be personalized. You can select the "Designer" page created from the General settings section or add a new one with another name.
-
Select type of design: This option allows you to select the type of design for the editor. Side front and back, only side front, diptych or triptych brochure.
-
Name front side: This option allows you to change the name of the front side.
-
Name back side: This option allows you to change the name of the back side.
-
Canvas width: This option allows you to set the editor width in pixels.
-
Canvas height: This option allows you to set the editor height in pixels.
-
Canvas output width: This option allows you to set the width of the output files in pixels. The height will be calculated automatically with the set width.
-
Canvas output bleed area: This option allows you to capture only the inside of the bleed area in the output files. Requires option Border bleed area enabled.
-
Add watermark: This option allows you to add a watermark in the designs for the user downloads.
-
Repeat watermark image: This option allows you to repeat the watermark throughout the design. If it is disabled, the image will be centered.
-
Preview design: This option allows you to enable or disable the design preview button in the options on the toolbar.
-
Preview design width: This option allows you to set the width of the designs generated in the preview in pixels. The height will be calculated automatically with the set width.
-
PDF output width: This option allows you to set the width of the PDF output in millimeters.
-
PDF output height: This option allows you to set the height of the PDF output in millimeters.
-
PDF margin top: This option allows you to set the margin of the PDF top in millimeters.
-
PDF scale output image: This option allows you to scale the output image by the scale factor provided.
-
PDF stretch output image: This option allows you to stretch the output image to the PDF size automatically.
-
Border bleed area: This option allows you to show or hide bleed area in the editor.
-
Auto hide bleed area: This option allows you to auto hide bleed area when there is no object selected in the editor.
-
Clipping objects to bleed area: This option allows you to clipping and hide the objects outside the bleed area. Requires option Border bleed area enabled.
-
Border width bleed area: This option allows you to set the bleed area width in pixels.
-
Margin bleed area horizontally: This option allows you to set the margin left and right of the bleed area in the editor.
-
Margin bleed area vertically: This option allows you to set the margin top and bottom of the bleed area in the editor.
-
Top bleed area: This option allows you to set top position of border bleed area.
-
Left bleed area: This option allows you to set left position of border bleed area.
-
Radius bleed area: This option allows you to set radius of the bleed area.
-
Editor corners rounded: This option allows you to round border the editor corners in pixels.
-
Editor border solid: This option allows you to add a border around the editor.
-
Editor box shadow: This option allows you to add a shadow around the editor.
-
Grid size: This option allows you to set the size of grid squares in pixels.
-
Default font size: This option allows you to change the default size of the font in pixels. For example, if the user adds a new text, it will be displayed with the size you choose.
-
Default image size: This option allows you to change the default size of the image in pixels. For example, if the user adds a new image, it will be displayed with the size you choose.
-
Default shape size: This option allows you to change the default size of the shape in pixels. For example, if the user adds a new shape, it will be displayed with the size you choose.
-
Default QR size: This option allows you to change the default size of the code QR in pixels. For example, if the user adds a new code QR, it will be displayed with the size you choose.
-
Group and ungroup SVG: This option allows you to enable or disable the option to group and ungroup SVG to user.
-
Mask layers: This option allows you to enable or disable the option to mask layers to user.
-
Add or extract background images: This option allows you to enable or disable the option to add or extract background images to user.
-
Hide background color in the output files: This option allows you to hide the background color of the design when generating the output files.
-
Hide background image in the output files: This option allows you to hide the background image of the design when generating the output files.
-
Hide overlay image in the output files: This option allows you to hide the overlay image of the design when generating the output files.
-
Shapes tab: This option allows you to enable or disable the editor shapes section.
-
Cliparts tab: This option allows you to enable or disable the editor cliparts section.
-
Add all cliparts categories: This option allows you to add all categories of cliparts to editor in the tab Cliparts, that we have previously created in the Cliparts section.
-
Add cliparts categories: This option allows you to add categories of cliparts to editor in the tab Cliparts. The categories are search for by the title that we have previously created in the Cliparts section.
-
QR tab: This option allows you to enable or disable the editor QR code section.
-
Calendars tab: This option allows you to enable or disable the editor calendars section.
-
Add all calendars categories: This option allows you to add all categories of calendars to editor in the tab Calendars, that we have previously created in the Calendars section.
-
Add calendars categories: This option allows you to add categories of calendars to editor in the tab Calendars. The categories are search for by the title that we have previously created in the Calendars section.
-
Background colors tab: This option allows you to enable or disable the editor background colors section.
-
Layers tab: This option allows you to enable or disable the editor manage layers section.
-
Static maps tab: This option allows you to enable or disable the editor map section.
-
Static maps width: This option allows you to set the map width in pixels.
-
Static maps height: This option allows you to set the map height in pixels.
Click on Publish to save the configuration.
Note: The parameter can be selected in all the designs that you want to have the same settings. For example, if we create a parameter with options for business cards, this parameter can be selected in all business card designs that we want to add.
In the administration panel of your WordPress, click on WC Designer Pro > Categories

Enter the name for the new category

Click on Add new category to save the configuration.
In the administration panel of your WordPress, click on WC Designer Pro > Designs

Then we are click on Add new design

Enter title for the new design

We select a category that we have created previously from the Categories section

We select a parameter that we have created previously from the Parameters section

Click on Publish to save the configuration.
You can see in this link a video of how to create a new design.
Templates:
-
In this tab you will see the multiple designs that you have selected in the product. See more information in the Custom Product section.
Text:
-
Change font, size, outline, color, opacity, alignment, bold format, italic style, and underline, line through, overline, decoration.
-
You can also put effects curved, reverse, arc, small to large, large to small, bulge texts.
Images, Cliparts, Calendars:
-
The images JPG, JPEG, PNG, GIF:
-
You can add a mask layer, with texts, cliparts or shapes.
-
They can be set as background or logo.
-
Change the angle of the background image.
-
The logo images can be cropped, add opacity and filters like grayscale, sepia, warm, cold, yellow, kodachrome, vintage, brownie, polaroid, technicolor, acid, sea, fantasy, purple, ghost, predator, night, invert, noise, pixelate, sharpen, blur, emboss, brightness, saturation and contrast.
-
The images SVG:
-
They can be grouped and ungrouped from the toolbar.
-
They can be set as background or logo.
-
Change the angle of the background image.
-
You can add opacity and edit the outline and colors from the section: Fill color SVG, Outline SVG and Outline color SVG.
-
The administrator:
-
You can set images or svg as overlay. This option can be very useful if you want to add a watermark on the canvas.
Shapes:
-
Change the color, the outline and opacity.
-
The shapes can be managed from the Shapes section.
QR Code:
-
Enter link to your url, change the background and foreground color, the size of the border.
-
Add correction level and version range.
Map:
-
Select type of map, road, satellite, terrain or hybrid.
-
Add zoom to the map, change the label, size and color to the icon.
Background colors:
-
Change the colors of the canvas background.
-
You can modify the colors of the palette from the Style section.
Manage layers:
-
In this tab you can manage the layers in a simpler way:
-
You can identify the layer quickly by the image or icon.
-
Set the name of the layer if you need it.
-
Sort the layer, bring to the front or send to back.
-
Lock, unlock or delete layer.
-
The administrator:
-
You can lock / unlock layers the user.
-
You can hide layers in the output files.
Product options:
-
Users can see the product options and prices and select the quantities before adding the product to the cart.
My Designs:
-
Allows all users to download the designs if the option: "Download design from the editor" is enabled in the General settings section.
-
Allows registered users to save their designs and manage them from the editor.
-
You can also manage them from the default page for my designs, created from the General settings section.
Execute code:
-
This tab is only for administrators.
-
You can execute code, get the JSON of one design and add it in another for example. These options are recommended to be used by advanced user.
-
Get the design image, this can be very useful to add it to the product.
In the administration panel of your WordPress, click on Products > Add New

- Enter the name of the new product.
- Click to enable or disable custom product.
- We click to find the name of a design that we have previously created from the Designs section and that we want to select as the main one.
- We click to find the names of the designs that we have previously created from the Designs section and that we want to select as templates.
- This option allows you to add designs to the templates section by categories that we have previously created from the Categories section. To assign the categories to the designs see the Designs section.
- This option will add only the front template objects to the active side of the editor without loading the Parameter, improving speed. Recommended to add simple templates as ideas.
- This option allows you to load only canvas sizes by Ajax. If you want to load the complete Parameter of the designs added in multiples, leave it disabled.
- We select Simple product or Variable product.
Note: Adding more designs in the multiple section is optional.
If you need information to complete the product data, you can read these help tutorials:
After completing everything as we see below:

Click on Publish to save the configuration.
Options:
-
Layout type: This option allows you to show the variations in the editor with the styles: Drop down, product colors, radio checkbox.
-
Set product image as: This option allows you to set the product image as background or overlay.
-
Attribute value: This option allows you to select the values of the attributes that you have added in the attributes tab.
-
Product color: This action allows you to change the color of the product with the variations.
-
Product image: Front: This action allows you to change front image of the product with the variations.
-
Product image: Back: This action allows you to change back image of the product with the variations.
-
Show product sides: This action allows you to show 1 side or 2 sides of the design with the variations.
-
Canvas width: This action allows you to set width of the canvas for editor in pixels.
-
Canvas height: This action allows you to set height of the canvas for editor in pixels.
-
Canvas output width: This action allows you to set width of the output files in pixels.
-
PDF output width: This action allows you to set width of PDF output files in millimeters.
-
PDF output height: This action allows you to set height of PDF output files in millimeters.
-
Margin bleed area horizontally: This action allows you to set the margin left and right of the bleed area in the editor in pixels.
-
Margin bleed area vertically: This action allows you to set the margin top and bottom of the bleed area in the editor in pixels.
-
Top bleed area: This action allows you to set top position of border bleed area in pixels.
-
Left bleed area: This action allows you to set left position of border bleed area in pixels.
-
Radius bleed area: This action allows you to set radius of the bleed area in pixels.
-
Editor corners rounded: This action allows you to round border the editor corners in pixels.
Setting:
In the administration panel of your WordPress, click on Products > Edit product
In the product data section select: Variable product and click to Attributes as we see below:

Example: Attributes to change product colors:
Step 1:

- Click Add a new attribute.
- Add the name for the attribute: Product color or the name you want.
- Add the names of the colors you want by "|" separating values.
- Enable the option: Used for variations.
- Click on save attributes.
Step 2:

- Click on WCDP - Actions.
- Click on Refresh attributes, to display the attributes.
- Click on Expand, to show the actions.
Step 3:

- Select Layout type: Product colors.
- In this option are the names of the colors that we added in step 1 "None, Red, Blue, Green". We will add the action to the first value. Select Attribute value: None.
Step 4:

- Enable action for Product color.
- Set the value empty so that the first color is transparent.
Step 5:

- We change the option of the attribute value for the second color. Select Attribute value: Red.
- Enable action for Product color.
- Set the color value manually to hexadecimal: #ff0000.
- This option allows you to open the color picker to make it easier to find the color you want.
Then we repeat this step for the other colors and save the actions as we see below:

Example: Attributes to change product image with the radio checkbox:
Step 1:

- Click Add a new attribute.
- Add the name for the attribute: Style or the name you want.
- Add the names of the images you want by "|" separating values.
- Enable the option: Used for variations.
- Click on save attributes.
Step 2:

- Click on WCDP - Actions.
- Click on Refresh attributes, to display the attributes.
- Click on Expand, to show the actions.
Step 3:

- Select Layout type: Radio checkbox.
- Select Set product image as: Overlay image. It is important if you use the images with PNG mask that this option is selected in overlay, otherwise you can leave it as a background.
- In this option are the names of the images that we added in step 1 "Round, Square". We will add the action to the first value. Select Attribute value: Round.
Step 4:

- Enable action for Product image: Front.
- Click on Set image to open the media library.
Step 5:
Upload your images and select the one you want to add.

Click Use this file to set the image.

We change the option of the attribute value for the second image. Select Attribute value: Square.
Then we repeat steps 4, 5. You can repeat the same steps if you need to change the image on back. Enable the option Product image: Back.
When the process is finished save the actions as we see below:

Example: Attributes to show product sides:
Step 1:

- Click Add a new attribute.
- Add the name for the attribute: Sides or the name you want.
- Add the names of the sides you want by "|" separating values.
- Enable the option: Used for variations.
- Click on save attributes.
Step 2:

- Click on WCDP - Actions.
- Click on Refresh attributes, to display the attributes.
- Click on Expand, to show the actions.
Step 3:

- In this option are the names of the sides that we added in step 1 "Front only, Front and back". We will add the action to the first value. Select Attribute value: Front only.
- Enable action for Show product sides.
- Select option: Only side front.
Step 4:

- We change the option of the attribute value for the second side. Select Attribute value: Front and back.
- Enable action for Show product sides.
- Select option: Side front and back.
- Click on save actions.
Example: Attributes to change canvas size:
Step 1:

- Click Add a new attribute.
- Add the name for the attribute: Sizes or the name you want.
- Add the names of the sizes you want by "|" separating values.
- Enable the option: Used for variations.
- Click on save attributes.
Step 2:

- Click on WCDP - Actions.
- Click on Refresh attributes, to display the attributes.
- Click on Expand, to show the actions.
Step 3:

- In this option are the names of the sizes that we added in step 1 "Horizontal, Vertical". We will add the action to the first value. Select Attribute value: Horizontal.
- Enable actions for Canvas width and Canvas height.
- Set the size values: Canvas width 680 and Canvas height 450 or the sizes you need.
Step 4:

- We change the option of the attribute value for the second size. Select Attribute value: Vertical.
- Enable actions for Canvas width and Canvas height.
- Set the size values: Canvas width 450 and Canvas height 680 or the sizes you need.
- Click on save actions.
In the administration panel of your WordPress, click on WC Designer Pro > Documentation > Demos Tab

After select demo you want to install, you have to select a page where you want to display the editor.
You can select the "Designer" page created from the General settings section or add a new one with another name. See below:

After click on install, the installation process will begin as we see below:

When the demo installation is complete, it will display the message: Installation successful.