Search

Create a Custom Product Builder or Product Designer on WordPress

    Sumit Pore
Listen to this article

[su_note note_color=”#f8f6df” text_color=”#222222″]Do note, we have not built a Product Customizer/Builder plugin on WordPress. The below article is a postulation based on our analysis of the product customization functionality.[/su_note]

Custom-Product-Builder
How to Create a Custom Product Builder

A custom product builder is a personal designer for every visitor to your e-store. It enhances the shopping experience and surely convinces a visitor to make a purchase. If it is possible in a physical store, it should be possible online. In fact it’s even better when you have an online application. A designer can show you the fabric and a draft of the design, but an online application can help you see the final product. With an online product builder, a customer has full control on the design. He can visually see various options, and select the combination he desires.

 

How does somebody Custom Build a Product online?

Custom building a product is personalizing the product you want to purchase, by selecting the details. There are different ways you can allow a product to be custom built. The simplest example would be a website which allows you to create a custom ensemble. A website like Pandora allows you to create a custom bracelet, which is basically an ensemble of many products, priced individually, but sold as one.

Another example is a site which offers you an option to customize the t-shirts on sale. If you haven’t seen one, try Spreadshirt.com. This is a little different than creating a custom ensemble. It allows the user to edit the placement and size of graphics.

Spreadshirt-Design-Your-Own
Example of Product Designer

Simple Product Personalization would involve:

  • Setting a base price for the original product (t-shirt) on sale. The original product would be a simple or variable product, with a category which identifies it as customizable.

  • Each additional graphic or text, which can be added on the base product, has an additional minimal cost. As and when the user selects the graphics to be added on the t-shirt, he is basically purchasing the graphic.

    • The graphic or text would be added as an add-on product type. This would imply, that the graphic cannot be purchased on it’s own, but only as part of the base product.
    • It would have categories and tags, to filter graphics.
  • The customer can edit the placement and size of the graphic and text, add his own images and can purchase the created product.

    • The placement of images will be restricted to a defined area
    • The cost of the graphic would remain the same irrespective of the final edited size.
  • To use WooCommerce to create your store, you will need a customization, which allows the created product image to be saved along with the purchase order.

    • The product image and graphics added will be saved as Order meta

Such kind of personalization involves only different prints on a base product, which basically means your manufacturing cost is low. You can read a detailed proposal for Product Designer and perceive more on how such a system can be possibly set up. [space]

But what if you wanted a different fabric for your clothes, or a custom sleeve style. Well, the simple customization website has it’s limitations. But there are some other websites which offer even more detailed customizations. A site like Vitruvien or Shoes of Prey offers customization right from the fabric, to the design, accessories, each minor detail.

Vitruvien-Shirt-Customizer
Example of Product Builder

A detailed Product Customization option, is a little different compared to a simple product customization.

  • Instead of charging price based on the add-ons for the base product, the designer made product is set at a hefty price, to cover the manufacturing cost. (Although some exclusive add-ons may have additional costs)

  • You do not need to save the eventual image as part of the order, only the details(such as style of the pockets, buttons selected, etc) can be saved.

[space]

Steps to Create a Custom Product Builder

Selecting a Theme and an e-Commerce Plugin: Let start with the basics. A good theme can save you a lot of trouble when creating a good interface for your product builder. About deciding on an e-Commerce plugin. Don’t think much. Opt for WooCommerce.

Setting up your WooCommerce-Store: You need your store ready with a set of products. There can be two kinds of products, one which can be eventually purchased (after customization), and addons (which cannot be purchased individually). For example, a shirt is a purchasable product, but graphics or detailings, are add-ons. Simple Product customization can be offered using Product Add-ons extension or the Composite Products extension, with some modifications of course.

The Product Customization Interface: The way a product customizer works, is that several images are created for a product. The images when placed together eventually represent the product. Images are also created for every customization option. For example, to create a customizable shirt, the shirt has to be broken down into collar, the body, the sleeves, pockets and buttons. When a user selects a customization option, say a different set of buttons, only the image for the buttons will be changed. The challenge is to offer a smooth interface, which masks the fact that the product image is actually a collection of images. Also, because so many images will be involved, you will need a lot of optimization to ensure that the application speed is not affected.

Order Customization: Depending on the customization selections made by the user, the price of the product has to be set. Apart from this, if we want the user to be able to see the customized product image in his purchase order, we need to make a modification for the same. Another feature you can provide, is the option to input measurements for each product to be purchased before checkout. For a logged in customer, this data could be auto filled.

Additional Customization: Using Dynamic Pricing extension for WooCommerce, you can offer different pricing for bulk orders.

[space]

Offering customers the option to custom build products is a sure way to boost sales. It’s rarely offered by many websites, mostly because of the manufacturing costs involved. But if you have that set, who is to stop you from offering top of the class shopping options to your store visitors.

 

Sumit Pore

Sumit Pore

26 Responses

  1. Really interesting read, are you saying that a visual bespoke product designer similar to the examples above can be developed using the Product Add-ons extension and Composite Products extension?

    1. Hi Jason,
      Thank-you for your comment. In essence, since designing a complete product, is basically just selecting components which will form the eventual product, it is similar to how the Composite Products Extension works. For example, to create a custom shirt, we pick each component; the collar, sleeve, the pockets, buttons, etc. The effort has to be invested in creating the eventual interface for the user. Instead of simple drop-down options, we have to provide a drag-drop interface, with a product preview.

      1. OK I see! A potential client wants similar to the above (not t shirts) but for signs with a user interface to give a bespoke design that his customers see as they go along, it gets more complicated with fonts, letters, sign size etc etc.

        There are a few products out there aligned with magento but they are astronomical prices, and given that they’d still need to be tailored to fit specific product criteria the costs for this start up client become out of reach.

        I’d love to see a woocommerce plugin like this that all we’d have to do is a bit of tinkering with prices variables and css etc. There are one or two on envato but not sure they would be thorough enough

        I think I have to concede as it stands this project is well above my pay grade.

        Get working on that plugin Sumit ha ha

  2. Sumit or Jason – I’m looking for something exactly like the shirt product builder – step by step, chooses different parts of the product (e.g. collar, pockets etc).

    Is there a plugin that can do this? I see that shopify has the product builder – http://apps.shopify.com/product-builder

    But I would like something that I can purchase up front, and use with woocommerce?

    Any ideas? It would be greatly appreciated!

    1. Hi Will,

      Unfortunately, there isn’t such a plugin for WooCommerce. You will need a custom solution for something like this.

  3. i want same extension which have u describe in SHIRT PICT “Example of Product Builder” so from where can i get this plugin ?

    1. Hi KP,
      There isn’t such a plugin available on WordPress. To provide this functionality, you will need a custom solution.

  4. I am looking for something simular I make custom controllers for PLAYSTATION4 I need to start with a basic controller , then add buttons , thumb sticks , paint colour , add txt, is this possible for use with opencart

    1. Hi Keith,

      The Product Builder as a concept, could work with any e-Commerce platform. Although I haven’t investigated OpenCart much. Are you looking specifically for a solution on OpenCart or would be okay with a solution on WordPress with WooCommerce?

  5. I am looking for a custom product builder for a WordPress site with WooCommerce, specifically for custom knitted hats and scarves that would feature uploaded logos and text. I am new to WordPress so any advice would be greatly appreciated.

    1. Hi Jeff,
      If you are looking to customize an existing product on sale, you’re looking to integrate a Product Designer. For example, if you have hats and scarves, but just want to allow visitors to add a logo and maybe some images or text, you need a Product Designer. In this case you can select an existing plugin, or contact a developer to help you out.

      If you want to allow your store visitors to create their own hats, you would need a custom Product Builder. Using a Product Builder, your store visitors can ‘build’ their own hats. Like select the shape, then the color, and then add-ons, to create their own custom product. Currently there isn’t a product builder plugin readily available for WooCommerce.

  6. WOndering if you have a solution for bulk shirts in relation to size. I have dynamic pricing so i can set bulk discounts but am stuck on how they can split the sizes within that. For ex if they order 25 shirts and want 10 large, 10 medium and 5 2xl..

  7. Yeah I’ve used that plugin one month ago to build sunglasses for a customer. It’s a WordPress plugin.

  8. Can anyone help me on this …

    If I create a T-shirt with 3 different layers … Logo / Background Image / Individual Name

    Is it possible to add data from other source like XML or XLS or CSV file containing Individual’s Names to be printed on T- shirt and create multiple products automatically as according to the data entered.

    Out of 3 layers only 1 layer (Name) needs to be changed again n again for every T-Shirt, now instead of creating 100 orders for 100 T-shirts. I want single order but with different values (Name) (1 out of 3 layers).

    Is this possible.

    1. Vikas, your question is quite broad at the moment. Could you help me with some more details?
      For instance do you have any particular plugin in mind to start with?

      Whether you will be able to achieve the the functionality you have specified depends on the plugin you will be using and it’s architecture. Based on my experience your requirement should be possible. What I cannot tell you though is the timeline to achieve something like that.

  9. I want hire someone who can do this for my business, i have some special attribut and paramater need to show and other to put off. there is any one can help me with this issue.

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads