Product Designer for WooCommerce

With Product Designer for WooCommerce, your users can design and customize a product to fit their needs, which will drive customer satisfaction and additional revenue growth on your site.

Benefits

• Improves Customer Experience ― Offering the flexibility of designing the products to customers can make them feel that they are buying a personalized product. This improves the overall customer experience.
• Drives Additional Revenue to the Site ― When a customer buys a customized product, they can be charged for using elements such as images, texts, clip art, and more. This can serve as additional revenue to the site.
• Attracts New Customers ― Customers who have benefited from the Product Designer are likely to refer new users to your site.

How Does Product Designer for WooCommerce Work?

• The “Customize Product” button will be displayed in the Shop & Single Product pages if the product is linked to any product base.

• When the user clicks on the Customize Product button, they will be redirected to the Product Designer page.

Designer Page

• You can add product attributes such as color, size, message, etc. using the field types Product Color, Text, Text Area, Single Select, Checkbox, Radio box. You can set attributes to be optional/mandatory.
• The options of the Single Select, Checkbox and Radio Button attributes can also be taken from your existing WooCommerce product attributes (Products > Attributes).

Product Attributes Customization

• Customers can customize the product with the help of the following elements,
  • Images
  • Cliparts
  • Text
  • Shapes
  • Templates
• After completing the designing and selecting the attributes, customer can click “Redirect with Changes to Product Page” if they want to go to single product page with the product customization.

Redirect with Changes to Product Page

• From the product designer page, they can also directly add the product to the cart by clicking the “Add to Cart” button.
• If the store requires a design on every view, the customer is shown the views still needing a design before the product can be added to the cart.

Designed Product Added to Cart

• Once the customer places the order, the site admin can see the orders with product customization in “Product Designer > Orders” section in admin dashboard. The Site Admin has to click the “Download Design” button on the respective order which when clicked they will be redirected to frontend product designer page with customer design and attributes loaded.

• Now,the admin has to click “Print” menu to Print/Download the design.

Admin Download or Print Design Using Print Option

Popular Features

1. Intuitive Design Studio

A clean, organized workspace built for fast, distraction-free customization. Customers get an easy-to-navigate tool rail, a live canvas with pan and zoom, and contextual toolbars that surface the right editing options crop, flip, opacity, alignment, colors the moment they select an object. A built-in print quality indicator flags low-resolution uploads before checkout, and a running price breakdown keeps customers informed of costs as they design.

An optional Auto-snap aid lines objects up with the design area and with each other as customers drag them.

2. Product Templates

Create reusable design templates for your customers. Pre-designed templates help customers personalize products faster while maintaining consistent branding and reducing design effort.

With Template Append enabled, customers can add a template on top of their existing design instead of replacing it.

2. Clipart Library

Upload and organize custom clipart collections that customers can add to their designs. You can even charge extra for premium clipart to generate additional revenue.

3. Customer Image Uploads

Allow customers to upload their own images, logos, and artwork directly into the product designer. Control file types, dimensions, and upload sizes to ensure print-ready designs.

4. Advanced Text Personalization

Let customers add custom text using Google Fonts or your own custom fonts. Support text alignment, font colors, font backgrounds, superscript, subscript, uppercase, and lowercase formatting. Customers can also curve text, adjust letter spacing and line height, apply outline and shadow, and pick one-click text effects such as Lift, Hollow, Echo, Neon and Highlight. A font picker with search and recently used fonts, and quick-add Heading, Subheading and Body Text buttons, make text faster to add.

Offer ready-made, styled text designs that customers add with one click and personalize with their own words. The plugin comes with default text designs, and you can create your own text designs with multiple lines, fonts, letter spacing, curve, line height, letter case, colors, highlight, outline, shadow and effects, with a live preview.

5. Multi-View Product Design

Create multiple design areas for a product such as Front, Back, Left Sleeve, Right Sleeve, Inside Cover, or any custom view. Customers can personalize every side of the product from a single designer.

6. Multiple Design Areas with Custom Shapes

Add several design areas to each view of a product base, and give each area its own shape, such as Rectangle, Rounded Rectangle, Circle / Ellipse, Triangle, Diamond, Hexagon, Star or Heart. Create your own shapes from SVG path data or by uploading an SVG file in Product Designer > Settings > Design Area Shapes. Each area is outlined and numbered in its own color on the designer page and in the Layers panel, and the design is clipped to the area shape so customers see exactly what will be printed.

7. Product Bases & Attribute Management

Create product bases and link multiple WooCommerce products to them. Configure colors, text fields, dropdowns, checkboxes, and other attributes with individual pricing rules.

Attribute options can be entered as custom options or taken directly from your WooCommerce product attributes.

8. Flexible Design Pricing Rules

Turn product personalization into a revenue-generating feature by charging customers based on the design elements they use. Configure pricing rules that match your business model without requiring custom development.

• Charge different prices for templates, clipart, shapes, colors, background images, and image uploads.
• Apply fixed fees or per-character pricing for text personalization.
• Set individual pricing for premium design assets.
• Create premium personalization packages with ease.

Object-Based Pricing

Charge customers based on the number of objects added to their design. For example, you can charge separately for each text element, image, clipart, shape, or other design object added to the canvas.

View-Based Pricing

Assign different prices to different design views of a product. For example, charge separately when customers customize the Front, Back, Left Sleeve, Right Sleeve, Inside Cover, or any additional design area.

This flexible pricing system helps maximize revenue while giving customers complete freedom to personalize products exactly the way they want.

9. 300 DPI Print-Ready Export

Generate high-quality 300 DPI print-ready artwork directly from customer designs. Download production-ready files from WooCommerce orders and streamline fulfillment.

10. Layer Management

Customers can easily manage complex designs using layer controls. Design elements can be moved forward or backward, copied, pasted, and organized for precise customization.

11. Watermark Protection

Protect premium artwork and design assets by displaying watermarked previews before checkout. Custom watermark text can be configured from the admin panel.

12. Mobile-Friendly Product Designer

Provide a seamless product customization experience across desktop, tablet, and mobile devices without requiring separate configurations.

13. Save & Continue Designing

Allow logged-in customers to save unfinished designs and return later to complete their customization, helping reduce abandoned personalized orders.

Extensive Feature List

1. Design & Customization Management

• Works seamlessly with Simple and Variable products.
• Provides a dedicated product designer page for an uninterrupted customization experience, now with a redesigned layout for a smoother experience.
• Provides a dedicated product designer page for an uninterrupted customization experience, now redesigned as a modern workspace with an organized tool rail, live canvas, and properties panel for faster, more intuitive editing.
• Create and manage unlimited product bases for different product types.
• Support multiple product views within a single product base for front, back, and other customizable areas.
• Link multiple WooCommerce products to a single product base for easier management.
• Support both transparent and non-transparent product images.
• Organize products using product base categorization.
• Arrange design elements using intuitive layer controls.
• Easily copy and paste design objects between design areas.
• Pan and zoom the canvas, including a fit-to-screen reset, for precise positioning on any device.
• Undo and redo design actions directly from the canvas.
• Crop uploaded images directly within the designer canvas.
• Flip design elements horizontally or vertically.
• Adjust object opacity for layered design effects.
• Lock design objects to prevent accidental changes.
• Replace an uploaded image without losing its position, size, or applied effects.
• Filter layers by type or state for easier management in complex designs.
• Add multiple design areas to each view, each with its own shape.
• Create custom design area shapes from SVG path data or SVG files, with default shapes that can be restored anytime.
• Outline and number each design area in its own color on the designer page and in the Layers panel.
• Move layers between design areas.
• Auto-snap objects to the design area and to each other, with a configurable guide line color.
• Optionally require a design on every view before adding to the cart.
• Clearer warning message when the designer page is reloaded or left with unsaved changes.
• Improved responsive layout across all devices and platforms.

2. Templates, Clipart, Shapes & Backgrounds

• Create and manage unlimited design templates for customer personalization.
• Organize templates using template categories for easier navigation.
• Build extensive clipart libraries for customer use.
• Organize artwork using clipart categorization.
• Create custom SVG-based shapes for advanced design possibilities.
• Organize shapes using shape categories.
• Customize shape fill and stroke colors directly on the canvas.
• Create and manage background images for product customization.
• Categorize background images for improved asset management.
• Assign individual pricing for templates, clipart, shapes, and backgrounds.
• Template Append lets customers add a template on top of their existing design.

3. Product Attributes & Personalization Controls

• Support multiple attribute types including Product Color, Text Fields, Dropdowns, Checkboxes, and Radio Buttons.
• Create multiple attributes for each product base.
• Configure attribute-based pricing for personalized products.
• Apply different pricing rules for color attributes and custom options.
• Use WooCommerce product attributes and their terms as the options of dropdown, radio button and checkbox attributes.

4. Advanced Text Customization

• Support Google Fonts and custom fonts for personalized designs.
• Restrict available font families globally or per product base.
• Provide flexible text alignment controls for precise positioning.
• Support uppercase, lowercase, superscript, and subscript formatting options.
• Customize font colors and text background colors.
• Adjust font size and text formatting instantly using an inline text toolbar.
• Apply creative text masking effects using images.
• Charge fixed fees or per-character fees for text personalization.
• Add ready-made text designs, including default designs, organized in text design categories.
• Curved text, letter spacing and line height controls.
• One-click text effects: Shadow, Lift, Hollow, Outline, Echo, Neon and Highlight.
• Outline and shadow with adjustable color, thickness, offset and blur.
• Font picker with search and recently used fonts.
• Quick-add Heading, Subheading and Body Text buttons sized to the design area.

5. Storefront & Theme Integration

• Integrate the designer page with your theme’s header and footer.
• Display product descriptions and short descriptions on the designer page.
• Configure a custom logo and favicon for the designer experience.
• Choose from multiple designer themes including Amazon, Basic, Chubby, Github, Material, and Custom.
• Visually customize the designer page using WordPress’s native Customizer tool via the “Customize Designer Page” option.
• Control the visibility of customization options on product, shop, and category pages.

6. User Access & Upload Controls

• Restrict customization to specific users or user roles.
• Allow or restrict customization for guest users.
• Restrict image uploads for guest customers.
• Control supported upload file formats.
• Configure minimum and maximum upload file sizes.
• Configure minimum and maximum image dimensions for uploads.

7. Production & Order Management

• Download customer designs directly from WooCommerce orders.
• Access and manage customer-approved artwork from the order screen.
• Support efficient production workflows and fulfillment processes.
• Get a real-time print quality indicator that flags low-resolution images before checkout.
• Export customer designs as PNG, PDF, or SVG, with configurable paper size and measurement units.
• Show customized design images in the WooCommerce Cart.

8. Revenue & Pricing Controls

• Charge additional fees for image uploads.
• Configure pricing for templates, clipart, shapes, and background images.
• Create premium personalization experiences using flexible pricing rules.
• Monetize product customization with advanced pricing controls.
• Display a live price breakdown so customers see costs update as they design.

9. Developer & Administration Features

• Built with a flexible modular architecture for easier customization.
• Enable or disable individual designer modules such as Templates, Clipart, Images, Text, Shapes, Layers, and Backgrounds.
• Manage all personalization assets from a centralized admin interface.
• Configure advanced product setups using a flexible product base system.

Requirements

Minimum PHP version: 5.6

Product Designer for WooCommerce can help your users design their own products and purchase them in your shop.