To run the plugin you need a minimum PHP Version of 5.4!


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 are going to be displayed in the product designer. They can contain multiple views, e.g. the front and back side of a t-shirt.

  • Click Add New to add a new product.
  • A popup will open, asking you to enter a title.
  • The new product will now be listed below  If you wish, you can assign a thumbnail to the product, by clicking the empty thumbnail box to the left of the product title.
  • Optionally you can assign the product to a category by selecting the product and then ticking the checkbox in the Categories panel. One Fancy Product can be assigned to multiple categories.

Fancy Products admin





Add view(s) to a Fancy Product

A view can be comprehended as a container for the image and text elements that make up a Fancy Product.

  • 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.




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 admin, either by selecting the Product Builder in the main navigation or by clicking the Layers icon in the created views item list.
  • Add image or text elements via the Layers panel.


Product Builder Layers


  • You can adjust different options for every element separately. To do this, select it from the Layers list or click on the element in the Product Stage.
  • Via the Layers Options panel you are able to adjust the properties and behaviour of an element. A detailed introduction on Element Options can be read here.


Product Builder element options and product stage


Enable product designer for a WooCommerce product

With WooCommerce, you need to enable the product designer for every product individually.  

  • Go to Products and select a product from your existing products or add a new one.
  • You will notice the new Fancy Product Designer meta box that has been added on the right hand side of the screen.
  • Choose whether you would like to add one or more single Fancy Products individually or one or more product categories via the Source Type option.
  • After that you can select the products/categories you would like from a searchable list. 
  • You can now publish and preview the product page.

Fancy Product Designer meta box


Add product designer via shortcodes

The product designer can be added posts and pages via two shortcodes. This does not work on WooCommerce product pages!


  • 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 
  • Choose whether you would like to add one or more single Fancy Products individually or one or more of product categories via the Source Type option. 
  • After that you can select the products/categories you would like from a searchable list. 
  • Save the post/page.

Fancy Product Designer meta box


Shortcode Attributes

The [fpd_form] shortcode supports the following attributes:

 Attribute
 Explanation
 Default Value
price_format
The price format. Use %d as placeholder for the price.
$%d


Example

[fpd_form button="Done" price_format="%d€"]