With the popularity of online stores growing rapidly, the introduction of customization tools has enhanced this experience and added an extra dimension to what you can buy (or sell).
Whether you run a retail store or any other kind of store, custom prints and designs can add that personal touch to your products that your customers are looking for.
These custom touches not only make the product more personal for the customer, but also add value to the item, increasing it’s cost and hence your profits.
One of WordPress’ leading plugins for e-commerce is certainly WooCommerce, and in this post I’ll be showing you an additional plugin that can add this customization capability to your WooCommerce products.
What this plugin does is add customization capabilities to your existing (or new) WooCommerce products.
It introduces a custom product builder into your WordPress admin that is then translated into a customization window on your product’s front-end.
So what does it offer?
First of all, Fancy Product Designer works on any WooCommerce product you might have, no matter what it is. It uses a simple layer technique whereby you can add any image you want in png, jpeg or even svg formats.
You can set general parameters or individual ones for every element, as well as offer your custom designs or let your customers upload their own.
There are plenty of options available with Fancy Product Designer, including the ability to add pictures from Facebook & Instagram.
All these capabilities, in addition to the fact that there is no need for any coding knowledge to get it to work, make this a very useful plugin that any custom product provider should consider.
Time to try it out
In order to test the plugin out for myself I set it up on my local server and added a plain white t-shirt that any customer might want to customize. For this example I’ve added a WordPress logo, WP Mayor logo and some text options.
Now, before we start there are a few requirements worth mentioning from the documentation:
- Of course the official WooCommerce plugin needs to be installed and activated.
- Do not change the original directory name of WooCommerce, it needs to be “woocommerce”, otherwise the plugin will not be able to find it.
- It only works with images that are hosted under the same domain and protocol in which you are running the product designer.
The installation process is easy. Just download the files you’re sent with your purchase, upload them through the Plugins section on your WordPress dashboard and hit activate.
You’ll now see that in the Settings section of the WooCommerce tab there is a new tab called Fancy Product Designer. Besides this, under the Products tab in the sidebar you’ll also find two new options; Fancy Products and Fancy Designs.
We’ll be looking at all these more closely as we go along.
Fancy Product Designer Settings
So, first up let’s have a look at the settings on offer for Fancy Product Designer. You’ll find these in the WooCommerce Settings page under their own tab. You can have a look at my setup below.
From here you’ve got the option to modify any setting you want, be it for the Layout & Skin, Colours, Menu Bar, Product Page or other Miscellaneous bits and pieces.
Starting with the layout and skin, you’re free to change the theme as well as size of the product stage and sidebar besides the location of where they’ll appear.
Under colours you can change selection and boundary colours to match your theme, then in the menu bar section you can choose what options you want to give your customers.
Product page determines how and where your product customizer will appear, be it in place of the product image or using a custom hook provided by Fancy Product Designer.
Finally under miscellaneous you can play around with other options such as adding a Facebook or Instagram ID and setting hexadecimal colour names and “Start Customizing” buttons.
There is also a Debug Mode option which when enabled will show a pop up whenever you open a page on the front-end, showing you what might be going wrong or what might be missing. It works great and really helps shorten the time-frame for solving any issues.
Editing a Product
Now that we’ve chosen the settings we want, we can head to our first Product. I have a plain white t-shirt in my products section that I want to add customizable logo and text to.
If we hit Edit Product we’re going to see a new option in Product Data called Fancy Product. Tick that. Now head to the Fancy Product tab underneath it and from here we can not only add views for the product but also change the settings and import or export any views.
The Fancy Product Builder
Once that’s done we can hit Edit Elements or go directly to the Fancy Products section under Products in the sidebar. From here we will be selecting the view we want to customize and adding any elements we want to it.
You’ve got a Manage Elements section where you’ll add the elements or text that you want and beneath that is where you set the parameters for every element. These parameters will determine the location and behaviour of the element on the front-end.
You cans et anything from it’s position and scale to it’s bounding box and modification options. Each element can be locked within another element’s size, they can be set to be customizable in various ways, and text can have its font, styling and so on modified from here too.
Finally you have the Product Stage; how it will all look on the front end of your WordPress site. You can even manually move and re-size elements from here by just clicking and dragging. It’s sort of like editing an image on Photoshop.
Including Fancy Designs
What about the Fancy Designs? Well these have their own section under Products too. If you head to it you choose the category you want to add the designs to, add them, and even change their parameters.
These parameters can in turn be modified for the entire category or individually for each design using the settings logo on the image as seen in the screenshot below.
Paramaters & Options
Let’s have a look at these parameters in a bit more detail. The first thing you can set is the position of the elements on the x-axis, y-axis and z-axis, after which you choose their scale and colours.
You can even add a price for each element, so you give your customer an option to add a name to a t-shirt for an addition $2 for example. You can then set certain features such as whether the elements are dragable, rotatable, resizable and so on.
Finally you can set the bounding box for the elements. You can either customize this using positions, widths and heights or set one element as the bounding box for another. For example, a logo’s bounding box could be the t-shirt since that’s where the printing is limited to.
How it Looks & Functions on the Front-End
With all the back-end stuff done, let’s have a look at what it converts to on the front-end.
First of all, I chose the option of having a ‘Get Customizing’ button alongside the product in the Products page so the customer can see the initial product before customizing it.
Once the customer hits this button they’re taken to the Product Builder where they can easily customize whatever you would have set up. They’ll have all the options you chose earlier and the ability to edit one element at a time.
It’s all very easy to use and your customers will be able to create their own custom looks in no time. Once it’s added to the basket you might want to go back and make changes. This is as simple as clicking on the Edit button and it will automatically take you back to the product builder.
All that’s left now is for the customer to proceed to checkout as usual and the purchase of a new, unique and custom product is complete.
Documentation & Support
Fancy Product Designer offers plenty of documentation to get you started and guide you through setting up your first product designer. It’s very thorough and easy to understand, even for someone whose not very familiar with WooCommerce.
Support is very helpful and quick to respond. I had an issue with displaying the product designer on the front-end which turned out to be a simple typo in the hexadecimal colour settings. The support team got back to me in no time with a solution after just sending them one screenshot.
This is all great and an added bonus that every premium plugin should strive to have.
The plugin can be purchased from CodeCanyon on the Envato Market. There are two license options available:
- Regular License – $39
- Extended License – $195
There is so much you can customize and set with Fancy Product Designer for WooCommerce that you’re spoilt for choice. At first it might be overwhelming, especially if you’re still rather new to WooCommerce, but with the documentation and support on offer you’ll be on track in no time.
Once you get the hang of it, you can create some awesome looking customizable products that would otherwise only be available from a physical shop.
If you’re looking to add extra features to your e-commerce site or your products all need to be customizable, then Fancy Product Designer can do the job for you.
Have you used such a plugin before? What were your experiences with them in the real world? Any particular reactions from customers? We’d love to hear what you have to say so leave a comment below.