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.

Steps to Configure the Plugin

↑ Back to top

1. Creating Product Base

↑ Back to top

A Product Base links one or more products to the design canvas and controls which customization options are available for them. A product cannot be customized unless it is linked to an active product base.

Go to Product Designer > Product Base and click Add New.

Product Selection & Base Details

• Assign Product – Search and select the product(s) to link with this base. Multiple products can be assigned to the same base, including variable products. Alternatively, a Product Base field is available directly on the individual product’s edit screen if you prefer to link a base from the product side.
• Description – An internal description of the base; this is not shown to customers.
• Base Image Segmentation – Choose Foreground/Overlay if the image you will upload is transparent, or Background if it is a solid, non-transparent image. Both segmentation types support setting a design area on the base image and using the Product Color attribute.

Views

A product base can have multiple views (for example, a front and back view for a t-shirt). In the View section:

• Click Add View to create a new view, then click Select Image to upload the base image for that view. Use the built-in cropping tool to define the design area on the image.
• Title – Name for the view.
• Pricing Mode – Choose Object Based Pricing to charge based on the individual objects (templates, cliparts, shapes, images, text) the customer adds to their design, or View Based Pricing to charge one fixed price for the view regardless of what is added to it.

Modules

All plugin modules are enabled by default and controlled globally in Product Designer > Settings > Modules. From this section of the product base, you can override the global module settings (including which object categories are available) so they only apply to this specific base.

Attributes

Supported attribute types are: Product Color, Text Field, Text Area, Single Select, Checkbox, and Radiobox. Any attribute can be marked Optional; otherwise it is required before the customer can proceed. The Product Color attribute updates the base image directly when the customer picks a color, and works with both Foreground/Overlay and Background segmentation.

To create an attribute, click Add New, give it a Name, choose its type, and set whether it is optional.

• Product Color – Click Add New Color, give it a Color Title, either enter a hex code or use the color picker, and optionally set an extra price for that color. Click Add color and repeat for additional colors; each color can later be edited individually.
• Text Field / Text Area – Set a default value in Enter a Label and an optional Price for using the field.
• Single Select / Checkbox / Radiobox – Enter the options using the format value|name|price, one per option, separated by commas — for example: size_small|S|1, size_medium|M|2, size_large|L|3.

Product Base Categories

Use the Add new category link to categorize the base. Manage all categories from Product Designer > Product Base Categories.

Font Family Settings

By default, text customization uses the font families configured globally in Product Designer > Settings > Modules > Text > Settings. To override this for the base, select Selected Font Families and choose which fonts should be available.

Image Upload Settings

By default, image uploads follow the global fee configuration in Product Designer > Settings > Modules > Images > Settings. To override this for the base, choose Override Global Settings and configure the fee behavior for this base only.

Product bases (along with Design Templates, Cliparts, and Shapes) support Duplicate and a Publish bulk action from their listing screens, and can be filtered using the additional search filters available on each listing table.

2. Managing Resources

↑ Back to top

The Resources menu is where you create and manage the design assets — Design Templates, Cliparts, Shapes, and Background Images — that customers can use to build their designs. Each resource type has its own submenu under Product Designer > Resources, with its own listing screen, categories, and (where noted) bulk export/import support.

Creating Design Templates

Design templates are pre-built designs made up of multiple objects (images, text, shapes, cliparts) that customers can apply to their product.

To create a template:

1. Open the frontend Product Designer page and select the product base and product you want to build the template for.

2. Add the objects you want the template to include, then open the File menu and choose Export as a Template to download a template file.

3. In the admin dashboard, go to Product Designer > Resources > Design Templates and click Add New.

4. Give the template a title, and set a Price if you want to charge for using it (leave empty for no charge).

5. In Upload Template, click Upload File and select the file you exported. Once uploaded, a preview of the template is shown.

6. Optionally add the template to a category via Add new category, or manage categories from Product Designer > Resources > Design Template Categories.

7. Click Publish.

Templates can also include images uploaded by the customer, and can be exported/imported to move between sites.

Creating Cliparts

Go to Product Designer > Resources > Cliparts and click Add New.

• Give the clipart a title and, optionally, a Price.
• Click Set featured image and select the clipart image; a preview will be shown once uploaded.
• Add the clipart to a category via Add new category, or manage categories from Product Designer > Resources > Clipart Categories.
• Click Publish.

Cliparts can be exported and imported in bulk from the Cliparts listing screen.

Creating Shapes

Go to Product Designer > Resources > Shapes and click Add New. The plugin ships with a set of default shapes already available, so this step is only needed for custom shapes.

• Give the shape a title.
• In the editor, enter the SVG code for the shape. Example for a rectangle:<svg width="300" height="130"><rect width="200" height="100" x="10" y="10" /></svg>
• Set an optional Price for the shape.
• Add the shape to a category via Add new category, or manage categories from Product Designer > Resources > Shapes Categories.
• Click Publish. The shape preview will be visible from the Shapes listing screen.

Shapes can be exported and imported in bulk from the Shapes listing screen.

Creating Background Images

Go to Product Designer > Resources > Background Images and click Add Background Image.

• Give the background a title and, optionally, a Price.
• Click Set featured image and select the image; a preview will be shown once uploaded.
• Add the background to a category via Add new category, or manage categories from Product Designer > Resources > Background Image Categories.
• Click Publish.

Background images can be exported and imported in bulk from this listing screen.

Setup and Configuration

↑ Back to top

Go to Product Designer > Settings to configure the plugin.

General

↑ Back to top

General Settings

• Enable Product Customization – Master switch; customization options and the Product Designer page only work while this is enabled.
• Disable Product Customization on Mobile Devices – Enable this if you don’t want to offer product customization to customers on mobile devices.
• Product Designer Page – The page customers are sent to for designing products. A default page is created automatically on activation; choose a different page here if needed.
• Convert Data URL to Blob – Improves performance by converting the canvas Data URL to a Blob before processing.
• Customize – A button that opens the WordPress Customizer (see Designer Page Appearance below) in a separate page, where the full visual layout and branding of the Product Designer page is configured.

User Restrictions

• Allow Product Customization for – Restrict customization to specific users or user roles. Excluded users won’t see the Customize Product button, and will get an error if they access the Product Designer page directly.
• Restrict Product Customization for Guests – When enabled, guests see the Customize Product button but are asked to log in when they click it or try to access the Product Designer page.
• User Roles Allowed to Access Download Design URL – Administrators, Shop Managers, and the customer who placed the order can access the “Download Design” link by default; add or remove roles here as needed.

Advanced Settings

• Customize Button Additional Class – Add a custom CSS class to the Customize Product button if needed for theme styling.
• Custom CSS – Add any custom CSS for the designer page here.

Designer Page Appearance

↑ Back to top

Clicking the Customize Designer Page button in General Settings opens the Product Designer page inside WordPress’s built-in Customizer (Personalization tool) as a separate, dedicated screen. This screen groups the visual configuration of the designer page into several panels:

Page Type

Designer Page Type – Choose Classic to use the plugin’s original single-panel designer layout, or New Builder to use the newer sectioned layout that splits the page into independently configurable header, canvas, and footer areas. Selecting New Builder reveals three additional panels in the Customizer: Top Bar, Canvas, and Bottom Bar (documented below). These three panels are hidden while Classic is selected.

Note:

The New builder will be default option for users installing the plugin for the first time. They cannot switch between Designer Page Type.

Branding

• Designer Page Logo – Upload the logo image displayed in the top corner of the Product Designer page.
• Designer Page Site Icon – Upload the favicon shown in the browser tab while the Product Designer page is open.

Header & Footer

• Show Header & Footer – Choose Use Theme Header/Footer to make the designer page inherit the header and footer from your active theme, or select None to use the plugin’s own minimal header/footer instead.
• Back to Shop URL – Enter the URL customers are sent to when they click Back to Shop on the designer page. If left empty, this defaults to the store’s shop page.
• Footer Content – Enter the text (for example, a copyright notice or store contact info) displayed at the bottom of the designer page.

Themes/Colors

Designer Page Theme – Sets the accent color used for buttons and highlighted elements on the designer page.

Product Info & Actions

• Product Description Display – Choose which product information is shown alongside the canvas: Show Description to show the product’s full description, Show Short Description to show the product’s short description, or Hide to hide product information from the designer page.
• You can optionally choose to customize the following,
  • Show/Hide Price Tag if Price is 0
  • Show/Hide Add to Cart Button
  • Show/Hide Redirect with Changes to Product Page Button
  • Show/Hide QR Code Tab

Watermark

• Enable Watermark – Turns the watermark on or off for designs downloaded or printed before an order is purchased.
• Watermark Text – The Text to be displayed as watermark.
• Watermark Font Size (px) – The Text size for the watermark in pixels.
• Watermark Font Color – The Text color for the watermark.

Top Bar (visible only when Designer Page Type is set to New Builder)

You can optionally choose to customize the following,

• Show/Hide File Menu
• Show/Hide Print Menu
• Show/Hide My Designs Menu
• Show/Hide Show Price
• Show/Hide Add to Cart
• Show/Hide Back to Shop

Canvas (visible only when Designer Page Type is set to New Builder)

You can optionally choose to customize the following,

• Show/Hide Undo and Redo
• Show/Hide Save Design
• Show/Hide Object Toolbar
• Show/Hide Zoom Controls
• Show/Hide Print Quality Indicator

Bottom Bar (visible only when Designer Page Type is set to New Builder)

You can optionally choose to customize the following,

• Show/Hide Bottom Bar
• Show/Hide Product Summary
• Show/Hide Product Options
• Show/Hide Quantity
• Show/Hide Add to Cart
• Show/Hide Total and Price Breakdown
• Show/Hide Preview Button

Changes made in each panel can be previewed live before clicking Publish to save them.

Sitewide Settings

↑ Back to top

Single Product Page

• Show Customize Button – Show the Customize Product button on single product pages for products linked to a product base.
• Add to Cart Button – Choose to hide the standard Add to Cart button so customers must customize before adding to cart.
• Customize Button Position – Choose where the button appears on the product page.

Shop and Category Pages

• Show Customize Button – Show the Customize Product button on shop/category pages for products linked to a product base. The button is automatically hidden for products that aren’t purchasable.
• Add to Cart Button – Choose to hide the standard Add to Cart button on shop/category pages.
• Customize Button Position – Choose where the button appears on shop/category pages.

Cart Page

• Product Customization Details – Set to Show to display an Edit Design link below the product name in the cart and checkout, letting customers return to the designer to adjust their design or attributes.
• Thumbnail Width / Height (in px) – Size of the design thumbnail shown in the cart.

My Account Page

Product Customization Details – Set to Show to display a Download Design link in the customer’s order history in My Account.

Shortcodes

↑ Back to top

Two shortcodes are available for placing customization controls outside the default button/detail locations: one for rendering the Customize Product button, and one for rendering the Product Customized details.

Modules

↑ Back to top

Go to Product Designer > Settings > Modules to enable or disable each module for the designer page: Templates, Images, Text, Shapes, Cliparts, Backgrounds, and Layers. Disabling a module hides it from the designer sidebar sitewide; each product base can also override these settings individually (see the Product Base section above).

Layers lets customers see and reorder the objects on their design canvas. Backgrounds lets customers apply a background image (managed under Product Designer > Resources > Background Images) behind their design.

Images Module Settings

• Force Users to Login to Upload Images – Require guests to log in before uploading an image.
• Image Formats Users can Upload – PNG, JPEG, JPG, GIF, and PDF are supported by default; leave empty to allow all of them, or list specific formats to restrict uploads.
• Image Minimum/Maximum Size (in kb) – Leave empty for no restriction.
• Minimum/Maximum Dimension – Restrict the pixel dimensions of uploaded images.
• Fee Settings – Choose Multiply Price Based on Image Count to add the fee each time an image is uploaded, or Fixed Price for Whole Product to charge the fee once regardless of how many images are added. Set the Fee for Image Upload amount, or leave it empty to not charge for image uploads. This can be overridden per product base.

Customers can reuse images they’ve previously uploaded to a design without uploading them again.

Text Module Settings

↑ Back to top

• Maximum Allowed Character Count Per Input – Limits how many characters can be entered in one text object.
• Maximum Allowed Number of Inputs – Limits how many separate text objects a customer can add to a single design; an existing one must be removed before adding another once the limit is reached.
• Charge Fee for Text Customization – Choose Fixed Fee to charge one price regardless of length, Fee for n Number of Characters to charge based on a set character count, or No Fee.
• Number of Characters / Fee – When using the per-character option, set the character block size and the fee charged per block.
• Default Text Field Value, Default Text Color, Default Text Background Color, Default Font Family – Pre-fill new text objects with these values.
• Usable Font Families – All available fonts are offered by default; choose Selected Font Families to restrict customers to a specific list.
• Google Font API Key – Enter your key here to make your Google Fonts library available for text customization.
• Custom Fonts File Path – Upload your font file via Media > Add New Media File, copy its URL, and paste it here to make custom fonts available for text customization.

Pricing and Quantity

Object and attribute prices (colors, text, images, cliparts, shapes, templates) are added to the product price on top of any WooCommerce attribute pricing. An option is available to control whether the customization cost is multiplied by the product quantity or charged once regardless of quantity.

QR Codes

Customers can generate a QR code and add it to their design by entering the desired content. A setting is available to hide the QR Code button on the designer page if you don’t want to offer this feature.

Compatibility

↑ Back to top

• Works with WooCommerce High-Performance Order Storage (HPOS).
• Compatible with the WooCommerce Cart and Checkout blocks.
• Compatible with WPML for multilingual sites.
• Compatible with the multi-currency feature of the WooPayments plugin, and with the Yith Multi-Currency Switcher plugin.

Usage

↑ Back to top

Customer Designing the Product and Placing the Order

↑ Back to top

1. The customer clicks Customize Product on the single product, shop, or category page (if shown), or goes directly to the Product Designer page.

2. If they clicked the button, the Product Designer page loads with the product base already linked to that product. If they access the page directly, they’re prompted to choose a product base and product first.

On the designer page, the customer can:

• Click the site logo (if configured) to return to the homepage.
• Use the File menu to export their design as a template file, or reload a saved design.
• Use the Print menu to download or print their design.
• Open My Designs to view or delete previously saved designs.
• See a running price total that includes the product price, attribute prices, and design price, multiplied by quantity.
• Click Redirect with Changes to Product Page, if enabled, to return to the single product page with their customization carried over (shown there as a “+Designing Price” link that previews the design on hover).
• Click Add to Cart to add the customized product to the cart, if this button isn’t hidden by settings.
• Click Back to Shop to leave the designer (any customization in progress is lost) or start a new design for a different product/base.
• See the product name and price, switch between views (if the base has more than one), generate a QR code, save the design for later use via Save Design, and use Undo/Redo.
• View the product description or short description (if configured to show), select any product attributes, and browse the objects panel (templates, cliparts, shapes, images, text, backgrounds — based on enabled modules) to build the design in the canvas area.

Once the design is complete, the customer adds it to the cart or returns to the product page with their changes. From the cart and checkout pages, an Edit Design link below the product name lets them go back to the designer to adjust their design or attributes. After placing the order, the Thank You page shows a Download Design link under the product name, which reopens the designer so the customer can download or print their design without a watermark, at 300 DPI.

Real-World Usage Example: Ordering a Custom T-Shirt

↑ Back to top

To illustrate the full flow, here’s a step-by-step walkthrough of a customer, Maria, ordering a personalized birthday t-shirt from an online shop:

1. Browsing the shop – Maria visits the shop page and finds a plain t-shirt product listed with a Customize Product button beneath the usual Add to Cart button (the store owner has enabled both buttons for shop pages).

2. Opening the designer – She clicks Customize Product. The Product Designer page opens in a new layout with the store’s logo in the top corner, and the t-shirt’s front view is already loaded on the canvas because the product is linked to a “T-Shirt” product base.

3. Choosing a color – In the attributes panel, Maria selects Product Color and picks “Navy Blue” from the color swatches. The t-shirt image on the canvas updates instantly to navy blue.

4. Adding a design template – She opens the Templates tab in the objects panel and selects a pre-made “Happy Birthday” template featuring balloons and a text placeholder. It’s added to the canvas as a group of objects.

5. Personalizing the text – Maria double-clicks the text placeholder and types “Happy 30th, Alex!”, then uses the text panel to change the font and color to match the balloons. Because the store charges a fixed fee for text customization, she sees the design price update to include that fee.

6. Adding a clipart – She browses the Cliparts tab, finds a small star icon, and drags it onto the shoulder of the design. Each clipart added has its own price, so the running total updates again.

7. Switching views – Maria clicks the Back view tab to check the back of the t-shirt, decides to leave it blank, and switches back to the Front view.

8. Uploading a photo – She opens the Images tab, clicks Upload Image, and selects a photo of herself and Alex from her computer. Since the format (JPEG) and size are within the store’s configured limits, the upload succeeds and the fee for image upload is added to the total.

9. Reviewing the price – The running price total now shows the base t-shirt price plus the color, text, clipart, and image fees, multiplied by the quantity (1).

10. Saving progress – Not ready to buy yet, Maria clicks Save Design so she can return to it later without starting over.

11. Returning and finishing – A day later, Maria opens My Designs from the designer page, selects her saved design to reload it onto the canvas, and clicks Add to Cart.

12. Checkout – On the cart page, she sees an Edit Design link below the t-shirt line item and a thumbnail of her design. She proceeds to checkout and completes the order.

13. After purchase – On the Thank You page, Maria sees a Download Design link under the t-shirt, but since printing happens on the store’s side, she doesn’t need to use it. The store owner instead goes to Product Designer > Orders, finds Maria’s order, and clicks Download Design to open the design in the frontend designer preloaded with her chosen color, text, clipart, and uploaded photo, then uses the Print menu to download it as a 300 DPI PDF for production.

Managing Product Designer Orders and Printing Designs

↑ Back to top

Orders containing customized products appear in Product Designer > Orders, and a Product Designer section is also available directly on the order’s edit screen for downloading or editing the design.

• Click Download Design on an order to open the frontend designer preloaded with the customer’s design and chosen attributes.
• Use the Print menu to download or print the design at 300 DPI; PNG, PDF, and SVG output formats are supported.
• Designs can also be downloaded directly as PNG or PDF from the Orders listing table without opening the designer.
• If enabled, the customer’s design is attached to the order confirmation emails sent to both the customer and the admin.
• Images customers upload are saved under /wp-content/uploads/pdr/orders/zip once an order’s design is downloaded in PNG format; canvas files are saved to the orders folder only after the order is placed.

Translation

↑ Back to top

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: Can I offer product customization to guests without requiring a login?

Yes — by default guests can customize products. If you want to require an account, enable Restrict Product Customization for Guests in Product Designer > Settings > General.

Q: Can I limit which products or user roles get access to customization?

Yes, use the Allow Product Customization for option under User Restrictions in the plugin settings to limit customization to specific users or roles.

Q: Does the plugin support variable products?

Yes, product bases can be linked to variable products as well as simple products.