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!!

Introduction

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.

Requeriments

WordPress minimum version 4.7
WooCommerce minimum version 3.0

PHP ImageMagick Extension only if the workspace is used in CMYK.

Installation

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

General settings

We started by creating two pages:

  1. The page where the designs will be personalized,
  2. 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

We see an example in the image below:

We see an example in the image below:

Note: Shortcodes must be inserted in the same selected pages.

We see an example in the image below:

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:

Important!! The use of commands will have a higher overhead and the processes tend to be slower depending on your server.
Note: If updating the table gives an error, try a lower value.

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.

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

Let's see an example image:

 

Note: Be careful with the option to restore all the default settings as it will erase all your saved settings.

Shortcut keys

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.

Style

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:

Icons color:

Buttons color:

Buttons color box messages:

Buttons color folders:

Tabs color:

Tooltip section:

Scroll bar section:

Border colors:

Color picker section:

Colors default in editor:

Corners section:

Customize the color picker:

Customize the background color section:

Then click on Save Changes to save the configuration.

License

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.

  1. Choose a token name, for example: My token
  2. Enable the option: Download the user's purchased items.
  3. Enable the option: I have read, understood and agree to the Terms and Conditions.
  4. Click on create token.

Then click on Save Changes to save the configuration.

Fonts

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

Shapes

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.

Cliparts

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

Calendars

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

 

Image filters

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.

Parameters

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:

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.

Categories

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.

Designs

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.

Tabs section features

Templates:

Text:

Images, Cliparts, Calendars:

Shapes:

QR Code:

Map:

Background colors:

Manage layers:

Product options:

My Designs:

Execute code:

Toolbar features

  1. Keyboard shortcuts: Displays a list of all keyboard shortcuts and their functions. You can define the keys in the Shortcut keys section.
  2. Select all: Select all canvas objects.
  3. Erase all: Erase all objects from the canvas.
  4. Grid: Show or hide the grid, very useful to align the layers by adjusting them in the guides.
  5. Center horizontally: Center objects horizontally.
  6. Center vertically: Center objects vertically.
  7. Flip horizontally: Flip objects horizontally.
  8. Flip vertically: Flip objects vertically.
  9. Rotate: Rotate objects.
  10. Bring to front: Bring object to front.
  11. Send to back: Bring object to back.
  12. Lock: Lock and unlock object.
  13. Group: Group and ungroup objects.
  14. Duplicate: Duplicate objects.
  15. Delete: Delete objects.
  16. Undo: Undo changes.
  17. Redo: Redo changes.
  18. Preview: See design preview.

Custom Product

In the administration panel of your WordPress, click on Products > Add New

  1. Enter the name of the new product.
  2. Click to enable or disable custom product.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.

Attribute actions

Options:

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:

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

Step 2:

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

Step 3:

  1. Select Layout type: Product colors.
  2. 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:

  1. Enable action for Product color.
  2. Set the value empty so that the first color is transparent.

Step 5:

  1. We change the option of the attribute value for the second color. Select Attribute value: Red.
  2. Enable action for Product color.
  3. Set the color value manually to hexadecimal: #ff0000.
  4. 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:

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

Step 2:

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

Step 3:

  1. Select Layout type: Radio checkbox.
  2. 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.
  3. 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:

  1. Enable action for Product image: Front.
  2. 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:

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

Step 2:

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

Step 3:

  1. 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.
  2. Enable action for Show product sides.
  3. Select option: Only side front.

Step 4:

  1. We change the option of the attribute value for the second side. Select Attribute value: Front and back.
  2. Enable action for Show product sides.
  3. Select option: Side front and back.
  4. Click on save actions.

Example: Attributes to change canvas size:

Step 1:

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

Step 2:

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

Step 3:

  1. 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.
  2. Enable actions for Canvas width and Canvas height.
  3. Set the size values: Canvas width 680 and Canvas height 450 or the sizes you need.

Step 4:

  1. We change the option of the attribute value for the second size. Select Attribute value: Vertical.
  2. Enable actions for Canvas width and Canvas height.
  3. Set the size values: Canvas width 450 and Canvas height 680 or the sizes you need.
  4. Click on save actions.

Install demos

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.

Note: The installation will automatically add: The parameter, design, custom product and the attribute actions in each demo.

Contact us

If you have any questions, doubts, or suggestions, you can contact us. Help us improve.

Website: JMA Plugins

Support: Envato

Email: info@jmaplugins.com

WooCommerce Designer Pro © All Rights Reserved JMAPlugins