Getting started with WooCommerce & WordPress

Modified on Thu, 30 Apr 2020 at 10:51 AM

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


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 New to add a new product.
  • A popup will open, asking you to enter a product title.
  • The new product will now be listed below. 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 Manage Categories, selecting the product and then ticking the checkbox in the Categories panel. One Fancy Product can be assigned to multiple categories.



Add view(s) to a Fancy Product

A view can show different 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.



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 ("Edit View in Product Builder") in the created views item list.
  • Add image or text elements via the Layers panel.


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



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.
  • 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 dropdown. 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 show 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. 
  • 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 dropdown. 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 show after adding a price to your WooCommerce Product.)



Gutenberg Editor

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




  • Shortcode Attributes

            The [fpd_form] shortcode supports the following attribute:

                Attribute:             price_format         

                Explanation:        The price format. Use %d as placeholder for the price.

                Default Value:     $%d


        Example

[fpd_form price_format="%d€"]

     


*If you are using the Elementor page builder plugin, please see: Using FPD with the Elementor page builder plugins