3 min read

Customize Button #

The Customize button allows customers to open the Product Designer App Design Studio directly from a WooCommerce product. Once a Product Base has been connected to a WooCommerce product, the button is automatically displayed, giving customers access to personalize the product before adding it to the cart.

This guide explains how the Customize button works, where it appears, and how to verify that it is displayed correctly.

How the Customize Button Works #

The Customize button is automatically added to WooCommerce products that have been connected to a Product Base.

When a customer clicks the button, Product Designer App opens the Design Studio, allowing them to:

  • Add text
  • Upload photos
  • Add clipart
  • Change colors
  • Customize templates
  • Preview their design
  • Add the personalized product to the cart

Products that are not connected to a Product Base will not display the Customize button.

Before You Begin #

Before the Customize button can appear, make sure that:

  • Product Designer App is installed and activated.
  • WooCommerce is installed and configured.
  • A Product Base has been created.
  • The Product Base has been connected to a WooCommerce product.
  • The WooCommerce product is published.

Typical workflow:

Create Product Base
        ↓
Configure Product Base
        ↓
Connect to WooCommerce Product
        ↓
Publish Product
        ↓
Customize Button Appears

Customize Button on the Shop Page #

When browsing your WooCommerce shop or product archive pages, customizable products automatically display a Customize button.

Customers can launch the Design Studio directly without first opening the product details page.

This provides a faster shopping experience, especially for stores that primarily sell personalized products.

Typical locations include:

  • Shop page
  • Product category pages
  • Search results
  • Related products
  • Product widgets

The exact position depends on your active WooCommerce theme.

Customize Button on the Product Details Page #

The Customize button is also displayed on the WooCommerce product page.

Customers can review the product information before starting the customization process.

Depending on your configuration, the Customize button may appear:

  • Above the Add to Cart button
  • Below the Add to Cart button
  • Near the product image
  • Inside a custom product layout

The exact location is controlled by your WooCommerce theme and Product Designer App integration.

Launching the Design Studio #

When customers click Customize, the Design Studio opens.

The editor loads:

  • Product images
  • Design areas
  • Templates (if assigned)
  • Product colors
  • Available resources
  • Printing configuration
  • Pricing rules

Customers can immediately begin designing their product.

Customize Button with Product Templates #

If the WooCommerce product has one or more assigned templates, the Design Studio opens with the selected template already loaded.

Customers can:

  • Purchase the template without changes
  • Edit text
  • Replace photos
  • Upload artwork
  • Make simple customizations

This creates a faster personalization workflow.

Customize Button with Blank Products #

If no template has been assigned, the Design Studio opens with an empty design area.

Customers can create their own design from scratch using:

  • Text
  • Images
  • Clipart
  • QR codes
  • Shapes
  • Available resources

Theme Compatibility #

Product Designer App works with most standard WooCommerce themes.

The Customize button is automatically inserted using WooCommerce hooks whenever possible.

Depending on the theme, the button may appear in a slightly different location.

If your theme uses a heavily customized product layout, additional integration or template overrides may be required.

Verify the Customize Button #

After connecting your Product Base to a WooCommerce product:

  1. Open your website.
  2. Navigate to the Shop page.
  3. Confirm that the Customize button appears for the product.
  4. Open the product details page.
  5. Verify that the Customize button is displayed.
  6. Click the button to ensure the Design Studio opens correctly.

If the Design Studio loads successfully, the integration is complete.

Troubleshooting #

Customize button does not appear #

Check the following:

  • The WooCommerce product is connected to a Product Base.
  • The Product Base is active.
  • The WooCommerce product is published.
  • Product Designer App is activated.
  • WooCommerce is activated.
  • Your theme has not removed the required WooCommerce hooks.
Design Studio does not open #

Possible causes include:

  • The Product Base has been deleted.
  • Product images have not been configured.
  • The customization page has not been configured correctly.
  • A JavaScript error is preventing the editor from loading.

Open your browser’s developer tools to check for JavaScript errors if the editor does not launch.

Button position is incorrect #

The Customize button location is determined by your WooCommerce theme.

If the button appears in an unexpected location, you can usually reposition it by:

  • Using your theme’s hook settings
  • Adding a custom WooCommerce hook
  • Using a child theme
  • Applying custom template overrides

Refer to your theme documentation for additional customization options.

Best Practices #

For the best customer experience:

  • Connect every customizable WooCommerce product to a Product Base.
  • Assign templates to products that use predefined designs.
  • Test the Customize button on both the Shop page and the Product Details page.
  • Verify that the Design Studio opens correctly on desktop and mobile devices.
  • Check that pricing, colors, templates, and resources load as expected.
  • Place a complete test order before publishing the product.

A properly configured Customize button provides customers with a seamless way to personalize products directly from your WooCommerce store, resulting in a faster and more intuitive shopping experience.

What are your Feelings
Scroll to Top