WooCommerce Multistep Form & Product Designer

Installation

Installation of WooCommerce Multistep Form & Product Designer is straight forward and on average should take no longer than just a few minutes.

Method 1 (Using WordPress dashboard):

This is by far the easiest way of installing a WordPress plugin.

1. Open your WordPress admin dashboard. Click on Plugins » Add New.

2. Click on the Upload Plugin button and you will see a screen like the one below.

3. Click on the Browse button and select the plugin file (zip files only) from your hard drive and click the Install Now button to upload and install it.

You will be taken to “activate a plugin” page just like this one:

4. Click on Activate Plugin link to complete the plugin installation. You can also activate the plugin by clicking on Activate link later on the Installed Plugins page.

Now you have installed the WooCommerce Multistep Form & Product Designer plugin. You would have to read the quick start guide, create your first multi-step form, manage form steps, and bind your form to a product to fit your needs.

Method 2 (Manual Installation):

You can also install this plugin on your WordPress website manually.

1. Open and extract the wc-multistep-designer.zip compressed zip file that you have downloaded from CodeCanyon to a location on your computer.
2. Find, extract and upload the contents of the wc-multistep-designer-x.x.zip file from your computer to the "./wp-content/plugins/wc-multistep-designer/" directory on your website. You can use an FTP client or use your web hosting control panel file manager.
3. Open your WordPress admin dashboard and click on Installed Plugins.
4. You can see the "WooCommerce MultiStep Designer" plugin available in your plugins list on this page.
5. Click on the Activate link right below the plugin name.

Installing On WordPress Multisite (WPMU)

The plugin also works with WordPress Multisite.

1. Go to your WordPress Network Admin panel and install the plugin on the network sites. http://yourwebsite.tld/wp-admin/network/plugin-install.php?tab=upload
2. After installation, you will be taken to the “activate a plugin” page. Click on Network Activate link to complete the plugin installation.

Requirements

• The plugin requires the PHP version 5.2.4 or higher.
• The plugin requires the WordPress version 4.3 or higher.
• The plugin requires the WooCommerce version 2.5 or higher.

Quick Start Guide

Here we will explain you that how to create different type of products/services and add to your website.

Create a custom product

In this topic we create a sample mug and bind it into a WooCommerce product.

1. Browse to, WordPress admin dashboard.
2. Go to WC Multi-Step » Add Form, fill out the "Form Detail" section according to the image below and save the form.

3. According to the image below, click on the Add new step button to create a new step.

4. You will find your created step right beside the "Last Step" with a green flag that refers to the "Start Step" of the form.
5. Click on the "Step" input box and change the step name to 5. Custom design as follows.
6. Click on 6. List step elements button right above the step box.

7. On the "Manage Step Elements" page, click on the 7. Radio button. You will get redirected to the "Element Details" page to create a radio option group.

8. Fill-in the "Element Details" page according to the image below and click on the 10. Add Option button to create a radio option.

9. Fill-in the "Option Details" form according to the image below and save.

10. You will be redirected back to the "Element Details" page again.
11. Click on 10. Add Option button once again and fill-in the "Option Details" according to the image below and save.

12. You will be redirected back to the "Element Details" page again and you can see your step form elements as below.
13. Click on the 18, 19. Back button twice to come back to the step designer page.

14. On the step designer page, click on 4. Add new step button once again, rename the step to "Design mug" and click the 6. List step elements button.
15. On the "Manage Step Elements" page, click on the 20. Design button. You will get redirected to the "Element Details" page to create a design element.

16. Fill-in the "Element Details" form according to the image below and click the 24. Add design view button.

17. Fill-in the "Design View Details" form according to the image below and 27. Save.

18. Click on the 28. Layers button to open the "Manage Design Layers" page.
19. Click on the 29. Image button, enter a title for your new layer and click OK.

20. The media library window will be opened and you should upload/select the image for your layer and 33. Pick.

21. Click on the 34. Text button to create a new text element, enter a title for your new text layer and click OK.
22. Click the 37. Save Layers button to save your layers.

23. Come back to the "Element Details" page again by clicking the Back button for twice.
24. According to the screenshot below, try adding the Design Views for all the other viewports of your product if you need.

25. Click the Back button twice to come back to the step designer page again.
26. On the step designer page, click on 4. Add new step button once again, rename the step to "Select box" and click on 6. List step elements button once again.
27. On the "Manage Step Elements" page, click on the 7. Radio button. You will get redirected to the "Element Details" page to create a radio option group.
28. Fill-in the "Element Details" form according to the image below and click 41. Add Option button.

29. Fill-in the "Option Details" form according to the image below and save.

30. You will be redirected back to the "Element Details" page again.
31. Click on 41. Add Option button once again and fill-in the "Option Details" form according to the image below and save.

32. You will be redirected back to the "Element Details" page again and you will see your create radio options in the Options tables.
33. According to the screenshot below, try adding the radio options for all the other gift boxes you desire.
34. Click on the 48. Back button for twice to come back to the step designer page at the end.

35. Move your mouse on the "Custom design" step and click the 49. Anchor icon titled "Connect this step to another step" inside the "Custom design" step rectangle box. After clicking the Anchor icon, a dashed line will be appear under your mouse pointer that you can move it on the another step "Design mug" and click to make a connection between these two steps.
36. Click on the 50. Edit Connection pencil icon to open the "Manage Connection" popup.

37. On the "Manage Connection" popup, click on the 51. Add Condition button to create a new connection condition.
38. Create a condition according to the screenshot below and save.

39. Close the popup window and come back to the "Form Steps Designer" again.
40. Move your mouse over the "Custom design" step, click the 49. Anchor anchor icon once again and make a connection between "Custom design" and "Select box" steps too.
41. Click on the 52. Edit Connection pencil icon between "Custom design" and "Select box" steps to open the "Manage Connection" window again.

42. Create a condition according to the screenshot below and save.

43. Close the window and come back to the "Form Steps Designer".
44. Make just a connection (without any condition) between "Design mug" and "Select box" steps too.
45. Make just an another connection between "Select box" and "Last Step" steps too.
46. You will finally have all the steps related like the screenshot below.

Create a custom service

In this topic we create a sample web design service form and bind it into a WooCommerce product.

1. Browse to, WordPress admin dashboard.
2. Go to WC Multi-Step » Add Form, fill out the "Form Detail" section according to the image below and save the form.

3. According to the image below, click on the Add new step button to create a new step.

4. You will find your created step right beside the "Last Step" with a blue flag that refers to the "Start Step" of the form.
5. Click on the "Step" input box and change the step name to 5. Custom design as follows.
6. Click on 6. List step elements button right above the step box.

7. On the "Manage Step Elements" page, click on the 7. Radio button. You will get redirected to the "Element Details" page to create a radio option group.

8. Fill-in the "Element Details" page according to the image below and save then, click on the 12. Add Option button to create a radio option.

9. Fill-in the "Option Details" form according to the image below and save.

10. You will be redirected back to the "Element Details" page again.
11. Click on 12. Add Option button once again and fill-in the "Option Details" form according to the image below and save.

12. You will be redirected back to the "Element Details" page again.
13. According to the screenshot below, try adding the Form Items for all the other type of websites if you require.
14. Click on the 19. Back button to come back to the step designer page.

15. On the step designer page, click on 4. Add new step button once again, rename the step to "Desired Features" and click the 6. List step elements button.
16. On the "Manage Step Elements" page, click on the 7. Radio button. You will get redirected to the "Element Details" page to create a radio option group.
17. Fill-in the "Element Details" page according to the image below and save then, click on the 23. Add Option button to create a radio option.

18. Fill-in the "Option Details" form according to the image below and save.

19. You will be redirected back to the "Element Details" page again.
20. Click on 23. Add Option button once again and fill-in the "Option Details" form according to the image below and save.

21. You will be redirected back to the "Element Details" page again and you will find your step form radio options listed in Options section.

22. Click the 34. Back button to come back to the step designer page.
23. On the step designer page, click on 4. Add new step button once again, rename the step to "Mention website" and click the 6. List step elements button.
24. On the "Manage Step Elements" page, click on the 35. Text button. You will get redirected to the "Element Details" page to create a text input.

25. Fill-in the "Element Details" page according to the image below and save.

26. You will be redirected back to the "Manage Step Elements" page again and you can see your step form items as below.
27. Click on the 40. Back button to come back to the step designer page.

28. On the step designer page, click on 4. Add new step button once again, rename the step to "Contact Details" and click the 6. List step elements button.
29. On the "Manage Step Elements" page, click on the 41. Text button. You will get redirected to the "Element Details" page to create a text input.

30. Fill-in the "Element Details" form according to the image below and click the 43. Save button to redirect back to the "Manage Step Elements" page.

31. According to the screenshot below, try adding the Form Elements for all the contact information you want to ask from the customer.
32. Click the 44. Back button to come back to the step designer page.

33. On the "Form Steps Designer", move your mouse over the "Type of Website" step and click the 45. Anchor icon inside the step rectangle. After clicking the Link icon, a dashed line will be appear under your mouse pointer that you can move it on the another step "Desired Features" and click to make a connection between these two steps.
34. Click on the 46. Edit Connection pencil icon between these two steps to open the "Manage Connection" window.

35. On the "Manage Connection" window, click on the Add Condition button
36. Create a condition according to the screenshot below and save.

37. You will be come back to the "Form Steps Designer" again.
38. Move your mouse over the "Type of Website" step, click the 45. Anchor icon again and make a connection between "Type of Website" and "Mention website" steps too.
39. Click on the 50. Edit Connection pencil icon between "Type of Website" and "Mention website" steps to open the "Manage Connection" window again.

40. Create a condition according to the screenshot below and save.

41. Come back to the "Form Steps Designer".
42. Make just a connection (without any condition) between "Desired Features" and "Contact Details" steps.
43. Make just an another connection between "Mention website" and "Desired Features" steps.
44. Make just an another connection between "Contact Details" and "Last Step" steps too.
45. You will finally have all the steps related like the screenshot below.

Create/Manage Forms

From WordPress admin panel, browse to the WC Multi-Step » Forms to access your multi-step forms.

You can 1. edit or 2. delete forms or view a 3. preview of the form simply by move your mouse over the form name in each row.
The 4. Price in this list is the base amount for your product/service that cost calculation will start from.

You can click on 5. Add new button to create a new form or click on the form name to edit an existing form.

On the "Form Steps Designer" area, you can add/edit any of steps making your product/service form. To create a new step, simply click on the 6. Add new step button located on top of the step designer or at the very bottom of the page.

You can set the details and default options of your form in the 7. Form Detail » General tab section. You can also change the default colors, picture sizes, font sizes and styles of the form in the 8. Layout tab.

Manage Steps

To access the "Form Steps Designer" area, you should add/edit a form. In this area, you can add/edit/delete any of steps making your product/service form.

To create a new step, simply click on the "Add new step" button located on top of the step designer or at the very bottom of the page.

Click on the 1. List step elements pencil icon inside the step rectangle to edit a step. You can also remove a step using the 2. Delete step trash icon.

You can make a step as the "Start Step" of the form by clicking the 3. Flag inside the step square.

You can add elements/items to the form by clicking the appropriate button from inside the 4. Add Element sidebar and 5. Edit or 6. Delete an element using the buttons located in each row.

You can simply create any type of form elements you like including option groups (radio buttons or check boxes), text box or design item. Design item allows customer to create his/her prefered product. To find out more about design items please, read the quick start guide topic.

Adding form elements/items

Here we will explain the different parts of the "Element Details" page.

1. Field name: Represents the name of element on the form.
2. Short description: Small description written under the field name.
3. Field Price: The amount of this field will be added to the total price of the form.
4. Is mandatory field: If checked, the field must be filled/checked by the customer to continue.
5. Mandatory field error message: If, the field is not filled/checked by the customer we will show this message.
6. Calculation:
+ Means, the amount of the Field Price should be added to the total form price.
- Means, the amount of the Field Price should be deducted from the total form price.
7. Show in: The size of your element on the form based on a 12 place grid system.

Steps Relations & Conditions

The main feature of this plugin is the ability to make relations between the form steps and allowing the customer to be redirected to the different steps according to the selections he/she makes on the form.

To make relations between multiple form steps, simply move your mouse on a step and click the Anchor icon titled "Connect this step to another step" inside the step rectangle. After clicking the Anchor icon, a dashed line will be appear under your mouse pointer that you can move it on the another step and click to make a connection between these two steps.

You can make relations between a step to several other steps and in reverse. You can also create several conditions on a connection based on the customer selections and/or total price.

According to the image below, adding conditions to the relation between step A to B means, the step B will be called only if all the created conditions are accomplished.

To add a condition, click on the 1. Add Condition button. You can also remove a condition by clicking the 2. cross icon in its row.

3, 4. These two conditions mean, customer will be redirected from step A to B if, "Option 1" is selected or form "Total Price" is less than 350 (website currency).

To learn more about managing steps please, read the quick start guide topic.

Binding Forms To Products

This plugin works with WooCommerce so, you should assign your multi-step form to a WooCommerce product/service. The product/service page will be automatically filled with the details of the multi-step form you assigned to the product and will finally be added to the WooCommerce shopping cart.

To assign a form to a product follow the steps below:

1. From WordPress admin dashboard, browse to Products.
2. Edit the product you would like to assign your multi-step form to, from your products list.

3. In the Product Data block, select Multi-Step Designer from the left tab.
4. Select the form you would like to assing to your product/service from the Bind to form drop-down list.
5. Do not forget to save your changes by clicking the Update button.

Default Settings

To set and configure the default settings of the plugin, from WordPress admin panel, browse to the WC Multi-Step » Settings.
The "Settings" page is containing of three different tabs.

Layout

In "Layout" tab, you can set the default layout settings for all of your multi-step forms. Additionally, you can change all these settings in each form separately that will only affects that form.

Designer

In "Designer" tab, you can set the settings for your front-end product designer. Additionally, you can change some of these settings in each design item separately that will only affects that item.

Under the "Fonts" tab, you can add any fonts you would like to use in your front-end product designer.

Enable Updates

To receive the product automatic updates you need to register your plugin.

Each website using this plugin needs a legal license (1 license = 1 website). You can find more information on envato licenses.
If you need to buy a new license of this plugin, click here.

Product License

To register the plugin and enable automatic updates, follow the steps below:

1. From WordPress admin panel, go to WC Multi-Step » Settings page and select Enable Updates tab.
2. Enter your CodeCanyon purchase key in the License/Purchase Key text box and Save Changes.

Where Is My Purchase Code?

1. Login to your Envato Market account.
2. Move the mouse over your username at top of the screen and click.
3. Click 1. Downloads from the user menu items according to the picture.
4. Click the 2. Download green button and click 3. License certificate & purchase code (available as PDF or text file) from the drop down list.

Below is an example of a PDF License certificate and purchase code.

Translation

To translate WooCommerce Multistep Form & Product Designer to your local language:

1. Download and install Poedit translations editor. Poedit is an open source program for Windows, Mac OS X and UNIX/Linux which provides an easy-to-use GUI for editing PO and generating MO files.
2. Open the wc-multistep-designer.pot located in the /wp-content/plugins/wc-multistep-designer/languages/ folder, in Poedit.
3. Click on the 1. Create new translation button.

4. Select your desired local 2. language you would like to create a translation for and click 3. OK.

4. Do, your required changes on translation items.

6. From the File menu, select "Save as".
7. In the "Save as" window, select a name for your translation with this rule "wc-multistep-designer-<WP Locale>.po" - eg. wc-multistep-designer-nl_NL.po, and save the file somwhere into your computer.
8. From the File menu, select "Complile to MO...".
9. Upload the generated .po and .mo files from your computer into <your-wordpress-site.com>/wp-content/plugins/wc-multistep-designer/languages/ (WooCommerce Multistep Form & Product Designer language folder in your WordPress plugin directory) on your website using an FTP client.

To set/use your new translation on your website do the following:

1. From WordPress admin panel, go to Settings » General.
2. Scroll to the end of the page and select your translation language from the Site Language drop-down list.

Find more info at Translate WordPress.

FAQ

Can I use the plugin in WordPress Multisite (WPMU) mode?

Yes, this plugin works with WordPress Multisite.
But, if you have encountered any problem after installation:

1. Please note, you need to install the plugin in network admin section e.g. http://yourwebsite.com/wp-admin/network/plugin-install.php?tab=upload
2. Try, activating the plugin in the network admin.

How many sites can I use WooCommerce Multistep Form & Product Designer on?

You need to purchase one license for each site you want to use WooCommerce Multistep Form & Product Designer on.
1 site = 1 license, 2 sites = 2 licenses, 3 sites = 3 licenses and so on.
It doesn't matter if they are all in use by the same company, on the same server, by the same developer, etc. The license terms are single use – one license per site.

Is there a developer/multi-use license for this pruduct?

Currently, the only option is to purchase an individual Regular License for each site on which WooCommerce Multistep Form & Product Designer will be used.
The CodeCanyon standard (Regular/Extended) licenses both are only for individual (single) usage. The only difference is about to charge or not to charge the end customer.
We can not also provide you with a developer/multi-use license directly as we have an exclusivity agreement with CodeCanyon that means, we can only distribute our products through them.
At this time, for every website that you have WooCommerce Multistep Form & Product Designer installed and activated on, you need to purchase an individual Regular or Extended License. 1 site = 1 license, 2 sites = 2 licenses, 3 sites = 3 licenses, etc.

For more information please read this article: http://codecanyon.net/licenses/faq

Credits

Design & Development:

• WooCommerce Multistep Form & Product Designer - Created By Axent Media - CodeCanyon license.

Third Parties

• jQuery - Released under the terms of the MIT license.
• TipTip - This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses.
• Plugin Update Checker - Released under the MIT license.
• Select2 - The MIT License.
• Bootstrap - Licensed under MIT.
• Fabric.js - MIT License.
• Spectrum Colorpicker - MIT License.
• Webfont.js - Licensed under the Apache Version 2.0 License.
• bootflat - Licensed under the MIT license.
• Font Awesome - SIL OFL 1.1, MIT License.

Changelog

= 1.2.0 - 12.11.2017 =

• Adding steps details to checkout page.
• Adding steps details to account order page.
• Fixing an issue in showing uploaded images to designer element in WooCommerce 2.6

= 1.1.0 - 27.07.2017 =

• Adding form duplication feature.
• Fixing an issue in plugin service manager.
• Fixing an issue in saving variable products attributes.
• Fixing issue of showing order details in order viewer in WooCommerce 3.1.0 version.
• Fixing images cross origin issue in designer.
• Fixing an issue in greater, greater equal, less and less equal conditions.

= 1.0.0 - 20.04.2017 =

• First release.