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 the 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 its 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, 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.
Using Fancy Product Designer
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 can buy Fancy Product Designer here.
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 the size of the product stage and sidebar beside the location of where they’ll appear.
Under colors you can change the selection and boundary colors 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 color 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 a 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 then add 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 behavior of the element on the front end.
You can set anything from its position and scale to its 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 colors.
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 additional $2 for example. You can then set certain features such as whether the elements are draggable, 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.
Purchase Fancy Product Designer
The plugin can be purchased from CodeCanyon on the Envato Market.
There are two license options available:
- Regular License – $69
- Extended License – $295
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.