This article is a short step by step introduction on how to get started with the Fancy Product Designer plugin to create a product and to display it using WooCommerce or to use shortcodes to integrate the designer into WordPress pages and posts.

After installation and activation of the plugin you should be redirected to one of the central components of the Fancy Product Designer, the Fancy Products admin, which allows you to manage your products. If this does for some reason not happen, please head there now via the navigation.

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. the front and back side of a t-shirt. Options for color, size, etc. can also be displayed.

• Click New to add a new product.

• A popup will open, asking you to enter a product title.

• The new product will now be the first one listed in the table. If you like, you can assign a thumbnail to the product by clicking the empty thumbnail box to the left side of the product title.

• Optionally, you can assign the product to a category by opening the Manage Categories pop-up on the right. If no category is created yet for the product you selected, you’ll need to create one by clicking Add New Category, and then entering a title. Once the category is shown, you'll need to:

  • first select a product from the product list, and then

  • check the box next to the category title to add your selected product to the category.

• Each category will have icons on the right for 1) editing the title, 2) filtering the Products list to show only products for the category, and 3) deleting the category. Note that each Fancy Product can be assigned to multiple categories.

Add view(s) to a Fancy Product

Each product must have one or more views assigned to it. A view can show different viewing angles of a product - for example: the front and back view of a shirt.

• Click the plus icon to add a new view to a product.

• A popup will ask you to enter a title for the new view.

• In the now opening window, please select a thumbnail for the view

• Anytime you need to see a list of views for a product, just click on the product’s name. Click on it again to hide it.

Build your initial product

In the Product Builder, you add the initial image and text elements that make up your product.

• Go to the Product Builder page, either by clicking the Layers icon ("Edit View in Product Builder") in the created views item list, or by selecting the Product Builder in the main navigation. In this case, the view to be edited must first be selected from the drop-down list for”Selected View”. 

You can adjust different options for every element separately. To do this, select it from the Layers list (or Upload Zone). In the diagram above, the text element is selected. Alternatively, you can click on the highlighted element in the main Product view. This opens the Layers Options panels for the selected element. A sample is shown below, with two options panels enclosed in the red boxes.

Option 1: Enable product designer in a WooCommerce product*

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 more product categories via the Source Type option.

• After that, select the products or categories from the drop-down menu. You can also create and choose different products for mobile devices to improve the presentation of the products on smaller screens.

• You can now publish and preview the product page. (Note: The Add to cart Button will only be shown after adding a price to your WooCommerce Product.)

Option 2: Add product designer in posts and pages

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 been added on the right hand side of the screen. If it doesn’t appear, click the Settings icon on the top right.

• Add one or more single Fancy Products individually or one or more product categories via the Source Type option.

• After that, select the products or categories from the drop-down menu. You can also create and choose different products for mobile devices to improve the presentation of the products on smaller screens.

• You can now publish and preview the product page.

Gutenberg Editor

You will find the meta box in the Gutenberg-Editor by clicking in the Document tab.

[fpd_form price_format="%d€"]