Author ORION

Project WooCommerce Product Designer

Title User Manual

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 CONTENTS
OVERVIEW 4
PRESENTATION OF THE PLUGIN 4
PLUGIN SPECIFICATION 4
OVERVIEW OF SOFTWARE REQUIREMENTS 4
TERMINOLOGIES 4
INSTALLATION PROCESS 4

REGISTERING YOUR LICENCE 6

CONFIGURATION 6
THE DESIGN PAGE 6
GENERAL SETTINGS 6
FONTS 7
CLIPARTS 7
CREATE A SET OF CLIPART 7

CUSTOMIZABLE PRODUCT 8
CONFIGURATIONS 8
CREATE A CUSTOMIZABLE PRODUCT (SIMPLE PRODUCTS) 12
CUSTOMIZE A PRODUCT 13
DISPLAY CUSTOMIZABLE PRODUCTS 13
ACCESS THE USER ORDERED DESIGNS 13

TEMPLATES 14
CREATE A TEMPLE CATEGORY 14
TO CREATE NEW CATEGORIES, YOU NEED TO ACCESS THE TEMPLATES> CATEGORIES PAGE FIRST. 14
CREATE A TEMPLATE 14
DISPLAY TEMPLATES 15

ADVANCED SETTINGS 15
GENERAL 15
UPLOADS 16
SOCIAL NETWORK 16
FACEBOOK 16
O FACEBOOK APP ID: THESE SETTINGS ARE MANDATORY SO THE USER CAN CONNECT TO FACEBOOK. 16
O FACEBOOK APP SECRETS: THESE SETTINGS ARE MANDATORY SO THE USER CAN CONNECT TO FACEBOOK 16
OUTPUTS 17
COLORS 17
TEXT CONTROLS 18
SHAPES CONTROLS 18
IMAGES/ CLIPARTS CONTROL 19
DESIGNS 19
USER INTERFACE 19
LICENCE 19

FREQUENTLY ASKED QUESTIONS 20

WHY DO I HAVE MALFUNCTIONING OR NOT FUNCTIONING BUTTONS ON WEBSITE? 20
WHAT DOES THIS ERROR MESSAGE...”FATAL ERROR: ALLOWED MEMORY SIZE OF…..” MEAN? 20
WHAT DOES THIS ERROR MESSAGE…“ERROR: EMPTY PRODUCT PARTS LIST. AT LEAST ONE PART IS REQUIRED TO CREATE A CUSTOMIZABLE
PRODUCT.0” MEAN? 20
HOW CAN I CHANGE THE LANGUAGE? 20
WHERE CAN I FIND MY PURCHASE CODE? 20
WHY DOES MY PREVIEW NOT DISPLAY AND THE SCREEN FREEZES? 21

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 WHY DOES THE DESIGNER NOT LOAD THE SOME IMAGES? 21

CONTACT US 21

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 1.Overview

1.1.Presentation of the plugin

The WooCommerce Products Designer (WPD) is a really simple but complete HTML5 editor which
can be used to personalize logos, t-shirts, business cards, prints and any product which needs to be
customized by the client before the order​.

1.2.Plugin specification
The WooCommerce product designer is a WordPress plugin. It is specially designed to work as
an Add-on to the wordpress plugin WooCommerce.

1.3.Overview of Software Requirements

● WordPress (minimum version: 4.0)
● WooCommerce (minimum version: 2.5)
● A web server with the following PHP (not WordPress) extensions installed:
○ Imagick
○ GD
○ Php ZIP

1.4.Terminologies

Term or abbreviation Definition

WPD WooCommerce Product Designer

1.5.Installation process
The zip file downloaded from CodeCanyon contains:
● The WooCommerce Product Designer user manual (​User_manual.pdf​)
● The WooCommerce Product Designer installable plugin zip file
(​WooCommerce-product-designer.zip​)
● The ​WPD_DEMO.wpress​ file you can import in your installation using the plugin ​All In One
WP Migration​ in order to get a clone of our official demo. This is an easy way to learn how we
build our demo installation.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
Note​: Make sure you import the wpress file in an empty installation because it crushes everything
installed and settles the configuration of the wpress file.
And once the file is installed, you will need the following credentials to connect to the backend.
username => orion
password => orion123Go

To install the plugin:

● First, extract the content of the archive in a folder of your choice and let's start the installation.
● Go to your WordPress Admin Panel and click on ​Plugins>Add New​ to access the plugins
installation screen:

● Then click on the “​upload plugin” ​button to access the plugin upload page:

● Click on the ​Choose file ​button and select the plugin zip archive named
WooCommerce-product-designer.zip​ in the folder extracted in the first step.

● Click on the ​Install Now ​button to run the installation.

● Click on the ​Activate Plugin ​link to activate the plugin.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 2.Registering your licence
Click on the menu ​WPD > Settings​ to access the designer settings.
The licence menu tab allows you to setup the automatic updates notification feature. After configuring
the settings below, you will receive a notification any time a new release is available.
● Envato Username: ​Your Envato username.
● Secret API Key:​ ​You can find the API key by visiting your Envato Account page, then click on
the My Settings tab. At the bottom of the page, you will find your account API key.
● Purchase Code :​Your purchase code which can be retrieved by following the instructions
here​..

3.Configuration
Before you start using the WooCommerce Product Designer plugin, you need to setup some
options first.

3.1.The design page

Let's start by creating the page where products will be customized. Click on menu ​Pages > Add New
Enter your page title and then click on ​publish​. This page is very important and compulsory. Instead
of creating a page, you can choose an existing one and set it as designer page. Make sure you don’t
choose any of the default.

3.2.General settings

Click on the menu ​WPD > Settings​ to access the designer settings.
● Design Page​: This is the page where the product editor is located. Select the page you've
created in the first step of the basic configuration.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 Note: ​This page is compulsory. It is where all designs are created. Without this page,
the designer tool can not be displayed.

● Templates Page​: This is the page where the products templates will be displayed. This setting
can be overwritten per product​.
Note: ​Use the shortcode ​[wpd-templates] where you want the templates to show up
in the templates page.

3.3.Fonts

The fonts interface allows you to define which fonts you would like your clients to use when they're
adding text to their designs. If you don't define any font, the system default fonts will be used.
To manage the fonts, go to ​WPD > Fonts t​ o access the fonts list.

There are 3 ways to add a font:

● Google fonts: To add a Google font, just enter the font family name and the style sheet URL as
provided by Google Fonts and then click the Add Font button; or you browse the ​available
google font​ ​in the plugin and pick the desired one out of the list. You can also use this
method for any font provider service which provides a URL for the fonts style sheets.
● Custom web fonts​: ​To add a custom web font, just enter your font family name and then click
the​ ​Add Font ​button. This means that the font has been loaded externally by your theme or an
external plugin. Also, to install custom fonts, you can use this plugin
https://wordpress.org/plugins/use-any-font/ and then enter the font family name in the plugin
without setting the URL.
● Through a TTF file​: ​you import the TTF file of the font by clicking on “add font file” then you
write it’s name in the name field and you click on add font.
NOTICE​: ​If you’re planning to generate output SVG files, you need to setup the TTF version of each
font in order to embed them in the PDF outputs if needed.

Please note that there is no limit to the number fonts you can define.

3.4.Cliparts

The cliparts feature allows you to create one or many predefined sets of pictures/vectors organized in
groups so your clients could be able to use them in their designs.

● Create a set of clipart

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 Just go to ​WPD> Cliparts​.
● Click on the New clipart group
● Then enter the group name
● Click on the Add clipart button to access the default WordPress media selector
popup.
● Select the desired pictures/vectors and then click on the Set Image button at
the bottom right of the popup.
● Enter the unit price for each picture if you want to charger your clients for each
picture used in their design
● Click on the publish button to save the group.
Note​: There is no limit to the number of clipart per group or the number of group you can
define.

4.Customizable Product
To create a customizable product, you will first have to create the configurations as shown below.

4.1.Configurations
A configuration is a set of parameters that can be assigned to one or more products which
regulates how they work. Assigning them to a product turns the product into a customizable
product.
● First of all on your dashboard click on ​WPD > Configurations​, to access the list of existing
configurations.
● Next click on ​New Configuration​ to have access to the page on which you can create
configurations.
● The ​Design from blank ​section can allow you to display or not the button on the product
page.
● The canvas section allows you to apply a custom canvas size to your product. The canvas
can be smaller than the expected output files in order to fit inside the website pages but need
to be a scaled version of the expected output.
● The bounding box section allows you set the bounding boxes parameters if needed. This
parameter can be used to define the editable area INSIDE the canvas.
o​ X
​ : Box coordinate X on the product

o​ Y
​ : Box coordinate Y on the product

​ idth: Box width (mandatory for rectangles). ​Must be inferior to the canvas
o​ W
width.
​ eight: Box height (mandatory for rectangles). ​Must be inferior to the canvas
o​ H
height.
o​ R
​ adius: Box radius (mandatory for circular boxes)

o​ T
​ ype: Box type (Rectangle or Circle)

o​ B
​ order color: Box border color. Leave it empty for transparent borders.

● The parts section allows you to define the products parts.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 Click on the Add parts button to add your parts.
● Name​: Name of your part
● Icon​: Allows you to define an icon for the parts
● Bg. (not inc.)​:​ allows you to define a background image for the parts. This image
won’t be included in the final design.
● Bg. (inc.)​:​ allows you to define a background image for the parts. This image will
be included in the final design.
● Overlay image:​ allows you to define an overlay image for the parts. This image
can be selected to either be included or not in the final design.

Below is an example of the result expected:

View from Dashboard

Front of the shirt

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 Back of the shirt

● The Pricing rules section enables the admin user to charge an extra for the customization
depending on the rules defined.
A pricing rule has 5 components:
o​ ​The​ rule parameter​: allows you to set which condition should be checked. The
parameters currently included in the tool are:
● Number of characters in text (​NB Chars in text​): this has to do with the
number of alphabets or numeric figures in a text.
● Number of lines in text (​NB Lines in text​): this has to do with the lines
of a text.
● Number of images (​NB Images​): this rule is involved with the amount of
images.
● Number of vectors (​NB Vectors​): this rule involves the number of
vectors.
o​ ​The ​rule operator​: allows you to define the kind of comparison to perform
against the rule value. The operators included in the tool are:
● Is less than.
● ​Is less or equals to.
● Equals.
● ​More than.
● ​More or equal to.

o​ T
​ he​ rule value​ to check against.

o​ ​The Price​: this allows you to define the price or extra price to add to the product
base price if the rule is verified.
o​ T
​ he scope​: allows you to set the rule scope. 2 scopes are currently supported:

● ​Per
item: the extra will be added for each design element which
matches the rule defined.
● On Whole design: the extra will be added only once even if more than
one element matches the rule defined.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 Please also note that the administrator has the ability to combine simple rules to create
a complex one.
Click on the ​Add rule group​ to set a whole new group pricing rules.

● Select the ​templates page​ if you want your users to assign multiple templates to a custom
product with this configuration.
● The output settings sections allows you to configure the output files you need the product
designer to generate once the customer has completed his design. To learn more about output
management click ​here​.
● Output width (px)​: This setting allows you to configure the output files
dimensions. So if you want to generate high definition files, just enter the file
width in pixels. The height is determined automatically using the defined width.
If the output width is empty, the output will have the canvas dimensions.
● Output loop delay (milliseconds)​: Time to go through each part when trying
to generate the output files especially if during the generation process, you get
the message "The edition area is empty. You can increase this setting when the
output contains HD files or when the output is HD.

○ The ​Output Format​ option allows you to choose:

● PNG​: With this format you define the​ output width(px)​, the ​output loop delay
(milliseconds)​, and whether or not to ​zip the output file.
● JPG​: With this format you define the​ output width(px)​, the ​output loop delay
(milliseconds)​, the ​CMYK Conversio​n is an option used by the printer to
slightly change the colour of the output, and whether or not to ​zip the output
file​.
● SVG​: With this format you define the​ output width(px)​, the ​output loop delay
(milliseconds)​, and whether or not to ​zip the output file​.
● Combining ​PDF​ with any of the formats mentioned above requires a different
set of options to choose from, which are as follows :
- Define the ​output loop delay (milliseconds)
- If you choose the ​predefined format​, all you have to do is to
select a format from the list of dimensions available.
- When you select the​ custom format,​ you have to define the
output format, dimensions (width,weight, and unit)
- Next, define the vertical and horizontal ​margins​ of the PDF
- Define where you want to place the ​crop marks​ on the PDF, by
representing them by the vertical and horizontal lines called
‘Center Abscissa’ and ‘Center Coordinate’, then define the width
and height and finally the areas by the symbols provided.
- The ​bleed,trim & safe zone​ option helps you define the space
between the top & down,left & right borders of the document,
also the width and the color of the borders.
- The ​PDF Resolution​ option helps in defining the quality of your
PDF.
- The ​PDF Orientation​ gives you the choice between a portrait
our landscape format for your PDF output.
- Finally you can zip or not your output file and the publish it.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 Note​: The canvas dimensions can be set globally in the plugin general settings (so they will be
active on every product) or they can be set per product on the product creation/edition page.
By default, the generated output file will have the canvas dimensions. But this behavior can be
overwritten by setting the Output min width in the output settings. That way, the output will
have the width defined and the height will be determined proportionally to the canvas height.

When previewing, adding to cart or generating/downloading output, the plugin needs time to
determine the optimal parameters based on the elements used by the customer (text, images,
shapes...). Unfortunately, that time can't be defined automatically. So you have to make sure
that the Output loop delay parameter is set accordingly and that its value equals at least the
output width plus 300. If during the generation, you get the error message "The edition area is
empty", make sure you increase the defined value by 500 until the issue is fixed.

One more thing: to be able to send the generated data to the server, you have to make sure
your server does not have limitations related to the amount of data which can be sent through
a form.
● Zip output folder​: ​Allows you to get all the output files in a zip file.
● Zip output name​: Here you can name zip output.
● CMYK conversion (Requires ImageMagick)​ : The CMYK color model (process color,
four color) is a subtractive color model, used in color printing, and is also used to
describe the printing process itself. Allows you to set whether or not you need the
output to be CMYK valid.
● Click on the ​Publish ​button to save your configuration.

4.2.Create a customizable product (Simple products)

Once you’ve created a configuration as described in the previous section:
● Click on ​Products > Add Products ​to access the product creation screen
● Enter your product name
● Enter your product price
● Select the product type (only simple and variable products are supported at this time).
● Now select the corresponding configuration previously created.
● Write a short description of the product
● Finally click on “‘Publish” button to save your product

NOTICE​: ALL THE ABOVE SETTING OPTIONS ARE AVAILABLE IN THE TAB OF EACH
VARIATION OF THE VARIABLE PRODUCTS.
On the variable product edition page there is a “related product/quantities” box which allows you to set
up attributes to be used for the related products box and attributes to be used for the related
quantities box.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 4.3.Customize a product

Once a product has been set as customizable, there are 2 ways for customers to customize it:
● From the shop page (simple products only): a ​Design from blank ​button will appear under
the ​Add to cart button​. ​A click on it will lead the user the editor page with the product data
already loaded.
● From the product page: a​ ​ ​Design from blank ​button will appear under the ​Add to cart
button​. ​A click on it will lead the user to the editor page with the product data already loaded.
If the product is variable, make sure you select the options before clicking the ​Design from
blank ​button​.
Note​:​ This does not only work for WooCommerce valid themes but also works for themes which do
not have any reference to WooCommerce. If the theme the customer is using is a WooCommerce
compatible theme or a custom theme, and all hooks are properly triggered, then all buttons will
appear.

4.4.Display customizable products

You can display the customizable products by using the shortcode:

[wpc-products cat=”10” products=”1, 2” cols=3]
With:
● 10: The ID of the category to display
● 1, 2: The ID of the products you want to display
● 3: The number of columns to display
Note​: None of these parameters is mandatory. You can use one or all of them. Just remember that
the data to display will match all used parameters.

4.5.Access the user ordered designs

Once a client orders a custom design, WooCommerce saves the order and the custom design in the
back. To access a custom design:
● Click on ​WooCommerce > Orders ​to access the orders management page.
● Click on the custom order you want to access the order details page
● Click on the ​Download custom design ​button to download the user’s custom designs.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 5.Templates
The templates system included in the plugin allows you to create preexisting designs your
users can customize.

5.1.Create a temple category

Templates categories are a very convenient way to organize your templates. You can
have parent and child categories making hierarchical arrangement of your templates
possible. In addition to that, one template can be into more than one category. This gives you
a lot of flexibility to show exactly the templates you want, exactly the way you want them in
widgets, menus or directly in your WordPress theme. This step is not mandatory.

To create new categories, you need to access the ​Templates> Categories ​page first.

● On the left side of the page you will see a tab that allows you to create categories.
● Fill in the category name.
● Fill in Its slug (will be used in the category URLs).
● Click on the ​Add New Category ​button.

5.2.Create a template
Before creating a template, make sure you've at least one customizable product. Each
template is linked to a customizable product i.e. saying the templates depend on the product.
To create a template:
● Click on ​WPD > Templates​. Then click on the ​New template ​button view your
customizable products list (simple products and variations of variable products).
● Choose the template's base product and then click on the ​Select ​button to access the
template creation screen.
A base product is a customizable product which your template extracts the settings (parts,
bounding boxes...) from.
● If you want to assign your template to a category, select the desired templates
categories.
● The Text tab option allows you to add formats and features to your inserted text.
● The Shapes tab option allows you to insert shapes.
● The IMAGES/CLIPARTS tab option allows you to upload images or use your clipart.
Note​: After inserting a shape and selecting the shape inserted, you will automatically be
taken into the IMAGES/CLIPARTS tab to add colors fills and features to the selected

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 shape. In other to resize the shape, you will have to select the shape tab option while
your inserted shape is selected.
● The Locking option gives the ability to lock the movement, resizing or deletion of any
inserted elements in the editor.
● Once the design is complete, click on the ​Publish ​button to save it.

5.2.1.Display templates
There are 3 ways to display your templates using shortcodes:
● To display all existing templates, ​[wpc-templates]
● To display all templates in a specific category:​[wpc-templates cat="my category
name"]
● To display all templates related to one or multiple products: ​[wpc-templates
products="1, 12, 123"]​ where 1, 12 and 123 are the IDs of your base products.

Note​: When you get the error message “You have to select a customizable product first”
when trying to browse the product templates, this means you used the same page as
customization page (WPD > Settings) and as product template page. That creates a conflict.
You need 2 separates pages. It is recommended you create another page that will be used to
display the templates of your product "Product Designer Badge". In that page you'll put a
shortcode [wpc-templates] to display the templates you need. Make sure you use a different
page for your templates and a different page for your custom page.

6.Advanced Settings
After the creation of your products, you may need to customize the designer in order to make it fit your
site graphical charter or just to make it more user friendly. Here are the features that will help you.

6.1.General
● Automatically append canvas to design page​: Allows you to define whether or not you
want to use a shortcode to display the editor in the designer page. This feature gives you the
ability to put the designer anywhere in the customization page.
Note: The shortcode is ​[wpd-editor]​. It is only necessary when the ​automatically append
canvas to design page​ option is set to ​NO​.
● Parts position in cart​: Allows you to define where you want to show the customized products
part thumbnail when the customer is viewing the WooCommerce cart page.
o ​Thumbnail column​: the data will be shown in the thumbnail column.
o ​Name column​: the data will be shown in the name column.
● ​Preview design​: Allows you to enable or disable the ​Preview​ ​button on the designer page.
● ​Save for later​: ​Allows you to enable or disable the ​Save for later ​button on the designer
page.
© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 ● Download design​: ​Allows you to enable or disable the ​Download ​button on the designer
page.
● Download from user account​: Allows you to enable or disable the download button on the
user account page.
● Send the design as an attachment​: Allows you to send or not the design by mail to the
customer after checkout.
● Add to cart​: Allows you to enable or disable the ​Add to cart ​button on the customization
page.
● Redirect after adding a custom design to the cart​: Allows you to define what to do after
adding a design to the cart on the customization page.
● Responsive behavior​: Allows you to define whether or not you want to enable the canvas
responsive behavior.
● Hide Add to cart button for custom products​: Allows you to define whether or not you want
to hide the add to cart button for custom products on the products page.
● Load bootstrap modal​: ​Allows you to enable or disable twitter’s bootstrap modal script. This
helps you manage the display of the popup windows. It is useful when the popups do not work
with the theme in use, but start working when you change your theme.

6.2.Uploads
● Active controls​: ​It allows you to show or hide the editing menu of the uploaded file.
● File upload script​: ​Allows you to define whether you want to use a normal file uploader or a
custom one with graphical enhancement.
o ​Custom with graphical enhancements​: ​A custom upload script with some
graphical enhancements to make it look nice (progress bar). Be aware that this script
can trigger some conflicts with wrongly developed themes.
o ​Normal​: ​The normal file uploads script with no graphical enhancements.
● Uploads minimum width​: ​Allows you to define the minimum upload dimensions for the
pictures uploaded by the client (useful to generate HD files).
● Uploads minimum height​: ​Allows you to define the minimum upload dimensions for the
pictures uploaded by the client (useful to generate HD files).
● Allowed uploads extensions​: ​Allows you to select which files extensions you want your
users to be able to use in the editor. If not defined, all listed extensions will be accepted.
● Custom designs allowed extensions​: ​Allows you to enter which files extensions you want
your users to be able to send while uploading their own designs. If not defined, all extensions
will be accepted. This parameter is only used when the user tries to upload his own design
(not to be used on the canvas but to be sent as it is to the admin for his order).

6.3.Social Network
This feature allows your clients to use pictures extracted from their favorite networks in their designs.

● Facebook

o ​Facebook App ID​: These settings are mandatory so the user can connect to Facebook.

o ​Facebook App Secrets​: These settings are mandatory so the user can connect to Facebook
● Extraction from Facebook

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 ○ Go to​ ​https://developers.facebook.com/apps​ and create a new application by
clicking "Create New App".
○ Fill out any required fields such as the application name and description.
○ Once you have registered, copy and paste the created application credentials
(App ID and Secret) in the corresponding fields in the plugin social networks
settings.
○ Make sure you use
http://yoursite.com/wp-content/plugins/woocommerce-product-designer//include
s/hybridauth/?hauth.done=Facebook as Valid OAuth Redirect URI in the
application settings
Note: Replace “yoursite.com” with your website root url.
To learn more about the Facebook app creation, please visit
https://developers.facebook.com/docs/games/appcenter/tutorial?locale=fr_FRe
Note: The required permission needed for Facebook picture extraction are...
Email, Public_Profile, User_Friends, User_Photos.
● Instagram
○ Instagram App ID​: These settings are mandatory so the user can connect to Instagram.
○ Instagram App Secret​: These settings are mandatory so the user can connect to Instagram.

● Extraction from Instagram

○ Go to​ ​instagram.com/developer/clients/manage/​ and create a new application (Register new
Client).
○ Fill out any required fields such as the application name and description.
○ Make sure you use
http://yoursite.com/wp-content/plugins/woocommerce-product-designer//includes/hybridauth/?ha
uth.done=Instagram as Valid OAuth Redirect URI in the application settings
Note: Replace “yoursite.com” with your website root url.

Once you have registered, copy and paste the created application credentials (client ID and Secret) in the
corresponding fields in the plugin social networks settings.
Note​: If these steps are not followed in setting up the connection to the specific social network, the icons will be
disabled.

6.4.Outputs

● CMYK profile (when CMYK mode is active)​: Allows you to set your own CMYK profile to
use during the output conversion. It is disabled if the imagemagick extension is not installed
and active.
● Design Composition​: Allows you to display or not design composition in the order.

6.5.Colors
● Line colors​: Allows you to change the color of the line under the menu tab of the
customization page.

● SVG colorization​: allows you to set the colorization settings for SVG files:

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 o Path by path: Each path color can be customized no matter if 2 paths have
the same colors.
o Color by color: Every color in the file will be represented once so the clients
can only edit the colors group by group/
o None: SVG colorization will be disabled.
● Colors palette​: allows[G1] you to define a set of colors you would like your users to use in
their designs.

6.6.Text controls
● Active Controls​: ​Allows you to whether or not activate the options or formats needed
● Underline​: ​Allows you to Enable/Disable the Underline settings in the text section.
● Bold​: ​Allows you to Enable/Disable the Bold settings in the text section.
● Italic​: ​Allows you to Enable/Disable the Italic settings in the text section.
● Text Color​: ​Allows you to Enable/Disable the Text color settings in the text section.
● Background Color​: ​Allows you to Enable/Disable the Background Color settings in the text
section.
● Outline​: ​Allows you to Enable/Disable the Outline settings in the text section.
● Curved​: ​Allows you to Enable/Disable the Curved settings in the text section.
● Font Family​: ​Allows you to Enable/Disable the Font Family settings in the text section.
● Font Size​: ​Allows you to Enable/Disable the Font Size settings in the text section.
● Outline Width​: ​Allows you to Enable/Disable the Outline Width settings in the text section.
● Opacity​: ​Allows you to Enable/Disable the Opacity settings in the text section.
● Alignment​: ​Allows you to Enable/Disable the Alignment settings in the text section.
● Strikethrough​: ​Allows you to Enable/Disable the Strikethrough settings in the text section.
● Overline​: ​Allows you to Enable/Disable the Overline settings in the text section.
● Minimum font size​: ​Allows you to set the value of the Minimum Font Size in the text section.
● Maximum font size​: ​Allows you to set the value of the Maximum Font Size in the text section.
● Default font size​: ​Allows you to set the value of the Default Font Size in the text section.

6.7.Shapes controls
● Active controls :​Allows you to whether or not activate the options or formats needed.
● Square: ​Allows you to Enable/Disable the Square settings in the Shapes section.
● Rounded square: ​Allows you to Enable/Disable the Rounded Square settings in the Shapes
section.
● Circle: ​Allows you to Enable/Disable the Circle settings in the Shapes section.
● Triangle: ​Allows you to Enable/Disable the Triangle settings in the Shapes section.
● Polygon: ​Allows you to Enable/Disable the Polygon settings in the Shapes section.
● Star: ​Allows you to Enable/Disable the Star settings in the Shapes section.
● Heart: ​Allows you to Enable/Disable the Heart settings in the Shapes section.
● Outline: ​Allows you to Enable/Disable the Outline settings in the Shapes section.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 ● Background Color: ​Allows you to Enable/Disable the Background Color settings in the
Shapes section.
● Outline Width: ​Allows you to Enable/Disable the Outline Width settings in the Shapes
section.
● Opacity: ​Allows you to Enable/Disable the Opacity settings in the Shapes section.

6.8.Images/ cliparts control

● Active controls ​:​ ​Allows you to whether or not activate the options or formats needed.
● Grayscale​: ​Allows you to Enable/Disable the Grayscale filter in the Cliparts/images section.
● Invert​: ​Allows you to Enable/Disable the Invert filter in the Cliparts/images section.
● Sepia1​:​ ​Allows you to Enable/Disable the Sepia1 filter in the Cliparts/images section.
● Sepia2​: ​Allows you to Enable/Disable the Sepia2 filter in the Cliparts/images section.
● Blur​: ​Allows you to Enable/Disable the Blur filter in the Cliparts/images section.
● Sharpen​: ​Allows you to Enable/Disable the Sharpen filter in the Cliparts/images section.
● Emboss​: ​Allows you to Enable/Disable the Emboss filter in the Cliparts/images section.
● Opacity​: ​Allows you to Enable/Disable the Opacity filter in the Cliparts/images section.
● Enable lazyload for cliparts galleries​: ​Allows you to Enable/Disable the Lazy load behaviour
in the Cliparts/images section.

6.9.Designs

● Active controls ​:​ ​Allows you to whether or not activate the options Saved Designs and Order
Designs
● Saved Designs​: ​Allows you to view designs saved for later purposes.
● Orders Designs​: ​This allow you to view the design that has been ordered.

6.10.User Interface
Here, you can personalize the designer tools preview.
● Skin​: ​Allows you to choose the desired layout for the designer tool.
● Toolbar Icons​: ​Allows you to set custom icons for the designer
● Toolbar Colors​: ​Allows you to set custom colors for the toolbar
● Features Icons​: ​Allows you to set custom icons for the features.
● Features Column Colors​: A ​ llows you to set custom colors on the feature display case.
● Separators Colors​: ​Allows you to set custom colors on the separators between two features.
● Buttons Colors​: ​Allows you to set the buttons colors.
● Default Text Colors​: ​Allows you to set the default text colors.
● Default Shape Colors​: A ​ llows you to set the default shapes c​olors.

6.11.Licence

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
The licence menu tab allows you to setup the automatic updates notification feature. After configuring
the settings below, you will receive a notification any time a new release is available.
● Envato Username: ​Your Envato username.
● Secret API Key:​ ​You can find the API key by visiting your Envato Account page, then click on
the My Settings tab. At the bottom of the page, you will find your account API key.
● Purchase Code :​Your purchase code which can be retrieved by following the instructions
here​.

7.Frequently asked questions

7.1.Why do I have Malfunctioning or not Functioning Buttons on website?

Sometimes, it might be the conflict of coding in a theme. You can change your theme to a default
theme or another theme to verify.
Sometimes, it might be the conflict of Plugins. You will have to deactivate each Plugins you have one
after the other to verify. For example…deactivate the first plugin, go to the page you are having the
issue, refresh and try again. If no solution, go back to your Plugins, activate the previously deactivated
plugin and deactivate the next one then go to verify again. Do this until you are sure it is or not a
plugin conflict.

7.2.What does this error message...”Fatal error: Allowed Memory size of…..” mean?
When you get the error message “Fatal error: Allowed memory size of...” Please note that it is a
server limitation. Send that message to your hosting company and they will increase your max
memory for scripts. That will fix the issue.

7.3.What does this error message…“Error: empty product parts list. At least one
part is required to create a customizable product.0” mean?
When you get the error message “Error: empty product parts list. At least one part is required to
create a customizable product.0” Please verify to make sure there is at least one part created in the
configuration assigned to the product on which this happens.

7.4.How can I change the Language?

The plugin uses wordpress's language. So if your WordPress is in German, the German translation
file will be the one used by the plugin.
Next thing you need to know is that you need to translate it yourself because we haven't found great
translators yet for all languages. You can use a plugin like wpml or codestyling
https://wordpress.org/plugins/codestyling-localization/​.

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
 7.5.Where can I find my Purchase code?
Please visit this
website…https://help.market.envato.com/hc/en-us/articles/202822600-Where-can-I-find-my-Purchase
-Code-

7.6.Why does my Preview not display and the screen freezes?

This issue is because there is a conflict between the plugin script and the script of the theme. Only
one of the scripts should be allowed to avoid this conflict. In order to avoid this conflict there is a
setting option “​LOAD BOOTSTRAP MODAL​” in the ​WPD >> Settings >> General Settings​ as
above to help.

7.7.Why does the designer not load the some images?

When the plugin jetpack is installed and its photon feature is active, the images are not loaded on the
designer. This is due to the fact that the images are to be uploaded from a secured server. So, if you
have the plugin “​jetpack by wordpress.com​"​ ​installed, please keep​ its photon feature​ deactivated.

8.Contact us

Feel free to contacts us, for tutorials, to clear your doubts, drop your suggestions and requests, or get
that bug that gives you hard time kicked out and also follow us.
Website:​ https://designersuiteforwp.com/
Facebook:​ ​https://www.facebook.com/OrionOrigin?ref=hl
Twitter:​ ​https://twitter.com/OrionOrigin
YouTube:​ ​https://www.youtube.com/channel/UCXZN3eZlLHwFgmkV8GMN78A
Google:​ ​https://plus.google.com/u/0/101733282683269338232/posts
Supports:​ ​https://orionorigin.freshdesk.com

© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization
© Orion - Reproduction in whole or in part of this document or its communication outside Orion is forbidden, unless written
authorization