This tutorial is a step-by-step guide to teach you how to create a custom product on a WooCommerce store using the Ouidah WooCommerce Product Designer plugin.

A custom product configuration is a set of parameters that can be assigned to one or more WooCommerce products that regulate how they work. Assigning a custom product configuration to a normal WooCommerce product turns it into a customizable product.

The first step to making our product customizable is to create a configuration. A configuration is a set of options which once defined will allow our plugin to take charge of the process of customizing your product from the designer to the generation of printable output files. 

How to create a configuration

  1. Click on WPD > Configurations, to access the list of existing configurations.
  2. Next, click on New Configuration to have access to the page on which you can create a new configuration.
  3. Add a Configuration name.
  4. Certain WooCommerce-compatible themes allow the display of our Design from scratch and Custom design uploads buttons below customizable products on the product pages, these options allow you to decide to display (or not) the Design from scratch button and the Custom design uploads button on the WooCommerce product page.design from sratch
  5. The dimensions you have just defined are not only the dimensions of your output files but also allow our plugin to define a customizable canvas whose dimensions will be proportional to that of your output files and on which your customers can customize the product. Choose your output files size right here.wpd output settings 1
  6. The “Parts” are the components of your product that you want to make customizable. You will need to define the dimensions within which your customers can work. This also defines the output files so you can go directly to printing.  The “Parts” section allows you to define the editable product parts or sections. Click on the “Add part” button to add your parts.
      1. Name: Name of your part
      2. Icon: This allows you to define an icon for the parts
      3. Bg. (not inc.): This allows you to define a background image for the parts. This image won’t be included in the final design.
      4. Bg. (inc.): This allows you to define a background image for the parts. This image will be included in the final design.
      5. Overlay image: This allows you to define an overlay image for the parts. This image can be selected to either be included or not in the final design.parts 1

Note: Note that it is imperative to choose images whose sizes are proportional to the dimensions of output files defined above as background included, background not included, or even image overlay so our plugin can easily scale them on the designer for a good rendering.

This is what your customers will see in the designer:

front

The front part on the shirt in the designer

back

Back part of the shirt in the designer

How to assign a configuration to a WooCommerce product?

Once the configuration is created, we’ll assign it to a product to make the product customizable.

  1. For a new product, click on Products > Add New to access the product creation screen.
  2. Enter your product name.new product
  3. Select the product type (only simple and variable products are supported at this time).

For simple products:

  1. Enter product price (note that the price is mandatory for the product to be customizable, even the value ‘zero’).
  2. Now select the previously created configuration.simple product conf
  3. Publish your product.

For variable products:

  1. In the product creation view, select “variable product” as product data.
  2. Click on the “variations” tab.
  3. Select the variations you want to configure.
  4. Enter “variation price”.
  5. Now select the corresponding configuration previously created.variable product
  6. Publish your product.

Q: How can a customer customize a product?

Once a product has been set as customizable, there are 2 ways for customers to customize it:

  • From the shop page (simple products only): a Design from scratch button will appear under the Add to cart button. A click on it will lead the user to the editor page with the product data you previously created already loaded.
  • From the product page: a Design from scratch button will appear under the Add to cart button. A click on it will lead the user to the editor page with the product data already loaded. For variable products, selecting the right option will lead to the right configuration when you click the Design from scratch button.

Q: Can I add a configuration to an existing product?

Yes, the configuration field appears in existing Woocommerce products as well. However, the existing Woocommerce product must either be a simple or variable product.

You can follow the steps above for either product type, to add the configuration.

Q: Will this work for themes that do not have any reference to WooCommerce?

 This works for WooCommerce-enabled themes. It also works for themes that do not have any reference to WooCommerce. If the theme the customer is using is a WooCommerce compatible theme or a custom theme, and all hooks are properly triggered, then all buttons will appear. If not, then troubleshoot and verify that all hooks are properly triggered in the theme.