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

The Settings for the Product Designer can be found in Product Designer > Settings

General

↑ Back to top

General Settings

If you want to allow your users to design the products before purchase, enable the Enable Product Customization option.
If you want to prevent product customization on mobile devices, you can do so by enabling the Disable Product Customization on Mobile Devices option.
In the Product Designer Page option, select the page in which you want to load the product designer. While activating the plugin for the first time, a new page namely “Product Designer” will be automatically created and set as designer page.
If you wish to convert the data to BLOB, you can do so by enabling the Convert Data URL to BLOB option. Converting data to BLOG can improve performance.

User Restrictions

By default, product designer is accessible for all users. If you wish to restrict the Product Designing to specific users/user roles, you can do so by customizing the “Allow Product Customization for” option.
If you wish to force Guest Users to login to the site before customizing the product, you can do so by enabling the “Restrict Product Customization for Guests” option.
Once order with product customization is placed, the Download Design URL can be accessible for users with Administrator and Shop Manager user roles(in addition to the customer who place the order). If you want to customize this, then select the user roles to allow access in User Roles Allowed to Access Download Design URL option.

Designer Page

↑ Back to top

General Settings

In the Product Designer Page Logo option, you can upload a logo for the product designer page.
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.
In the Shop URL option, the site’s Shop page will be set by default. You can change the URL as per your preference.

Theme Settings

You can customize the appearance of the Product Designer Page as per your preference in the “Select Theme” option
Note: As of now, only “Default” theme is supported for mobile devices.

Display Settings

In designer page, product details which want to show can be customized in “Product Details” option. You can either show Description or Short Description or Hide it completely.
If you wish to hide the price tag of objects when the it is 0, then you can do so by enabling the “Hide Price Tag if Price is 0” option.
If you wish to Hide the Add to Cart button on the designer page, you can do so by enabling the “Hide Add to Cart Button” option.
If you wish to redirect your users to the product page after designing the product, enable the “Show Redirect with Changes to Product Page Button” option.

Watermark Settings

If you wish to add watermark on Print Designs before purchase, you can do so by enabling the “Enable Watermark” option.
You can customize the following:

Watermark text
Watermark Font Size
Watermark Font Color

Sitewide Settings

↑ Back to top

Single Product Page Settings

If you want to show Customize button in single product page, then enable “Show Customize Button” option.
If you want to hide Add to Cart button in single product page for customizable products, then select “Hide” in “Add to Cart Button” option so that customers can buy the product only after customization.
Select the position to show Customize button in “Customize Button Position” option.

Shop and Category Page Settings

If you want to show Customize button in shop and category pages, then enable “Show Customize Button” option.
If you want to hide Add to Cart button in shop and category pages for customizable products, then select “Hide” in “Add to Cart Button” option so that customers can buy the product only after customization.
Select the position to show Customize button in “Customize Button Position” option.

Cart Page Settings

By default, product customization details will be shown in cart page. If you want to hide the details, then select “Hide” in “Product Customization Details” option.
You can resize the product thumbnail width and height using the Thumbnail Width and Thumbnail Height options.

My Account Page Settings

By default, product customization details will be shown in My Account Page > Orders section. If you want to hide the details, then select “Hide” in “Product Customization Details” option.

Modules

↑ Back to top

Product Designer for WooCommerce comes bundled with 6 Modules. These Modules can be used for designing/customizing the product. You can enable/disable modules as per your needs.

Templates

Templates have to be created by site admin. You can create templates with one or more objects(cliparts, images, text, shapes).

To create a template, follow the below steps:

Go to product designer page in the frontend
Choose the Product Base for which the template has to be created and choose a product.
Add the objects as per your needs to design the template
After adding the objects for the template, go to “File > Export as a Template” so that a .txt file will be downloaded.
Now, go to backend “Product Designer > Design Templates > Add New”
Give the title for the template.
To charge a price for using the template, set the template price in “Price” field.
In “Upload Template” option, click the “Upload File” button and select the downloaded .txt file.
Finally Publish the template.

Note:

When customers use the templates, they will be able to edit each object in the template.
You can also upload jpeg/png files for template.

Cliparts

Enable this module if you want customers to add cliparts to their designs.

To create cliparts, follow the below steps:

Go to “Product Designer > Cliparts > Add New”.
Give the title for the clipart.
To charge a price for using the clipart, set the clipart price in “Price” field.
In “Feature image” section, click the “Set featured image” link and select the clipart image.
Finally Publish the clipart.

Images

Enable this module to give customers the option to upload their own images to their designs.

Settings

Image Settings

To force guest users to login to the site in order to upload images to their designs, select “Yes” in “Force Users to Login to Upload Images” option.
File formats supported for image upload are png, jpeg, jpg, gif, pdf. If you want to allow only specific formats from these 5 formats, then add the formats in “Image Formats Users can Upload” option.
To restrict image upload size, you can do so using Image Minimum Size and Image Maximum Size options.
To restrict image upload dimension, you can do so using Minimum Dimension and Maximum Dimension options.

Fee Settings

In “Charge Image Upload Fee” option, select “Multiply Price Based on Image Count” option if you want to charge per image fee. Select “Fixed Price for Whole Product” option if you want to charge a fixed price for any number of images added to their design.
In “Fee for Image Upload” option, set the fee as per your requirement. Leave the field empty or set 0 if you don’t want to charge image upload fee.

Note: You can override Global level image upload settings in each product base(Product Designer > Product Base > Edit a product base > Image Upload Settings)

Text

Enable this module to give customers the option to add text customization to their designs.

Settings

Text Settings

In “Charge Fee for Text Customization” option, select “Fixed Fee” if you want to charge a fixed fee irrespective of number of characters and set the Fee. Select “Fee for n Number of Characters” if you want to charge a fee for specific number of characters and multiply it based on number of characters. If you don’t want to charge fee for text customization, then select “No Fee”.
To give a default text for text customization, enter the default content in “Default Text Field Value” option.
By default, all available font families will be available for text customization. In “Usable Font Families” option. If you want to show only specific font families, then select “Selected Font Families” and choose the font families which you want to display in “Select Font Families” option.

Note: You can override Global level font family settings in each product base(Product Designer > Product Base > Edit a product base > Font Family Settings)

Google Fonts Settings

If you want to show Google Fonts for text customization, then enter your API Key in “Google Font API Key” option.

Custom Fonts Settings

If you want to show other custom fonts for text customization, then follow the below steps,

1. 1. Go to “Media > Add New”
  2. Click “Select Files” button
  3. Select the custom font files and click “Copy URL to Clipboard” button.
  4. Now, come back to Product Designer Settings and in “Custom Fonts File Path” option, paste the copied file path.

Shapes

Enable this module to give customers the option to add shapes to their designs.

To add shapes follow the below steps:

1. 1. Go to “Product Designer > Shapes > Add New”
  2. In the Text Editor area, input the SVG content of the shape.
  3. Set the price if you want to charge fee for using the shape
  4. Publish the shape

Product Selection

Enable this module if you want to give customer option to change the product from the product designer page for customization.

Messages

↑ Back to top

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

Localization

↑ Back to top

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 want to support product customization.
In the Description field, fill in the description for the Product Base.
If you are going to upload transparent base images, then set the “Base Image Segmentation” option as “Foreground/Overlay”. If the base images are non-transparent, set it as “Background”.
You can add multiple views to the Product Base. To create a new View click the “Add View” button. In the Title Field, fill in the Title. Click “Select Image” button and add the base image for the respective view. You will be able to define the customization area. Customers can add objects only in the defined area. Note: Customization area will work only for transparent base images and when “Base Image Segmentation” option is set as “Foreground/Overlay”.
For each view you can choose the pricing mode. i.e. you can set Object Based Pricing/View Based Pricing. If Object Based Pricing is selected, customers will be charged for each object they add to their design. If View Based Pricing is set, object price which you have given will be overridden and fixed fee will be charged for customizing the view.

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

↑ Back to top

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

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.

FAQ

↑ Back to top

Q: Designing is not working on mobile devices. Why? As of now, designing on mobile devices is supported only on the “Default” theme. If you have selected any different themes in “Product Designer > Settings > General > Product Designer Page Theme Settings”, then designing won’t work.