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 show up in the products section. 

You still need to set the Canvas size you like to get (Please see Step 8).

OPTION 2:

If you like to create the Fancy Product on your own please follow these steps:

1. Go to Fancy Product Designer/Products and create a New Fancy Product

2. Enter a Product Title

3. Add a View to the Fancy Product

4. Enter a view title

5. Select a thumbnail for the view

6. Add a thumbnail for the product

7. Edit View in Product Builder

8. Edit Product Options and set Canvas Size to 600 x 335 pixel

9. Edit View in Product Builder

10. Upload Layers (Images, Texts, Curved Texts, Text Boxes or Upload Zones)

You can get an overview of the layers we use as well as the settings when downloading and importing our Business Card demo (for more information please see OPTION 1) 

Images

We use a background image (png file with enabled color palette).

On top of that we use a grid (semi transparent png overlay, no color options enabled).

On the bottom of the Business Card there are two different image layers that are set up accordingly (base image and png overlay)

Between the top and bottom of the Business Card there is a line as an image.

Texts

On the left side of the Business Card you can see two separate text fields.

On the right side there is a Text Box with a preset width. 

All Text and Text Box elements are customizable and use the colorization method color palette. 

If you want to use fonts that are not available in the product builder yet, please have a look at this guide.

Please remember to click on "Save View" to save your setup.

B) Customize the UI Layout 

1. Go to the Fancy Product Designer UI Composer and remove all modules and actions from the UI Layout you are using.

2. Enter the following Custom CSS to in the UI Composer to remove the mainbar:

.fpd-product-designer-wrapper {
    margin: 20px 0;
}

.fpd-mainbar {
    display: none !important;
}

3. Depending on the theme you are using there is additional Custom CSS you need to insert in order to arrange the Layout of your WooCommerce product. You can either also insert this code in the Custom CSS tab of the UI Layout you are using , use the Custom CSS fields of your themes or download an additional plugin to add Custom CSS to selected products. 

The values on the following Custom CSS code can differ depending on the theme you are using and might need to be adjusted:

.woocommerce .fpd-product-designer-wrapper {
    float: left;
    width: 58%;
}

.woocommerce div.product .summary {
    width: 38% !important;
}

.fpd-text-layers-panel .fpd-title {
   display: none;
}

@media (max-width: 800px) {

   .single .fpd-product-designer-wrapper {
       width: 100%;
       float: none;
   }

    .single.woocommerce div.product .summary {
       width: auto !important;
       margin-left: 0;
       float: none;
   }

}

C) Connect the Fancy Product to a WooCommerce Product

1. Create a WooCommerce Product 

2. Add a title and assign your Fancy Product to your WooCommerce Product

3. You can insert the following shortcodes in the Product short description of your WooCommerce Product to show the action buttons:

[fpd_module type="text-layers" css="width: 100%; border: none;"]
[fpd_action type="print" layout="icon-text"] 
[fpd_action type="qr-code" layout="icon-text"] 
[fpd_action type="save" layout="icon-text"] 
[fpd_action type="load" layout="icon-text"]

4. Set up the product as a variable product and add the attribute "Amount" with its entries

5. Add variations and add prices

D) Outcome

Depending on your theme, the style of the input and dropdown fields can vary. The theme we are using on our demo for example is X-Theme.

Please check out the example link here.