How to Create a WooCommerce Product Personalizer in WordPress

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

Personalization has become an integral aspect in creating a brand. In this day and age something as small a burger to something as big as a car can be personalized. So, while the physical world has become all about personalization the web world should not be left far behind. Consumers want the power to personalize every aspect of a product they buy through the click of a mouse. So, if that’s what the consumers want, that’s what they should get, because customer is king!!! There can be umpteen scenarios where personalization can be applied on the web. However, the one example that comes to my mind instantly is a Product Personalizer on the web and hence I’m going to propose a solution for it. WooCommerce is one of the best e-commerce plugins around and is being used largely. So, I am going to suggest a solution which includes customizing WooCommerce to incorporate the product personalizer.

So what exactly is a Product Personalizer??

A product personalizer capacitates the visitors of your website to personalize the products on your website according to their requirements. Personalizing a product would include adding an image, text or similar paid add-ons to a base product. The user is charged for every add-on that he applies to the base product. However, an add-on cannot be bought by itself, it can only be bought with the base product that is being personalized.

Spreadshirt is a good example of a product personalizer. It allows you to customize various products from their shop. So, for example if  an organization wishes to have customized t-shirts made for each employee with the logo of the organization on it then a Product Personalizer would come in to be very useful. Here the t-shirt will be treated a s a base product and the organization’s logo as an add-on. Similarly, various other products like mugs, diaries, pens etc can be customized by adding text or images to it.  A website can either be set up to essentially be a personalized product website or it can have a regular shop along with an option to create a personalized product.

Product Personalizer: Website Visitor View

In this section, I am essentially going to discuss how a website visitor will interact with a product personalizer.

Click ‘Personalize Product’ Option

• Once a visitor has selected the option to personalize a product, a product designer page should be provided to the user. This page should primarily have a design area and various options which will help in personalizing the product.

Select Base Product

• The most essential step in personalizing a WooCommerce product is selecting a base product. This can be done by providing the user with an option to ‘Select a Product’. The WooCommerce shop page should be displayed as a pop-up on selecting this option. The user can then select a base product from the shop page.

Load Product on Design Page 

• Once the base product has been selected from the WooCommerce shop the product image should load on the design page. The user should be provided with multiple views of the base product. For example, if a t-shirt has been selected the user will be provided with a front view, back view and side view of the product. Also, if the base product selected by the user is available in color variations then there should be an option available to change the color of the product.

Personalize Product

• After the user has selected a base product that product can be personalized to add images or text on it. Users should be able to select an image from the images provided as add-ons or the users can upload an image of their choice. There should be an option to reposition the image within the print area, an option to resize the image and an option to rotate the image. Additionally, if the user is not satisfied with the image an option should be provided to delete the image. The user could also be provided with an option to change the color of the images which have been selected from the add-on panel.

• Users should also be able to add their own text within the print area. Functionalities such as ‘reposition’, ‘resize’ and ‘rotate’ should be provided for text area too. There should be a  ‘delete’ option for text area just like with images. The user could also be provided with some advanced text formatting features to choose the font style, font size, font alignment and font color.

• Furthermore,  the user could be provided with the following buttons for better user experience.

1. ‘Undo’ and ‘Redo’ buttons to go back to a previous editing state.
2. A ‘New’ button to start a completely new personalization with a different product
3. A ‘Clear’ button to clear all objects on the current WooCommerce product and start designing again.

Checkout

• When the user has personalized a product and has proceeded to the WooCommerce checkout page then all the views of the personalized product should be displayed to the user in the shopping cart. Also, these images should be sent to the user along with the confirmation mail after the order has been placed.

Product Personalizer: Website Admin View

In order to set up a shop like the one described above the website admin i.e, the vendor can use WooCommerce which will be customized for the vendor in order to incorporate the product personalizer.

Add Base Product

• The vendor has to then set up a WooCommerce shop of all the products that have to be sold. While setting up a shop the user can define details concerning the price of the product, shipping details for the product, product images etc.
• Also different views of the same product should be added so that a visitor can decide which view of the product he wants to personalize.

Set Up an Inventory of Add-on Images

• The vendor will also have to set up an inventory of the add-on images that will be used while personalizing a product. These images can be categorized under various sections like funny, cars, music etc in order to make it easier for a visitor to search for images according to his requirements and enhance the user experience on the website. The vendor will also have to specify the price and a code for each add-on. The code need not necessarily be displayed to the user. This will be mainly used to identify an add-on when an order is placed

Define Print Area

• The vendor will also have to define a print area for each product in every view. The user will then be able to make the personalizations only in the designated print area. This is necessary as the customer should not personalize the product outside its scope.

Retrieve an 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 views of the personalized product will be available for the vendor. These images will be the same as those which have been sent to the user in the confirmation mail. The order will contain all the specifications of the personalized product along with the images.

Product Personalizer: Developer View

I have explained until now how the product personalizer in WooCommerce will be used by a website visitor and the vendor/ website admin. However, this I have done assuming the system has been built. In this section, I am going to give an overview of how the system needs to be built and all the aspects that need to be considered.

User Interface

• Product personalizer needs to be designed in such a way that the user interface should primarily include the following items when the user chooses to personalize a product:

1. 1. A Design area in which the product image will be loaded.
   2. A navigation menu to navigate through the different views of the product
   3. A button to choose a product.
   4. A button to choose a design.
   5. A button to add text to the product.

I have included a screenshot of a similar screen at the beginning of this post.

• If the user adds an image or text to the product it should be checked if the image is within the printing area of the present view of the product. If it is not in the printing area a message should be displayed notifying the user about the same.

  

•  If an image has been uploaded by the user, the user should not be allowed to increase the size of the image by resizing it. This should be done as the quality of the image could reduce if the size is increased. The user should be notified the same with an error message if  the size of the image has been increased.

 

Creating an Order

• The following should be added as metadata to the WooCommerce order items:

1. 1. The dimensions of the image with respect to the printing area.
   2. The angle of rotation of the image with respect to the printing area.
   3. The code and color of an image that has been added from the add-ons provided by the vendor.
   4. If the text has been added to a product then the dimensions of the text area with respect to the printing area.
   5. The angle of rotation of the text area with respect to the printing area.
   6. The color of the text, the alignment of the text, the font size, and the font style.
   7. A variable which stores data indicating that the product has been personalized.

• When the user has placed the order all the views of the product should be saved into the database along with the metadata. This data should be made available to the vendor in the order section of WooCommerce.

In the above postulated-solution we are primarily imposing images and text on a particular product. However, this is only one of the many ways that a product can be personalized. So, if this is the product personalization engine that you are looking for then reach out to us at WisdmLabs. Your requirement doesn’t exactly match our solution?? No issues! Just give us your requirement and our creative team of developers will churn out a solution to match it.