How to Sell Variable Products with Custom Design Options

Smart Product Designer works with variable products, letting customers personalize any variation before they buy. This is ideal for any product that comes in different sizes, colors, or materials, such as T-shirts, mugs, hoodies, phone cases, and more.

This doc explains how to set up a variable product with custom design options.

---

Step 1: Configure Your Product Designs

↑ Back to top

1. Navigate to WordPress Admin → Products → Smart Product Designer.
2. Go to the Design Templates tab and click Add New Design Template.
3. Give the template a name (e.g. T-shirt Design, Mug Design).
4. Click Add Side, give it a name (e.g. Front, Back), and upload a mockup image for that side.
5. Repeat to add more sides if needed (e.g. Sleeve).
6. Under the Fonts tab, select or upload the fonts available to customers.
7. Under the Shapes and Clip Arts tabs, add shapes and clipart for customers to use. Set an additional fee for each if needed using the Additional Fee field.
8. Save the template.

---

Step 2: Set Up the Variable Product

↑ Back to top

1. Go to Admin → Products and open an existing product or create a new one.
2. In the Product Data panel, set the product type to Variable Product.
3. Go to the Attributes tab, add your attributes (e.g. Color, Size), and check Used for variations.
4. Go to the Variations tab and generate variations from your attributes, or add them manually.
5. Click Update.

---

Step 3: Link Your Design to the Product

↑ Back to top

1. Scroll to the Product Data panel and click the Product Designer tab.
2. In the Choose product designer template dropdown, select the template you created (e.g. T-shirt Design).
3. Click Update.

The product is now configured and ready for customers to personalize.

---

What Customers See

↑ Back to top

1. On the product page, customers select their variation first (e.g. color, size) using the standard variation dropdowns.
2. Once a variation is selected, the Design button appears (the button label can be customized via the settings page).
3. The designer page opens, showing the product mockup along with all the tools you enabled.
4. Customers can add text, upload photos, place cliparts, insert shapes, or generate a QR code.
5. If multiple sides are configured, customers switch between them using side tabs (e.g. Front / Back).
6. When done, customers click Add to Cart and proceed through the standard checkout flow.
7. The cart and order confirmation show a thumbnail of the customer’s design so they know exactly what they ordered.

---

My Account — Past Designs

↑ Back to top

Customers can log in to My Account → Orders and see a preview of every design they’ve purchased — useful for repeat orders or placing a follow-up order with small changes.

---

Step 4: Fulfill Orders as an Admin

↑ Back to top

1. Go to WooCommerce → Orders and open the order.
2. The variation details (e.g. Color: Black, Size: Large) are shown alongside the product.
3. Click Print Design next to the product to download a print-ready PDF.
4. Forward the PDF to your print supplier or print directly. No additional file preparation needed.

That’s it.

---

Tip: To change the design button label, designer page layout, or other display options, go to WordPress Admin → WooCommerce → Settings, click the Products tab, and select Smart Product Designer from the sub-tab links.