[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]

Lately at WisdmLabs we have been doing a lot of research on customizing products and I have been enamoured to say the least with all the different ways a product can be customized. What is more interesting is the unique approach that each type of customization requires.

FlashBack

Last week I did an article on personalizing products by imposing images and text on it. Here the basic idea that was followed was any product can be personalized by adding images and text to it. The images and text should be restricted to the print area defined by the website administrator. So, for example, if an organization wishes to have customized t-shirts made for each employee with its logo on it, then the logo should be within the print area defined for a particular view of the t-shirt that has been selected. By this logic, an array of a product can be personalized. Mugs, t-shirts, diaries, mobile covers, bags are a few examples of products that can be personalized using this method. This personalization engine solution was postulated as an extension to WooCommerce.

Just as I was working on the last bits of the above-mentioned article I chanced upon ReminderBand – a website which essentially deals with customizing wristbands. While the solution I had hypothesized would definitely work for this scenario, I soon realized it was not the best solution for it. Here, the website comprised of only one primary product that had to be customized, i.e. a wristband. Additionally, the print area involved is very small, hence there should not be a need for much variation in placing the objects. So, we could develop an extension to WooCommerce which is more suitable for this specific requirement and thus the investigation began. A detailed explanation of the outcome is encompassed in the subsequent sections of the article.

However, before I go on to the explanation the one important thing to note is that while I have used the example of wristbands for demonstration purposes, the application of this solution is not restricted to it. Products like ties and shoes can be customized similarly.

The User Interface

This section mainly entails the user interaction with the system. I will try and explain the various features which can be provided to the user and how the user will be using the system.

Choose a type of band

• The user should be allowed to select a type of base product which the user wants to customize. In this case, the wristbands are a base product. The user can select a particular type of band from the available wristbands.

Choose Band Color

• The user should be provided with a feature to select the color of the product that has to be customized. If the product is available in more than one color the user should be provided with an option to change the various colors of the product. So, if a band is available in three colors there should be an option available to change the three colours individually.

Text to be Printed

• There should be an option to enter the text that needs to be printed on a particular specified area of the product. In the case of a WristBand the the print area is in the front side and the backside.

• There should also be an option to select a font for the text that needs to be printed on the wristband.

• The user should be able to choose a color for the text that has to be printed.

Add Graphics to the Product

The user should also be provided with an option to add graphics to pre-specified areas on the product that has to be customized. The graphics that will be added to a product can be chosen from the inventory of graphics that are already available on the website. The user could also be provided with an option to change the color of the graphics or the the color of the graphics can be kept same as the text color.                                                                 

Additional Notes Section

• A notes section can be provided as an additional section. In this section the user will be allowed to furnish details that he/she has not been able to provide earlier.

Checkout

• Once the user has added the products that need to be bought into the cart, the cart will display the product along with the various customization details, quantity and the amount to be paid by the user.
• The user can then checkout from the page and proceed to the payment section. Once the payment has been made the order is placed. A confirmation email containing the order details is then sent to the website user as well as the vendor.

 

The WordPress Dashboard

Up until this point we saw how a user will interact with the product customizer. Now I will illustrate the features that will be provided to a website administrator to ensure a smooth functioning of the system. WooCommerce will be customized to provide these features to the user.

Upload Product Image

• The website administrator will have to upload an image of each type of product to the shop page of WooCommerce. So while the website has one primary product, there will be many different types of the primary product. So, one image of each type should be uploaded to the WooCommerce product page.
  • For every product that is uploaded to the shop, the website administrator will be able to select if the product can be customized or not.
• For every product that can be customized the website administrator should be able to

1. 1.  Select the number of colors in the product.
   2. Select if graphics can be added to the product.
   3. Choose the product views which can be customized.

   User interface rendered to a website visitor will be based on these selections.

Upload Graphics

• The website administrator will be provided with an option to upload the graphics that will be applied to a product. There will be a pre-specified size for the graphics which has to be adhered to by the website administrator.

Retrieve Order

• The vendor will be able to retrieve the details of an order that has been placed from the order section of WooCommerce. Here all the order details such as text to be added, font style, font size etc which have been provided in an order by a particular user can be viewed.

The Development

User Interface

• The User Interface should be designed according to the product’s requirements. Also, it should be made dynamic according to selections made by the user. In this case for example if the user has selected a 3 coloured band then the user should be provided with three separate selection options to choose the three colors in the band.

User Text Specification

• The number of characters that can be added as text should be defined at the time of development. Adding such a constraint will ensure that the text provided by a user does not exceed the print area of the product.

Add Font Styles

• Various font styles should be added to the system. This font styles can then be used by the customer to change the font of the text that has been added to the product.

Add Colors

• One more feature that should be handled at time of development is the addition of colors to the system. By this I mean the developer should add a mechanism by which the user can change the product color, text color and graphic color by choosing from the list of colors that have been made available at development time.

Define Customization Area

• One absolutely important thing that should be defined at the time of development of the system is the print area.
• Also, this area will not be editable by the user directly. It will change according to the selections made by the user from the various user interface options that have been discussed above.
• The user will not be allowed to change the position of the objects that have been added to the image. In this scenario for example if the user adds his name to the front view of the band then this will be placed in the pre-specified area of the band. The user will not be able to re-position this object.

Additional Costs

• The website vendor should be provided with a functionality to apply additional costs for various customization. This feature can be provided according to the vendor requirement.

Display Customization Details in Cart and Order

• All the customization details that have been provided by the user should be displayed in the WooCommerce cart and final order. This can be done by adding custom data to WooCommerce sessions.

In a Nutshell

The solution proposed in my post on product personalizer works better than best for a website that wants to customize various products with a larger print area. However, the moment a product customization requirement gets as specific as the wristband example it’s time for the solution to become more specific too. If the above solution is used in a website which  deals with only one primary product then it makes a sizeable difference in the performance of the website. This is because the number of images that the website will need to deal with will be fewer. Furthermore it is easier to manage the customization of a product like wristband, neck tie, key chain which essentially has a small print area.

Customization methods can be aplenty and so will be their solutions. And right now I’m in a “customize products using WooCommerce” zone so you can expect more posts on this with variations. If you are curious about custom products instead of product customizer then our post on product builder is something that might interest you. If, our variations don’t match your requirement then reach to us at WisdmLabs and our talented team of developers will spool out a solution for you.

Until then, Adios!