Installation
↑ Back to top1. 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 topSettings
↑ Back to topGeneral
- 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.
- 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.
- If you wish to hide the Product Price when the price is set as 0, you can do so by enabling the “Hide Price Tag in Designer Page when Price is set as 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 in Designer Page” option.
- If you wish to redirect your users to the product page after designing the product, enable the “Display Redirect with Changes to Product Page Button in Designer Page” option.
- By default, product designer is accessible for all users. If you wish to restrict the Product Design to specific users/user roles, you can do so by customizing the “Product can be Customized by” option.
- If you wish to force Guest Users to login to the site before customizing the product, you can do so by enabling the “Force Guest Users to Login Before Customization” option.
- 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, Add to Cart Button will be displayed on the Product Page. If you wish to hide the Add to Cart button, you can do so by customizing the Add to Cart Button in Single Product Page 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.
- 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 in the Allowed Images Types option.
- 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 Size in the Min Size for Upload and Max Size for Upload options.
- By default, there is no restriction on the dimension of the image uploaded. If you want to place a restriction, on the dimension of the image uploaded, you can do so by entering the Min and Max Dimensions in the Min Dimension for Upload and Max Dimension for Upload 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.
- When a fee is set, the fee will be be multiplied for every image uploaded. If you wish to charge a single fee for image, you can do so by customizing the “Charge Image Upload Fee” option.
- 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.
Product Base
↑ Back to top- 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.
- 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.
- 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- 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- 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- 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
Orders
↑ Back to topUsage
↑ Back to topProduct 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
Translation
↑ Back to top- 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 topHave 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.