Posted at 

September 10, 2017




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

How to create a custom product configuration?

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

  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. Under the basic settings section you have the Design from blank feature which can allow you to display or not the button on the product page.
  4. The canvas section allows you to apply a custom canvas size to your product. The canvas can be smaller than the expected output files in order to fit inside the website pages but need to be a scaled version of the expected output.
  5. The parts section allows you to define the products parts. Click on the Add parts button to add your parts.
    • Name: Name of your part
    • Icon: Allows you to define an icon for the parts
    • Bg. (not inc.): allows you to define a background image for the parts. This image won’t be included in the final design.
    • Bg. (inc.): allows you to define a background image for the parts. This image will be included in the final design.
    • Overlay image: 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.

    Front part
    Front part

    Back part
    Back part
  6. Click on the Publish button to save your configuration.

How to create a custom woocommerce product?

Once you’ve created a configuration as described in the previous section:

  1. Click on Products > Add New to access the product creation screen
  2. Enter your product name

  3. Select the product type (only simple and variable products are supported at this time).

For simple products:

  1. Enter product price
  2. Now select the corresponding configuration previously created

3. Write a short description of the product

4. Finally click on Publish button to save your product

For variable products:

  1. First of all select “variable product”
  2. Click on the option “variations”
  3. Select the variations you want to configure
  4. Enter “variation price”
  5. Now select the corresponding configuration previously created.


5. Write a short description of the product

6. Finally click on Publish button to save your product.

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 blank button will appear under the Add to cart button. A click on it will lead the user the editor page with the product data already loaded.
  • From the product page: a Design from blank 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. If the product is variable, make sure you select the options before clicking the Design from blank button.

Note: This does not only work for WooCommerce valid themes but also works for themes which 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.


  1. XOOP Online

    How can you see the product chosen in the design canvas?

    October 18, 2017 at 1:52 am
    • orion_site2015

      What do you mean?

      October 18, 2017 at 5:22 am
      • aop

        Hey you are the author and doesn’t understand what customers ask, what did you make then?

        May 29, 2019 at 11:00 am
        • Origin Orion

          Being the author does not mean we can understand the customers thoughts, and that’s why we’ve asked him to provide more detailled explanations.

          May 29, 2019 at 4:54 pm
  2. Harry Plotter

    best afordable web to print software
    congratulations to the team.
    im coming back , from a bad experience with MageBay ProDesigner plug.
    keep going!

    October 18, 2017 at 9:35 pm
    • orionorigin

      Thank you for your kind words.

      If you feel we’ve provided great value or would like to leave us feedback:

      =>Review us on Facebook: https://goo.gl/iB7PTx
      =>Review us on twitter: https://goo.gl/2P6SYe

      Thank you so much for taking the time to provide us feedback and review!

      October 19, 2017 at 5:07 am
  3. stuart

    Hi there.

    I am looking to to customise various dimensions of card i.e. 675mm x 572mm, how do i set up the configuration to show this?


    December 28, 2017 at 10:26 pm
    • Orion

      In the output settings section of a configuration, you have the ability to setup the output dimensions you need.

      December 28, 2017 at 11:05 pm
      • stuart

        Thank you for your quick reply! Can i set them as mm or is it just px?

        December 28, 2017 at 11:13 pm
        • Orion

          For the output, you can select multiple formats. But the canvas dimensions you can only work with px.

          December 29, 2017 at 6:53 am
    • stuart

      Ah, found it, very cool! How do I set up the dimensions properly on the design page so that they correspond with the dimensions I am looking for?

      December 28, 2017 at 11:35 pm
  4. KH

    How would you use this to hide/show multiple layers that can be customized? For instance, say I have a base shirt that can have a selected color. That same shirt can have a second color as part of it’s design. I’d like the user to be able to choose the two colors independent of each other using this. Is it possible?

    February 1, 2018 at 3:06 am
  5. Lukas

    I produce wine and our costumer can design his own Label.
    My Problem is, that the Output Quality is not the best.
    How can I scale it up?

    many thank’s

    February 18, 2018 at 8:12 pm
    • Hermann

      Hello Lukas,
      Are you using the free or the premium version?

      February 20, 2018 at 4:41 am
      • Lukas

        Hey I’m sorry it works great thank you!

        February 21, 2018 at 8:49 pm
  6. Herby Regis

    Hello…I need help configuring the bounding box area. What measurement is it using…MM or inches? Let’s say I Have a rectangular business card that is 2×3.5 inch…what would that look like? I thought there were already some presets included with this. I have many print products to add and I am stuck on this section

    February 22, 2018 at 12:50 am
    • Hermann

      The bounding box uses pixels… I suggest using an overlay image which has the same dimensions as the canvas that way everything will surely be properly aligned.

      February 22, 2018 at 2:39 pm
  7. enea

    Hello. congrats on you plugin. Im just creating a new website where Id like to add customizable products… I was trying your free plugin and customized a T shirt, but I noticed that when i received the order in woocommerce, that the picture I put over the Tshirt didnt download apart the tshirt… but it was downloaded together with the tshirt and the quality was bad.
    Is this because this plugin is a free trial? If i upgrade, is this problem solved?
    Thanks in advance !!!

    March 3, 2018 at 5:27 pm
  8. AndrewJ

    Seems to massively hog server CPU resources?

    February 14, 2019 at 10:32 am
    • Origin Orion

      Hello Andrew,
      What do you mean?

      February 14, 2019 at 10:34 am
  9. edwin ayala

    hola, quiero colocar el area que delimita en los productos pero no me sale en que medida lo debo hacer.
    como puedo solucionar esto?

    April 5, 2019 at 4:54 pm
    • Bellarmin

      Hi Edwin,
      Thank you for your comment, please just start a chat on our site https://designersuiteforwp.com/, and a specialist will help you. Thanks

      April 5, 2019 at 6:23 pm
  10. Ben

    Do not understand how this plugin works at all been working on it for a month now no luck

    June 1, 2019 at 12:12 am
    • Bellarmin

      Thank you for your comment. Please start a chat on our site explaining what you can’t do, a competent person will answer you.

      June 3, 2019 at 7:56 am
  11. Suleyman

    Is it possible for the admin to choose the available colors at adding text?
    Like that the customer can only choose black, white or red text.

    June 17, 2019 at 4:47 pm
  12. Amandip Singh

    Once I installed it in my site, it works good but when we download the attachment, it downloads it in low quality.. that can’t be printed.

    June 19, 2019 at 2:45 pm
    • Bellarmin

      Maybe the issue is your configuration. Please start a chat on our site and an expert will help you have the right setting. Thanks

      June 19, 2019 at 8:29 pm
  13. Adolfo Rosete

    Hi, I´m having an issue, I want my sales representatives to add name and phone in our business cards, so I created the settings with front and back and added BG inc. later I created my product and the button appears but when i click nothing seems to happened.

    October 9, 2019 at 3:52 am
    • Origin Orion

      Can you provide the link where it happens so we can take a look?

      October 9, 2019 at 6:10 am
  14. roberto galeasso

    Hi! I can’t find the “configurations” section to create a new one, why?

    January 21, 2020 at 10:24 am
    • Origin Orion

      That’s strange. Are you logged in with a shop manager or admin user profile?

      January 21, 2020 at 10:40 am
  15. Aileen

    How do you embed a form on product page?

    January 28, 2020 at 4:01 pm
    • Origin Orion

      What form are you referring to?

      January 28, 2020 at 4:41 pm

Leave a comment

Your email address will not be published. Required fields are marked *