How to Use the Fancy Product Designer to Overhaul Your WooCommerce Website

Last Updated on May 16, 2024 by 10 Comments

Editorial Note: We may earn a commission when you visit links on our website.
How to Use the Fancy Product Designer to Overhaul Your WooCommerce Website
Blog / Tips & Tricks / How to Use the Fancy Product Designer to Overhaul Your WooCommerce Website

One of the most important elements for any online store are its product pages. There are a multitude of aspects that can affect how many sales you make, including which images you use, your page’s layout, and more. To build WooCommerce product pages that sell, you need to use all of the tools at your disposal.

WooCommerce packs a lot of product customization features out of the box, but it can be improved upon. In this article, we’ll talk about the importance of excellent product pages and teach you how to introduce advanced customization options using the Fancy Product Designer plugin. Let’s get to work!

How Your Product Pages Influence Conversions

An example of a product page.

The better your product pages are the more they’ll draw visitors in.

Most people judge online products not only by the features they offer and their prices, but also by how professional their individual pages look. With this in mind, let’s break down some of the elements that can influence conversions in your product pages:

  • Your product images. High-quality images from multiple angles can mean the difference between an extra sale or a visitor closing your product’s tab instantly.
  • Your Call To Action (CTA). This is a complex elements to master, but their influence in conversion rates is undeniable. If you’re ever in a sales slump and you’ve tried anything else, tweaking your CTA’s text, style, and layout may be the ticket to more sales.
  • Product reviews. This one is fairly straightforward. Online shoppers tend to be very picky, and they’ll often compare products based on reviews. The better your product reviews are, the more sales you might get.
  • Product customization options. In a lot of cases, people like to customize the products they order, be it for gifts or for personal use.

Aside from those elements, you’ll also want to use a product page layout that looks great on both mobile and desktop browsers. Plus, there’s also the base information every product page should include, such as the item’s name, a description, its price, and more.

To be clear – WooCommerce enables you to add all those elements and more to your product pages. However, it doesn’t enable you to implement advanced product customization, which is where our next tool comes in.

Introducing the Fancy Product Designer

The Fancy Product Designer homepage.

If you’ve ever used an online store that enables you to customize the product before purchase, you’ll know it can be very fun. The Fancy Product Designer extension takes this concept and kicks it up a notch. It provides you with the tools you need to give users a visual customizer, so they can tweak the aspects you allow. Check out this example of the product designer in action:

The Fancy Product Designer in action.

That’s a full-blown visual editor customers can use to create a custom wine bottle. It supports multiple layers, color changes, text editing, and more. To be clear, you still have to add new products to your store using WooCommerce, which handles the sales end of the entire process.

However, once you enable the Fancy Product Designer plugin, you can add advanced customization options for any of those items. It’s not going to be viable for a lot of them, but it’s still a fantastic way to add some interactivity to select products and make more sales.

Plus, you can change the way the Fancy Product Designer visual editor looks from the front end and create basic templates users can choose from for each item. That way, they won’t have to spend time playing with the editor if they don’t want to.

Key Features:

  • Enable your visitors to customize your WooCommerce items before making a purchase.
  • Add customization options to select products.
  • Use a front-end visual editor with advanced capabilities to customize each item.
  • Change the way your visual editor looks by choosing from multiple templates.

Price: $49 per license | More Information

How to Use the Fancy Product Designer to Customize Your WooCommerce Products (In 3 Steps)

Despite its breadth of features, the Fancy Product Designer is very simple to set up. Better yet, it doesn’t require any additional configuration out of the box since its default settings are perfect for everyday use. With that in mind, let’s jump right into the thick of things and get to know the plugin’s Product Designer tool.

Step #1: Learn to Use the Fancy Product Designer

The Fancy Product Designer extension includes a few dummy products out of the box so you can see it in action right away. To access them, go to the Fancy Product Designer > Products tab on your dashboard:

Your products tab.

Inside, you’ll find a handful of example products. As soon as you become familiar with the Product Designer, you can delete them. For now, click on the Shirt item, and you’ll see a menu with two items appear below it:

Your shirt view options.

This particular item enables you to make customizations to its front and back. If you click on the Edit View in Product Builder button, you’ll be able to edit the item’s starting state using a visual builder:

Editing your product views.

First off, we’ve got the Layers section. Here, you can add new images and text for users to apply to their designs, in case they don’t want to use their own. You can have as many elements as you want here, so go nuts – just remember to add them in order, as you would with regular layers. To see your elements in action, you need to scroll down until you reach the visual editor:

Your canvas section.

Here, you can see what your elements look like in the order you added them. You can drag and drop elements within the Layers section to tweak what your shirt looks like. For example, here we deleted the entire Shirt element:

Your updated canvas.

When you’re happy with what your product looks like, scroll back up and click on the Save button. Now when a potential client loads that item through your store, your design will show up as their starting point:

Your product as seen from the front end.

They can, of course, customize the design as much as they want. However, you should always strive to offer a decent starting point for users who don’t want to tweak things too much.

Step #2: Configure Your User Interface (UI) and Product Layout

By now, you’ve already seen the Fancy Product Designer’s front end customizer in action. Its default style works great in most cases, but you can change it if you don’t think it fits with your website. To do so, go to the Fancy Product Designer > UI & Layout Customizer. Inside, you’ll see a Preview section showcasing what your layout currently looks like:

A preview of your layout.

Below, there are several options to choose from to modify your designer’s top bar location:

Changing the location of your main bar.

Changing this setting won’t affect your customizer’s functionality, so feel free to pick whichever one you prefer. In any case, you can also change the size of the designer’s canvas:

Changing the size of your canvas.

Ideally, it should be large enough that users don’t feel cramped. In addition, you can choose any resolution you want since the plugin ensures the canvas remains responsive either way. Finally, if you jump over to the Actions tab, you’ll see a small preview of all the buttons included in your designer:

Your designer's buttons.

You can add or remove buttons as you want from a list to the right, though the default layout design already includes the more useful options, which makes your life a lot easier. In any case, when you’re done making changes to your layout, scroll back up. At the top of the screen, you’ll see the option to either save your design under a new template or overwrite your default one:

The actions available for your layout.

There’s also an option to return everything to its initial state, so you can’t go wrong any way you choose.

Step #3: Manage Your Products

Adding new customizable products to your store is simple. The first thing you need to do is go to the Fancy Product Store > Products tab and click on the Add New button:

Adding a new customizable product to your store.

Now choose a name for your item, then create a default view using the New View button to the right of its name:

Adding a view to your new item.

When you have a default design ready to go, it’s time to move over to the Products > Add New tab. Once you’re in, add the details for your customizable item as if it were any other WooCommerce product:

Creating a new WooCommerce product.

After you take care of the basics, look for the Fancy Product Designer widget to the right of the WordPress editor. Choose the Product setting under Source Type and pick the product you created a moment ago from the list below:

Linking your product views.

Now you can save your product as a draft or publish it right away. All that’s left now is to wait for those new orders to come in and get to work on handling them.


A few small changes to your product pages can make a big difference when it comes to your conversion rates. WooCommerce offers a lot of default customization, but that doesn’t mean you can’t improve upon it. With the right tools, you can turn your WooCommerce product pages into works of art.

As far as WooCommerce extensions go, we’re partial to the Fancy Product Designer due to all the improvements it enables you to make. Here’s how to get started with it:

  1. Learn to use the Fancy Product Builder tool.
  2. Configure your UI and product layout.
  3. Manage your products.

Do you have any questions about how to improve your WooCommerce product pages using the Fancy Product Builder? Ask away in the comments section below!

Article thumbnail image by Iconic Bestiary /


Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Premade Layouts

Check Out These Related Posts

Splice Video Editor: An Overview and Review

Splice Video Editor: An Overview and Review

Updated on March 10, 2023 in Tips & Tricks

Video is a valuable form of content for social media. Unfortunately, creating quality videos is usually a long process that involves moving mobile footage to a desktop app for editing. However, mobile editing is on the rise. Apps such as Splice Video Editor make it possible to efficiently create...

View Full Post
How to Use Font Awesome On Your WordPress Website

How to Use Font Awesome On Your WordPress Website

Updated on September 16, 2022 in Tips & Tricks

When given the choice between using a vector icon or a static image, it’s a good idea to go with the vector. They’re small and fast to load, and they can scale to any size without a loss of resolution. Font Awesome is a superb library of vector icons that you can use on your websites,...

View Full Post


  1. Good Day. I am struggling as a beginner to load new products for Fancy Product Designer plugin for WordPress Divi. Any suggestions on the best themes for Divi. I have a life long license for Divi & Elegant Themes. I am also struggling getting tutorials on how to load new products for a website I am building for a company selling customizable cellphone cover. Do you know besides the best theme to use, where I can get more tutorials builing new cellphone template for a variety of models? Any advice or tips would be highly appreciated. Ben

  2. Good post bro, i will try, thanks for information.

    • No problem Gilby. Glad you found it helpful 🙂

  3. And why can’t Divi do this? I’ll pay extra to not have another plugin.

    • Hello Mulyadi. If you have any ideas for implementing a Divi e-commerce feature, we’d like to hear about it. Post your idea on the Theme Suggestions section on our Support Forum.

  4. Looks fancy John! Just trying out woo injector layout for making product pages look good.So important to make your product visually appealing.

  5. Very Useful information for us. I always visit your site and read articles on your site. Thanks

    • You’re very welcome 🙂

  6. I strongly agree, product visualization is very big influence on sales. That is why we should pay attention to this section.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi