• Send the print file to a webhook for automation (Zapier Demo)

  A webhook is a method for one application to provide real-time information to another application via a simple HTTP callback. You have the option to input a webhook URL in the Pro Export settings. Upon creation of an order, the print file will be transmitted as JSON to this webhook, accompanied by the respective order and item IDs. This facilitates the possibility of addSome readers

• How to enable and use Multistep Product Configurator with Fancy Product Designer

  Want your product images to dynamically change as users select different variations? You can use the Multistep Product Configurator (MSPC) plugin to do this with WooCommerce as well as Fancy Product Designer. Below is the process that will enable this feature for your WooCommerce shop. You can also watch this YouTube video to see the step-by-step process in real time. __Note: If you haven’t created your product in Fancy ProduSome readers

• Troubleshooting Pricing Rules

  This article helps you troubleshoot pricing rules in Fancy Product Designer. If your prices aren’t behaving as expected, this guide will help you find common issues and fix them quickly. "My Pricing Rules Are Not Getting Applied at All" The most common reason pricing rules don’t apply is that they haven’t been assigned to any product. There are two ways to apply pricing rules to products: Globally – This applies the pricing rules to all products. You can set this under: __FancySome readers

• Using the debug mode to inspect any missing hooks in WooCommerce product pages

  If any of the required hooks or filters are missing in your theme, first try to fix it yourself with the information in this documentation. Debug Mode The plugin comes with a helpful debugger to inspect any theme-related issues with the plugin. Go to the Advanced settings of Fancy Product Designer, click on Troubleshooting, here you can enable the "Debug Mode". After that go to a product page with “Fancy Product Designer” enabled. A modal window comes up with information abouSome readers

• Using Bounding Boxes to restrict elements

  Defining a bounding box Bounding boxes can only be rectangular. There are 2 ways of defining a bounding box: Setting the x,y positions as well as width and height of a bounding box manually Using another image element as bounding box. For this you only need to set the title of an image element as bounding box value for another element. Mode You can set different bounding box mode: Inside: The element needs toSome readers

• Introduction to Multistep Product Configurator (MSPC)

  Multistep Product Configurator (MSPC) for WooCommerce  is a plugin that can help enhance variable products. It’s not only compatible with WooCommerce, but it also works with Fancy Product Designer. When activated, this plugin allows you to add multiple steps or variant selections to yoSome readers

• NinjaFirewall stops product adding to cart

  disable the following option in the NinjaFirewall settings - Decode Base64-encoded POST variable If you are experienced with development then you can whitelist the action in the  .htninja file If you have no development experience then you can buy the NinjaFirewall Premium variant, where you can then whitelist the function yourself.Some readers

• Install and setup 3D models for 3D preview

  Install via 3D Model Manager (only for Premium plan in Genius) When subscribing to the Premium plan of Genius, you can easily install the desired 3D models via the 3D Model Manager in Settings > 3D Preview. Installing 3D model via FTP (one-time purchase) After purchasing one of our premade models, you will receive a zip archive. Just unzip this zip and uplSome readers

• How to Use Template Library

  In the Fancy Product Designer plugin, we offer a Premium Template Library to help you get started with your products without needing to build everything from scratch. You can use the template library in two ways: Using Genius Premium (Easy) The template library is exclusively available with the Genius PREMIUM Plan. Once you’ve purchased this plan, and apply your Genius license, the template library will be directly accessible through the "Template Library" button when creating a proSome readers

• Introduction

  Via Element Options you are able to control the properties and behavior for every element separately. The plugin allows to set plenty of options like position, scale, price, colors and much more. You can define these options in different areas of the plugin. Set default element options in the settings Under Settings you can set the default element options. Image Options: The default options that will be used for all [Fancy Designs](https://support.fancyproductdesigner.coSome readers

• Designs

  The designs module displays all Fancy Designs that you enabled for a Product Designer. Create a category First of all you need to create a category, just click on Fancy Product Designer/Designs/Manage Categories and Add New Category. Enter a category title Optional: you can set a thumbnail for the category, which will be displayed in the Designs module Optional: If you want to create multi-level categories, crSome readers

• Controlling the allowed addable media types in views

  You can easily control which media types can be added in the views of your Fancy Product. Go to Fancy Products → Edit View in Product Builder → View Options **** Here you can disable the different allowed addable media typesSome readers

• The UI in the backend is messed up (Conflict)

  Does your product page look like this? When your theme has a customiser built with Bootstrap, often the template files are loaded on every single page in admin. So bootstrap is conflicting with our react.js that is used for administering to the products. To test if your theme is conflicting with our plugin, please change the theme (e.g. Storefront or one of the WordPressSome readers

• Using Bulk-Add Variations Form

  The Bulk-Add Variations Form is part of Fancy Product Designer Plus Add-On. Go to the Plus tab in the global or individual product settings, there you need to define the placement of the form. After that define the variations, first you define the name of the select dropdown e.g. Size followed by a "=", then you define the option values separated by "|", e.g. Size=M|L. If you want to add more select dropdowns, you need end a select group with ";". Example Size=M|L;Colors=BlueSome readers

• How to use Multistep Product Configurator with Page Builder (Elementor, etc)

  If you are using a page builder for the WooCommerce products page e.g. Elementor, you need to use the [mspc] shortcode to display the MSPC module in your product page. First select "Via Shortcode" in the Module Position option. After that use the shortcode [mspc] in a Shortcode element or Text element of your page builder.Some readers

• Names & Numbers module

  Add module Via modules tab in the UI & Layout Composer you can add the names & numbers module to the product designer. Define text or number placeholders You also need to enable a text element as placeholder for a text (name) and/or number in the product builder. For a number placeholder you can also define a range of allowed numbers. You can only define one text and oFew readers

• [Printful] Connect your Printful store with FPD

  Important Notes Stock availability  needs to be done manually. If you a receive an order item that is out of stock on Printful, you have to remove the connected variation for that item in your WooCommerce variable product. Our Printful integration does not run any process to check the availability status. Only DTG printing is currently supported. The imported variant price from Printful is the net price. You need to calculate taxes with WooCommerce in order to calculate the retailFew readers

• Setting up fonts

  General Setup In Settings > Fonts you can enable the fonts that you want to use within your customizable products. We offer three distinct options for configuring your font selection. System Fonts Here you can define a list of fonts separated by commas, that are commonly used on computers. For example Arial, Times, Helvetica. ****This is not recommend if yoFew readers

• Create Pricing Rules

  To create Pricing Rules you need to go to Fancy Product Designer > Pricing Rules. Here you can set up own pricing rules. Click on "Add Pricing Rules Group" and add a name for the pricing rule. Select a Property****, which defines the element property that will be used for the pricing rules. In the Target section you are able to select the elements in the views that will be used for the pricing rule. If you want to use all views, just leave the Views input emptyFew readers

• Automatically apply a filter to uploaded images

  In certain printing methods, it may be required to utilize a filter on uploaded images (such as PNG or JPEG), such as the Grayscale filter. You can do that in the main settings > Element Properties > Custom Images:Few readers

• Connecting Gravity Form with Fancy Product Designer

  First you have to add an extra "Single Line Text" field to your form. This field is used to store the data for the order. Open the field options and click on the "Appearance" tab and enter "fpd-order" in the Custom CSS class input. Last but not least go to the Advanced tab and enable "Hidden" show this field is not showing up in the form. Optional: Display a price (since FPD PLUS V1.2.0) If you want to display the price of the product designer in the form, you need to add another "SingleFew readers

• Changing Buttons Style

  It is possible to modify the appearance of buttons utilized for certain actions such as "Start Customization" and "Share". Hence, an option can be located under General > Display that allows you to modify the CSS class for said buttons. This feature proves to be beneficial if you desire to apply the identical style to these buttons as the one used for the theme buttons. ![](https://storage.crisp.chat/users/helpdesk/website/-/e/e/3/1/ee317496010a400/f2690cfd-dc97-47ee-9c8b-6ee9d0_1wc7rcFew readers

• Custom CSS

  | I want to hide the toolbar completely UI-Composer .fpd-element-toolbar-smart{display:none!important}If you're using the old version of toolbar -.fpd-element-toolbar{display:none!important} I want to hide the toolbar only for images UI-Composer .fpd-element-toolbar-smart.fpd-type-image{display:none!important} I want to hide the design preview UI-Composer .fpd-thumbnail-preview{display: none !important;} I want to hide the colour in the cart | | UI-ComposerFew readers

• Dynamic Designs

  The dynamic designs module displays specific designs as an own module within the product configurator. Create a design module First of all you need to create a design module, just click on Fancy Product Designer/Designs/Dynamic Designs Modules and Add Module. Enter a dynamic designs module title. Choose design categories that you want to use within this deFew readers

• Custom Product Thumbnail is not displaying in the WooCommerce cart

  If the customized product thumbnail is not displaying in the WooCommerce cart, it could have several reason. Classic Cart Shortcode is required At present, the Classic Cart is the only supported option for showcasing the thumbnail featuring the personalized design in the WooCommerce cart. Regrettably, the new Block Cart is not currently supported.**** Disable Lazy-Load There are some plugins like "SG Optimizer" who are having a feature to enable Lazy-Load. In that case the plFew readers

• Colorization Methods & Setup

  Supported Image Formats If you want to apply a color to an image, you can only do that with SVG or PNG images! Color Picker Entering only one hexadecimal color value, eg.: #000000, enables the color picker for the element, which allows the customer to pick any color they like: ![](https:/Few readers

• Getting Started with the PRO Export

  Preparing Font Files For the print-ready export, you can only use fonts that you set in the "Google Webfonts" and "Fonts Directory" in Settings > Fonts tab, because the PDF renderer needs the fonts as TTF files in order to embed the fonts in the PDF. Custom Fonts You can upload your own fonts with the "Custom Fonts Manager". Here you need to upload the regular font variant first and enter the exact name of the font family. You also need to consider the correct notationFew readers

• How to Show Image Size in Product Designer

  In Fancy Product Designer, it is possible to show the image size in the designer. In order to do that, you could navigate to Fancy Product Designer > Settings > Advanced > Miscellaneous, then enable the Size Tooltip option: Once you enabled that option, in the product designer, you should be able to see the image size as follow: ![](https://storage.crisp.chat/usFew readers

• How to create an overlay shadow effect with Photoshop

  Our designer shows a technique in Photoshop how you can create an overlay shadow effect. At the end you will get a transparent PNG that you can put above the base of your product.Few readers

• Using FPD with page builder plugins like Elementor

  If you are using the  Page Builder plugins to customize your WooCommerce product page, you will need to use the shortcode [fpd] to position FPD, as the hooks that are normally used to position FPD on WooCommerce pages are not accessible. If you want the designer to open in a lightbox with the button before Add to Cart button, then drag and drop your new text widgFew readers

• Using an overlay image as mask

  In this DEMO, we have employed a particular technique. We have fashioned an image that mirrors the dimensions of the stage (canvas), albeit with a transparent circular area in the center. The white area is transparent We have included the initial image element in the Product Builder and activated the "Stay on TFew readers

• Linking a product template with a catalog product

  In the Products backend you are able to create catalog products and templates. Templates can be understood as internal templates in the backend, so you can easily create a new catalog product, if you already have a similar product. BUT you can also use a template as base for different catalog products and link it to these catalog products. Let's say you are having a lot of catalog products and some of these have the same layers and looks identical except of some layers. Then you can create a teFew readers

• Layout

  The Layout module can be used to enable your customer to choose from a number of predefined layout options for the views of the product. An example of this can be seen in the Poster Collage demo: To enable layouts for a product you need to: Enable the Layouts module in modules tab of the UI Composer: ![](https:Few readers

• The export does not work

  Test Export Process (Pro Export) You can find a helpful feature in Settings > Pro Export to test the necessary export processes. Click "Test Export" button and a modal will appear with helpful information about the different test processes for the Pro Export. ![](https://storage.crisp.chat/users/helpdesk/website/-/2/8/4/4/2844dad84826ba00/6cc4d080-3c47-4050-9a89-83cfFew readers

• Enable Product Designer for any page

  The product designer can also be added in posts and pages via two shortcodes. The shortcodes are not necessary for WooCommerce products! Create a post/page or select an existing one. You need to add these two shortcodes: [fpd]: Will load the product designer. [fpd_form]: A simple form that is required to send the customized product to the site owner. You will notice the new Fancy Product Designer meta box that has beFew readers

• Display a thumbnail with the custom design in the cart & order mail

  At present, the Classic Cart is the only supported option for showcasing the thumbnail featuring the personalized design in the WooCommerce cart. Regrettably, the new Block Cart is not currently supported. In Gutenberg editor: FPD Main Settings In the settings you also need to enable "Customized Product Thumbnail" option. __For displaying the custom design thumFew readers

• Enabling Genius Features

  Thank you for considering our Genius plans to extend FPD. We appreciate your interest in our services. Please note that the AI features are exclusively offered in the Premium Plan and are not included in the Pro plan, regardless of whether you opt for a monthly subscription or lifetime license. Activate Genius in your WordPress site Upon completion of your purchase, you will be provided with a license code. Kindly copy and paste this code into the designated "Manage Genius License"Few readers

• Relevant data in MySQL database

  Fancy Product Designer is storing all data (customizable products, categories etc.) in own tables in the MySQL database. All these tables are starting with the prefix fpd_. | fpd_categories FPD Product Categories fpd_category_products_rel The linked products to a category. fpd_orders Orders made with shortcode. No WooCommerce orders! fpd_products FPD products fpd_templates FPD templates fpd_views FPD product views WooCommerce When an order is made wiFew readers

• Setting different prices depending on the customized view

  You can even charge your customer depending on the customized view. You can set custom prices for added text and image elements via the Fancy View Options. The View Options can now be found directly in the view in the product builder. First access the view you need: Go to Fancy Products admin Click on a Fancy Product in the list to open the attached views Click on the Layer icon in a view list item to open the ****view in thFew readers

• Show Share Buttons with Shortcode

  If you want to display the share buttons via a shortcode, you only need to add this shortcode in your page: [fpd_share] Find more about Shortcodes in Displaying and Positioning Modules and Actions via ShortcodesFew readers

• Install & Update

  Auto-Update via Envato Market Plugin (Recommended) The best and easiest way to keep all of your plugins from the Envato marketplace (CodeCanyon, ThemeForest) updated is to use the official Envato Market WordPress plugin. Just download and install the plugin, connect your Envato account, and you can easily update all plugins and themes. Note: You need to delete the plugin first before you can install/update it via the EnvatFew readers

• Defining names and prices for colors

  If you are using color palettes, you are able to define names and prices for the colors in the palette. Set names for your colors Go to Fancy Product Designer → Settings → Colors → Color Names tab. In the first section you can set a name for every hexadecimal color you are using in a color palette. Just enter the hexadecimal color without hash, enter a name and click Add ![](https://storage.crisp.chat/users/helpdesk/website/-/8/4/7/2/84723d6cab431800/ad0f026d-ee32-4ecFew readers

• Handpicked TTF fonts for PRO export

  Find a handpicked list of TTF fonts that work well with the Product Builder and the print-ready export. | SF Wonder Comic SF Wonder Comic PB SF Wonder Comic PRE Galderglynn Titling Galderglynn Titling PB Galderglynn Titling PRE Komika Komika PB Komika PRE Plasmatica Plasmatica PB Plasmatica PRE SF Action Man Extended SF Action Man Extended PB SF Action Man Extended PRE SF Action Man SF Action Man PB SF Action Man PRE SF OrsoFew readers

• Define specific design categories per product or product view

  Learn basics about design elements and how to add them to Fancy Product Designer, add them to categories, and enable specific settings for design categories or individual designs first. After adding design elements they will be available for all your customizable products (at least as long as you do not disable the Design Module for a specific product view or an entire UI layout) ![](https://storage.crisp.chat/uFew readers

• Displaying and Positioning Modules and Actions via Shortcodes

  Action buttons, as well as modules, can be positioned freely on a product page through the use of shortcodes. An example of this can be seen in the business card demo. The first step in adding the desired shortcodes is to open the Shortcode Builder. Find the Shortcode Builder in Fancy Product Designer → Utilities.Few readers

• Increasing php.ini directives to send large amounts of data

  Indications for this issue When you add a product to the cart and the customized product is not added to the cart. When you add a product to the cart and the thumbnail is not displaying. When you are not receiving the customized product in the order. When you trying to export a product/order and you receive an error message. Solving the issue You need to adjust some php.ini directives in your server configuration. If you do notFew readers

• Images are not loading

  Adding a photo from Facebook or Instagram does not work Be sure that the PHP function getimagesize() is enabled on your web server. This function is part of the GD library, which is required for the plugin. Please contact your server provider how to enable it. We can not do that for you. Error with images when using different functions If you are getting following error: ![](https://storage.crisp.chat/users/helpdesk/website/-/6/9/d/0/6Few readers

• Mailing a print-ready file

  This Pro export service is only available in our professional suite Genius. Important Notice Attaching a print file to an email may extend the checkout process duration, since the file needs to be generated beforehand. The time required for generation is significantly influenced by the file's output size and the number of elements and fonts it contains. It's advisable to initially test this feature under your standard business operations to detFew readers

• Set prices for custom added elements

  Main Settings In the main Settings you can set the prices for custom added elements in the Element Properties. Individual Product Settings If you want to adjust the custom prices for particular product designers, you can easily do that via the Individual Product Settings. ![](https://storage.crisp.chat/users/helpdesk/website/-/d/3/b/c/dFew readers

• The product is not added to cart

  When using WooCommerce the add-to-cart form will send a long data string, which represents the customized product thumbnail, to the cart. Problem: PHP post_max_size is to low You need to increase the post_max_size variable. This article explains how to increase the value. Our support can not assist to help with that, therefore you need to contact your provider. Problem: Your server is blocking the requestFew readers

• Why there is no color options?

  A lot of people got confused when first time using Fancy Product Designer, and they got no color options while editing a text. In order for the color option to show, you need to go to Fancy Product Designer > Settings >  Element Properties > Coloring: ![](https://storage.crisp.chat/users/helpdesk/website/-/a/2/a/8/a2a842bd2c65b800/e5a19f7e-1af7-4ef2-ad97-ad7992_Few readers

• Uploading images in frontend does not work

  If you are getting an error message, when you try upload an image via the Upload module in the product designer, this could have several reasons. PHP Server Error Your server throws an error and the upload is canceled. Please look into your PHP error log and check for any error. The log file will help you and tell you what was the problem. For any missing PHP function or any other server-related problems, please contact your provider, our support team can not assist with server configuratioFew readers

• Create a customizable product

  Create a Product First of all you need to create a new product in the "Products" backend. We offer various options for creating a new product, including utilizing our Premium Templates, Demos, or starting from scratch by clicking "New." In this tutorial we create a product from our Premium Templates. ![](https://storage.crisp.chat/users/helpdesk/website/-/3/0/2/9/3029da0e3f012000/95a2099f-db68-444f-b8aFew readers

• Choosing the right image format for product customization

  Our product designer supports SVG, PNG and JPEG images. Depending on the use case, we will explain when you should use which formats to create your customizable products. SVG The most optimal option in terms of size and maintainability is SVG with real paths. This format ensures a high-quality display on all screens and is particularly suitable when customers need to modify the color of a graphic element. Additionally, our designer solution has the capability to identify the quantity of patFew readers

• Enabling AI Features (Genius)

  In order to use our AI features like Upscale Image, Remove Background and Text to Images, you need a premium subscription of our service platform Genius. Then you can enable these features separately in the backend settings. Remove Background The "Remove Background" feature appears in the "Edit Image" tab of the toolbar.Few readers

• Business Card Example Setup

  This article shows you how to set up a Product like our Business Card Demo. This setup requires our Fancy Product Designer Plugin. A) Create the Fancy Product OPTION 1: Download and Import Demo Our Business Card Demo can be downloaded within the Products section of the Fancy Product Designer Plugin. After downloading, you can import the zip file so the Business Card template will showFew readers

• Products

  You have the ability to assign multiple FPD products or categories to a designer. Once you add more than one product, the Products module will be displayed. First of all you need to add the Products module to the UI in the UI-Composer. Then go to a page or WooCommerce product and select the products/categories that you want to use within that specific page/product. ![](Few readers

• Facebook/Instagram Photos in the Images module

  Create App First of all you need to create a Facebook app or select one from your existing apps. Please follow step 1 and 2 in this guide. In Step 2 you need to enter a "Valid OAuth Redirect URIs". You can find that URI in the FPD settings (General > Modules > Instagram Redirect URI). Enter the APP ID and Secret After setting up the Instagram App you need to copy APP ID and Secret.Few readers

• Build Your Customizable Product

  TABLE OF CONTENTS Create a Fancy Product Add view(s) to a Fancy Product Build your initial product Create a Fancy Product Fancy Products are the customizable products that can be created on the Product Builder page and listed as a product in your store. They can contain multiple views, e.g. tFew readers

• Enable elements for the color selection panel

  First of all you need to enable the elements, that you want to use in the Color Selection panel, in the Product Builder. After that you need to choose the placement for the Color Selection panel either in the [Individual Product Settings or in the global settings](http://support.fancyproductdesigner.com/support/solutions/articles/5000591587-global-and-individual-product-sFew readers

• Moving your Website to another domain

  If you move your site to another domain or the protocol (http or https) has been updated, image sources can easily be reset by entering your old domain under "Utilities" menu.Few readers

• Setting a watermark for downloaded file

  In Settings > General > Actions you can set an image that will be put on the design when the customer tries to download the print file. Special WooCommerce Feature Once a product is marked as downloadable in WooCommerce, the watermark will be removed upon completion of the order (once it has been paid for). This allows you to provide print files as digital prFew readers

• Pixabay photos in the Images module

  Retrieving an API key To access photos from Pixabay you need to create an account or log into your Pixabay account. Visit this link in the API docs of Pixabay. In the key parameter you will either see a Login | Sign Up action .... ...or the API key when you are logged in. ![](https://storage.crisp.cFew readers

• Using variations to change the product template in the designer

  WooCommerce variations can be used to change the product that is loaded in the product designer. This can be useful for example for changing colors or for switching between different clothing cuts etc. . Through the settings a behaviour for the customize button can be chosen. 1. Create a variable WooCommerce product: 2. Create the attributes you need, for example color or size: 3. From the attributes generate the variations: 4. Select the Fancy Products foFew readers

• Replacing elements

  The "Replace" option can be understood as a group of images or text elements that will replace each other as soon as another element of the same type with the same replace value is added. This feature can be used to limit the number of image or text elements that the customer can add. To use it you need to define a unique replace name for the element you want to be replaced in the product builder and set the replace name in thFew readers

• How to create a neon text effect

  You can easily create a Neon text effect in the product builder. Clicking on the "Neon Text" feature will introduce a unique text element enhanced with various shadow effects, designed to emulate the distinctive glow and ambiance of neon lighting.Few readers

• Text

  The text module allows to add custom text elements. Settings You can manage the default options for custom added text elements in the Custom Text Options under Fancy Product Designer/Settings/Element Properties tab/Custom Texts or /All Texts or in the Individual Product Settings. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/Few readers

• Set a Text Box to a Specific Width

  We received a questions from few of our customers that facing an issue to create a text box that has specific width. To set a text box to a specific width in the Fancy Product Designer plugin, it's quite straightforward, you could follow these simple steps: Go to Product Builder for your product: Add a Text Box Layer ![](https://storage.crisp.chat/users/helpdeskFew readers

• Sync relevant design images in multiple views

  ****You now have the capability to seamlessly sync or replace various design images across multiple views. For instance, when a user chooses a design from the Designs module, an image can be automatically placed in a specific position within the first view, replacing a pre-existing image. Simultaneously, another image can be incorporated into the second view. This functionality proves invaluable for product configurations, enabling the display of distinct images across your views for a single deFew readers

• Creating an Upload Zone

  An Upload Zone is a placeholder for a custom added element. Customers can click on an Upload Zone and add elements to it. An Upload Zone expects one element only, clipping (masking) is enabled automatically, so you can guarantee that the element (image, text, design) stays within the upload zone. Here is an example of a product with 3 different Upload Zones. You can alsoFew readers

• Handpicked Google fonts for PRO export

  Find a handpicked list of Google fonts that work well with the Product Builder and the print-ready export. | Josefin Sans Josefin Sans PB Josefin Sans PRE K2D K2D  PB K2D PRE Kodchasan Kodchasan PB Kodchasan PRE Lato Lato PB Lato PRE Mali Mali PB Mali PRE Montserrat Montserrat PB Montserrat PRE Poppins Poppins PB Poppins PRE Roboto Roboto PB Roboto PRE Roboto Mono Roboto PB Roboto Mono PRE UbFew readers

• [DOKAN] Let vendors sell customizable products with Fancy Product Designer

  Since V3.9.7 of the Fancy Product Designer WordPress/WooCommerce plugin, you can use Dokan to let your vendors sell customizable products created with Fancy Product Designer. You only need to uncheck the option "Admin area access" in the Dokan General settings. This way the vendors in your site can access the WordPress backend. After that they have access to Products and Product Builder page of Fancy Product Designer. Under the WooCommerce tab of Fancy Product Designer setFew readers

• Images

  The Images module allows to upload images from the users's device and adding Facebook/Instagram photos from his account. Custom Image Upload If a customers uploads an image, you are able to set the required minimum and maximum image size. You can set these configurations in the Default Element Options under the main Settings or in the Individual Product Settings. ![](https://storage.crisp.chat/users/helpdesk/website/-/2/2/6/f/226f013ee938b400/0769a457-f39d-47d4Few readers

• Helpful CSS adjustments

  Hide Price in lightbox (modal mode) body .fpd-modal-product-designer fpd-actions-bar .fpd-total-price { display: none !important;} Set navigation to top Use this CSS if you want to set the navigation to the top when using the sidebar layout. fpd-main-bar { flex-direction: column;}fpd-main-bar.fpd-navigation { display: flex; background: var(--fpd-module-secondary-color);}.fpd-container.fpd-sidebar>fpd-main-bar .fpd-navigation>.fpd-nav-item { flex-direction: coluFew readers

• Let customers download a print-ready file after successful purchase

  If you are interested in selling a downloadable digital product and delivering it to your customers upon payment, you can achieve this effortlessly with a downloadable WooCommerce product. Create a downloadable WooCommerce Product First you need to create a downloadable WooCommerce product. Complete Order After the order has been fulfilled, the customer will beFew readers

• The Product Designer is not showing up

  SG Optimizer If you are the "SG Optimizer" plugin on Siteground hosting, some of the Frontend Optimization features are currently not working with FPD and causing JS errors. Here you can see a screenshot of the settings which works well with the SG Optimizer.Few readers

• Using an SVG as mask for a view

  SVG vector graphics can be used as masks for views. Please note, that the SVG mask can currently only contain one path or combined paths, that will be used as a mask. To add a mask open the view you like to add it to in the product builder. Above the Canvas, click the "Edit mask" button: A menu will open. To add a mask, click on the image icon. In this eFew readers

• Dynamic Views

  If you wish for your customers to have the ability to add and edit their own views/pages, you may enable the Dynamic Views option. Visit Demo. Price per Area If you desire to set your own prices for a particular area, you have the option to utilize the "Price per CM2" feature or establish pricing rules for mFew readers

• Templates Library products don't load once installed

  Using the free templates from the templates library is a really great way to get started and learn about how Fancy products are formed in layers. Once you've chosen your product: and selected Yes when asked to add images to your media folder: YouFew readers

• Export methods explained

  In the PRO export feature, you have the choice between two distinct export methods: SVG2PDF and Node Canvas. SVG2PDF Functionality This method embeds the SVG views directly into the PDF. Consequently, text layers are displayed as genuine text within the PDF. Limitations The library employed for this export doesn't support certain text properties. The unsupported properties include: Curved Text Drop Shadow Text Opacity Text Patterns Exporting bitmaps (either JPEG orFew readers

• Storing the print-ready file in a cloud provider (Dropbox or AWS S3)

  You are also able to store the print-ready file in a cloud like Dropbox or AWS S3, when an order is created. Dropbox Go the Dropbox App Console and create a new App. In the next screen you can configurate the App. After the App is created, you will be redirected in the App settings. Copy the app and secret key in paste in the relevant option fields in the "PRO Export" settings of Fancy Product Designer. ThenFew readers

• Connect WooCommerce Store

  With WooCommerce, you need to enable the product designer for every product individually. Go to your WooCommerce Products and select a product from your existing products or add a new one. You can now add an optional description or product data as needed, such as price. The Fancy Product Designer meta box has been added on the right hand side of the screen. Add one or more single Fancy Products individually or one or mFew readers

• Performance Tweaks

  Disable Products Loading in Product Builder After creating numerous FPD products in the backend, it may be beneficial to deactivate the products loading in the product builder. Otherwise, all products will be loaded into the view dropdown on the product builder page. An option can be found in the Troubleshooting section to set the threshold for disabling product loading. ![](https://storage.crisp.chat/users/helpdesk/website/-/a/0/d/2/a0d2a28404f73000/a4411f7a-3cd2-48bf-82e6-940e37_lqs5sFew readers

• Enabling cropping with advanced editing

  First of all you have to enable the "Advanced Editing" property for custom images in the settings. After that you need to create a new directory in the wp-content/uploads of your WordPress directory and name it fpd_masks. Here you can upload your own SVG images that will be used in the crop tool. ![](https://storage.crisp.chat/users/helpdesk/website/-Few readers

• Giving access to other roles

  By default only the administrator can view the backend of FPD in WordPress. FPD comes with an own capability "edit_fancy_product_desiger". You can assign this capability to your roles by using any Role Manager plugin.Few readers

• Global and Individual Product Settings

  Global (main) Settings The global Settings can be found under Fancy Product Designer menu. Individual Product Settings Some options of the global Settings can be adjusted for every Product Designer in a product or post individually. When creating/editing a product (WooCommerce) or post/page, you'll find a button Individual Product Settings withinFew readers

• Setting up the user interface of the designer

  General Layout Options In Settings > General > Display tab  you find various options to configure the layout and look of the designer. Display Behaviour The Option "Open Product Designer In..." will set the display of the product designer, when and where it appears. | The product designer will be displayed directly inside the page. | The product designer will be opened in a lightbox, right now only the sidebar layout (see UI Composer) can be used in lightbox mode. | The pFew readers

• Glossary

  | Actions Different tools that the customer can use e.g. to save their products or add content into the canvas. Bounding Box A bounding box is a rectangular area. You can define bounding boxes by setting the position (top, left) and size (width, height) of the box or you can use another element in the same view as bounding box by using the title of this element. Canvas | The canvas is the working surface in which elements are added to. The canvas has fixed width and height in piFew readers

• Displaying Cross-Sells products when adding a product to the cart

  The Fancy Product Designer Cross-Sells products allow you to sell several products using the same design your customers have made. The Cross-Sells products of FPD work a little bit different than the Cross-Sells of WooCommerce which simply suggests different products to buy. Our Cross-Sells show different products using the customized design by the customers and are displayed when a product is added to cart. A few key points before you start: The canvas size of each of your cross-sell prodFew readers

• Using text link groups to sync the content between text layers

  In certain instances, it may be desirable to synchronize the content of text layers. This ensures that when the user modifies the content of one text layer, the content of the associated text layers is updated simultaneously. The "Text Link Group" option is available for this purpose. Simply assign the identical value to all text layers that require synchronization. YouFew readers

• Troubleshooting the Multistep Product Configurator

  Here are some issues you might encounter when using the Multistep Product Configurator (MSPC) plugin and how to fix them: The options modal appears on the WooCommerce taxonomy pages You can't see any attributes inside the WooCommerce Variations tool [Multistep Product Configurator module not displaying on the frontend](#Multistep-Product-Configurator-moduFew readers

• Managing Orders

  The location of ordered products in your WordPress dashboard will vary based on your integration choice (WooCommerce store or simple page via shortcodes). Option 1: Orders made with WooCommerce If you use WooCommerce the ordered product can be viewed going to WooCommerce -> Orders -> select the order you want to see and click on "Load in Order Viewer" in the Item panel. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/d/1/2/fd1206fa40f3f000/90147383-4d2d-4d8a-8748-Few readers

• Customizing the layout of WooCommerce product pages

  If WooCommerce is enabled, another tab "WooCommerce" will be visible in the Settings. Under this tab you can adjust some layout options for WooCommerce product pages. These options can be set in the Individual Product Settings as well. Product Designer Positioning You can choose between different position options for the Product Designer in the product page. ****RepFew readers

• Adding patterns for text & SVG

  You can use patterns for text elements and SVG images. Open your FTP software, e.g. FileZilla. Go to wp-content/uploads of your WordPress installation. For text elements Create a new folder called "fpd_patterns_text". Upload your pattern images as PNG or JPEG format into the fpd_patterns_text folder. Go to Fancy Product Designer Settings and select the Element Properties, Custom Texts. Select the patterns in the **Few readers

• Developers

  API Check if post/product has the product designer enabled. global $post;if( is_fancy_product($post->ID) ) {   echo "This is a fancy product."; } CSS classes Classes added to the body of a post/product with the product designer enabled. .fancy-product This helps you to assign custom CSS code only to product pages with Fancy Products.Few readers

• Translating the labels of the frontend

  In **Fancy Product Designer/**Settings you can change/translate all labels that are used in the frontend easily. If you are using the WPML plugin all available languages will appear under the tabs and you can easily translate the plugin for all languages.Few readers

• Setup for engraved products

  If you wish to provide products with engraving, you may locate an alternative in the product options to activate an "Engraving" mode. This mode will perform the following: "Opacity", "Advanced Image Editing" and "Remove Background" tools are hidden. Custom text and images will have an opacity. The opacity value can be controlled in the product options. Custom uploaded images are transformed into a threshold image. OpenFew readers