FPD Plugin for Beginners.

How to Use Fancy Product Designer – Step By Step

How to Use Fancy Product Designer – FPD Plugin

Fancy Product Designer for WooCommerce WordPress is a powerful tool that allows us to set up online product customization features for our e-commerce websites. The customers can do customizations they want to do, at the same time customers can see the product customizations they are doing or how it looks. Here we have the easy tips for the FPD Plugin for Beginners.

The Fancy product designer is available for different platforms such as WooCommerce, Shopify, jQuery. But here we are going to guide you with WooCommerce. We will try to explain it as easily as possible. Our guide of FPD Plugin for Beginners would be helpful for all.

Fancy Product Designer – Table

Step 1: (Plugin Installations)

The first step you need to buy the Fancy product designer WooCommerce WordPress Plugin. After having the FPD plugin there are two methods to install the plugin

Fancy product designer – Methods

Method 1: 

1- The first method to install the plugin is simply to go to wp-admin or dashboard under the plugins click on add new

 

How to install Fancy product Designer WooCommerce Wordpress Plugin - FPD Plugin for Beginners.

 

2- This tab will appear after clicking add a new plugin. You need to upload a zip file of the fancy product designer plugin and install the plugin.

 

How to install Fancy product Designer WooCommerce Wordpress Plugin

 

3- After the plugin is successfully installed go to Plugins > installed plugins and activate it.

 

Fancy Product designer Plugin Activation

 

Method 2:

The second method, mostly used when we have issues with plugins installing in the wp dashboard. You need to login into hosting and go to cPanel> file manager

After clicking file manager you have to click public_html > wp-content > plugins

 

FPD Plugin installation - File Manager

 

The fancy product designer woocommerce wordpress plugin should be uploaded here.

 

How to install Fancy product Designer WooCommerce Wordpress Plugin method 2

 

Now extract the plugin files in /public_html/wp-content/plugins or in the same folder.

 

How to install Fancy product Designer WooCommerce Wordpress Plugin method 2

 

After the plugin is successfully installed in the cPanel go back to wp-admin or dashboard Plugins > installed plugins and activate it.

 

How to install Fancy product Designer WooCommerce Wordpress Plugin method 2

 

Step 2: (Add Product to FPD)

Almost all kinds of products can work with the FPD Plugin. It’s up to you what type of product you want to set up. We will add a customizable T-shirt with a fancy product designer plugin for you.

Before we start, you must create the right images that work in FPD. Here is the Guide.

1- Click on the product under the fancy product designer tool.

 

How to add products in Fancy Product designer woocommerce wordpress

 

2- Now add a new product and enter a product title.

 

How to add products in Fancy Product designer woocommerce wordpress

 

3- Now add product views such as front and back. Repeat the same step for other views like the left and right side views of the product. But here we will add only front and back.

 

How to add products in Product designer woocommerce wordpress 03

 

Step 3: (Setup Product in FPD Product Builder)

1- We are about to set up products in a fancy product designer product builder. As we can see there are front and back sides for the t-shirt. Click here to edit the view in the product builder.

 

set up products in fancy product designer product builder

 

2- Here is the most important part of the product with a fancy product designer product builder. Select the product view you want to edit. You need to have the images as a Base and Overly layer.

 

Set up products in product builder

 

3- If you want to allow customers to change the color of the t-shirt. Select the base layer. Open the toggle sidebar and enable the colorization by adding an HTML color code for the t-shirt.

Bounding box or printing area: 

You can restrict the customer to do customization in specific areas of the product.

How to use Bounding Boxes in Fancy Product Designer

 

Enabling color picker for FPD plugin

 

4- Linking color between elements in fancy product designer for products is also a very important thing. This feature will allow customers to change product color for the front and back sides at the same time. For example, a customer changes the front side color using a color picker feature the backside view color will automatically change. You have to create a code as we are doing below, copy the code, and add it to the back view base image.


NOTE:
Once you added code to the back view base image then no need to add HTML color code.

 

Linking color between elements in FPD plugin

Step 4: (Attach Customizable products with Woocommerce)

The final and easy step is linking the fancy product designer products to woocommerce. But sometimes it becomes difficult if you are using the plugin for the first time.

Go to woocommerce and add a new product, you will see the fancy product designer product selection on the right side. Here you can select the customizable product to show for both desktop and mobile. That’s it!

 

Attach Customizable FPD products with Woocommerce