Product Designer for WooCommerce

Product Designer for WooCommerce allows your users to design the products as per their preference and purchase them in your Shop.

Installation

↑ Back to top

1. Download the product-designer-for-woocommerce.zip file from your WooCommerce account.

2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.

3. Install Now and Activate the extension.

More information at: Install and Activate Plugins/Extensions.

Setup and Configuration

↑ Back to top

Settings

↑ Back to top

General

If you want to allow your users to design the products before purchase, enable the Enable Product Customization option.
In the Product Designer Page option, please select the page in which you want to load the product designer.
In the Product Designer Page Logo option, you can upload a logo for the product designer page.
In the Product Designer Page Title option, you can customize the Product Designer Page Title.
In the Shop URL option, the site’s Shop page will be set by default. You can change the URL as per your preference.
You can add a favicon to the Product Designer page in the Product Designer Page Favicon option.
You can customize the footer content of the Designer Page in the Footer Content for Designer Page option.
If you want to prevent product customization on mobile devices, you can do so by enabling the Hide Product Customization on Mobile.

User Restrictions

By default, the products can be designed/customized by all users. If you want to restrict product design/customization to specific users/user roles, you can do so by customizing the Product can be Customized by option.
If you want to force your guest users to log in to your site before customizing the product, then you can do so by enabling the Force Guest users to Login Before Customization option.

Display Settings

You can customize the label for the customize product button in the Customize Button Caption option.
If you want to display the customize button single product pages, enable the Display Customize Button on Single Product Pages option.
By default, the Customize button will be displayed next to the Add to Cart Button. If you want to display the Customize button in a different location, you can do so by customizing the Single Product Page Customize Button Position.
If you want to display the customize button on Shop and Category Pages, you can do so by enabling the Display Customize Button on Shop and Category Pages.
By default, the Customize button will be displayed next to the Add to Cart Button on the Shop and Category Pages. If you want to display the Customize button in a different location, you can do so by customizing the Shop and Category Position.
If you want to display a preview of the customized product in the cart, you can do so by enabling the Product Customization Info in Cart Page option.
If you want to display a preview of the purchased product in the My Account Page, you can do so by setting the value to Show in Product Customization Info in My Account Page option.
In the Cart Page Thumbnail Width and Height option, you can customize the Width and Height of the Customized Product Preview.
You can customize the look and feel of the Customize button by adding an additional CSS class. The CSS Class can be added in the Customize Button Additional Class option.

Image Settings

If you want to force your users to log in to the site before uploading an image, you can do so by setting the value to Yes in the Force Users to Login Before they can Upload Images to Designer option.
By default, there will be no restriction on the image types which has to be uploaded. If you want to restrict the image types which has to be uploaded, you can do so by entering the allowed file formats in the following format, jpeg, png,jpg
By default, there is no restriction on the size of the image uploaded. If you want to place a restriction, on the size of the image uploaded, you can do so by entering the Min and Max Dimensions in the Min Dimensions and Max Dimensions options.
By default, the user will not be charged a fee when they use an image for designing the product. If you want to charge a fee, you can do so by setting the fee in the Fee for Image Upload option.

Text Settings

If you want to charge a fee for adding text, you can do so by setting the value to Yes in the Charge a Fee option.
In the Number of Characters field, enter the minimum character count for which the user will be charged a fee.
In the Fee field, enter the Fee Amount.

How Text Fee Calculation works?

Consider the Following Example,

Number of Characters: 1

Fee: $0.10

Based on the above-mentioned configuration, the user will be charged $0.10 for each character they add to the design.

Modules

Product Designer for WooCommerce comes bundled with 5 Modules. These Modules can be used for designing/customizing the product.

Cliparts

Cliparts are ready to use designs/images which can be used for designing/customizing the product.

Images

In this module, customers can upload their own images and use them to design/customize the product. The site admin can optionally charge a fee for using their own images in the design.

Text

In this module, customers can add text to their design. The following text attributes can be customized,
– Font Size
– Font Family
– Font Color
The site admin can also charge a fee when a customer adds text to their design.

Shapes

Shapes are ready to use .SVG files which can be used for designing/customizing the product.

Templates

In this module, customers can use the ready to use designs for customizing the product instead of designing it themselves. They can be charged a fee for using the design.

Messages

In this section, you can customize the notices and error messages displayed on the product l page, cart page.

Localization

In this section, you can customize the labels displayed on the product designer page, cart page, checkout page and My Account Page.

Product Base

↑ Back to top

Product Bases are the starting point in the Product Designer plugin. Product Bases are needed for designing the product.

To create a new product base go to Product Designer > Product Base > Add New
Fill in the title for the Product Base.
In the Assign Product option, search and select the product which should support product customization.
In the Description field, fill in the description for the Product Base.
You can add multiple views to the Product Base. To create a new View click the “Add New” button. In the Title Field, fill in the Title. You can upload a view of the product by using the Upload button. Once the image is uploaded, you can define the area in which the product can be customized.

Note:

By default, 16 Product Bases are bundled with the plugin. Each Product base has the images needed. You only have to define the editable area and assign a WooCommerce Product to complete the configuration.
If you wish to add your own product base images, then the product base images should be in the following format,
1. The Editable section should be transparent
2. The Background should be filled with #FFFFFF color.

Attributes

You can also add product attributes, such as Product Color, Size, Gift Wrap Message, etc through the Attributes section.
For Text Field and Textarea Attributes, the Label Field is mandatory. Price is optional.
For Single Select(Dropdown) Attribute, the labels, value and the price has to be entered in the following format,
Label1 | Value for Label 1 | Price for Label 1
Example
Small | Small | 1

Design Templates

↑ Back to top

Templates will have to be created by the Site Admin. To create a Template, the site admin will have to do the following,

In the Product Designer, select the product for which they want to design the template. For Example, If the template has to be created for a T-Shirt, then T-Shirt has to be selected.
Once the product is selected, the admin can start designing the Template by adding components to the T-Shirt in the designer.
Once the design/customization is completed, the template has to be Saved. The template can be saved from File > Export as a Template.
The exported file will be of .json file format. Once exported, within the templates section, the site admin has to create a new template.
Within the template settings, the exported .json template has to be uploaded and the template has to be saved.

Cliparts

↑ Back to top

Cliparts will have to be created by the Site Admin. To create a Clipart, the site admin will have to do the following,

To create a new product base go to Product Designer > Cliparts > Add New.
Fill in the Title for the Clipart.
In the Featured Image section, upload/select clipart.
In the Price field, input a price if you want to charge a fee from your user for choosing the clipart for their design.

Shapes

↑ Back to top

Shapes will have to be created by the Site Admin. To create a Shape, the site admin will have to do the following,

To create a new product base go to Product Designer > Shapes > Add New
Fill in the Title for the Clipart
In the Textarea paste the SVG code
In the Price field, input a price if you want to charge a fee from your user for choosing the shape for their design

Note:

If you don’t want to charge a fee, then in the place of price, set the value as 0.

Orders

↑ Back to top

In this section, all the customized product orders will be listed in a table. Within this section, you can download the designs for processing the order.

Usage

↑ Back to top

Product Customization and Purchase

↑ Back to top

Once the configuration has been completed, the product(s) will be ready for customization.
If the user wants to customize their product, they will have to click the Customize Button.
Once the button has been clicked, the user will be redirected to the Designer.
The designer consists mainly of two sections,
– Modules/Components/Tools for Designing
– Design Area/Canvas
Within the Design Area/Canvas, the base product will be displayed.
The customers can customize the base product as per their needs using the Modules/Components/Tools for Designing.
Once the customers have designed the product as per their needs, they can add the customized product to their cart and complete their purchase.
Alternately, customers can also, save their designs and purchasing them on a later day or for making changes to the design before purchasing.
Once the purchase has been completed, the customers can view/download the design for their customized product order from their My Account Page.

Admin Processing the Customized Product Order

↑ Back to top

When a customer places an order for a customized product, the Admin can process that order by downloading the design files.
The design files can be downloaded from Product Designer > Order. Within this section, an entry will be listed for each order placed.
To download the design, the admin will have to click the Download Design link. Once the link is clicked, the user will be redirected to the designer which has the product customized by the customer.
The design file can be downloaded in the following formats,
– PNG
– PDF

Product Designer for WooCommerce is translation ready, meaning you can edit the po files by which you can translate the text to any language. Steps to perform the translation are as follows. For example, a translation to French.

Download and install Poedit
Open the file product-designer-for-woocommerce > languages > product-designer-for-woocommerce.pot using Poedit.
Create a new translation file by clicking Create new translation button.
Choose the Source text and set its corresponding French text in Translation Text Area.
Save the changes.
Save the file name as product-designer-for-woocommerce-fr_FR.po.
If you are using WordPress Version 3.9.13 or below, then in wp-config.php define the WPLANG as French. Syntax is define(‘WPLANG’, ‘fr_FR’);
If you are using WordPress Version 4.0 or above, then go to WordPress dashboard > Settings > General and select the Site Language as French.

Questions and Feedback

↑ Back to top

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with us via the Help Desk.