WooCommerce Designer Pro

Create your online printing!!

• Created: June 26, 2018
• Latest update: February 21, 2021
• By: JMA Plugins
• Email: info@jmaplugins.com

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:

1. The page where the designs will be personalized,
2. The page where the saved designs of the user will be displayed.

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:

• 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.

See more information on CMYK and RGB colors:

• RGB color model
• CMYK color model

• 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.

• 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.

• 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

• 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.

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.

• Envato Username: Add your envato username
• Token Key: Go to https://build.envato.com/create-token

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.

• 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

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