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
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.
3- After the plugin is successfully installed go to Plugins > installed plugins and activate it.
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
The fancy product designer woocommerce wordpress plugin should be uploaded here.
Now extract the plugin files in /public_html/wp-content/plugins or in the same folder.
After the plugin is successfully installed in the cPanel go back to wp-admin or dashboard Plugins > installed plugins and activate it.
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.
2- Now add a new product and enter a product title.
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.
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.
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.
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
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.
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!
