Create a customizable product on your website using WooCommerce

Do you have an online store selling tangible or non-tangible products? Have you ever been decided to allow your online customers to create their loving product like gift boxes, products packs, perfumes, t-shirts, gift cards, hats, mugs, promotional gifts and so on that are unique by uploading their own images and photos?

In this article I’m going to introduce you a WordPress/WooCommerce plugin which allow you to add this functionality to your WooCommerce powered online store easily so, you can start accepting customized product orders from you online customers.

The plugin is called “WordPress Social Board“. This plugin is fully integrated into WooCommerce and uses WooCommerce shopping cart. You bind your custom product forms to WooCommerce products and they can be automatically added to the WooCommerce cart at the final step of the product designing step.
You can also make relationships between multiple form steps using a powerful conditional system.
Your customers will get a calculated cost for their requested product in each step depending on the features they request or the items they add into their designed product and the final product will be added to the cart with the total calculated price.

Where do I get the plugin?

To start with, first get the plugin from the following URL:

Download the plugin

You can also take a look at its live demo here:

Plugin live demo

After downloading the plugin you will be given a zip file including another zip file in it named wc-multistep-designer-*.zip that it is the original plugin file.

Installation

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

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 Creating a Customizable Product, and Binding Forms To Products sections.

Creating a Customizable Product

Here I will show you that how to create a sample mug and bind it into a WooCommerce product with this plugin.

  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.

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

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

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

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

  1. Fill-in the “Option Details” form according to the image below and save.

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

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

  1. 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.
  2. 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.

  1. Fill-in the “Element Details” form according to the image below and click the 24. Add design view button.

  1. Fill-in the “Design View Details” form according to the image below and 27. Save.

  1. Click on the 28. Layers button to open the “Manage Design Layers” page.
  2. Click on the 29. Image button, enter a title for your new layer and click OK.

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

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

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

  1. Click the Back button twice to come back to the step designer page again.
  2. 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.
  3. 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.
  4. Fill-in the “Element Details” form according to the image below and click 41. Add Option button.

  1. Fill-in the “Option Details” form according to the image below and save.

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

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

  1. 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.
  2. Click on the 50. Edit Connection pencil icon to open the “Manage Connection” popup.

  1. On the “Manage Connection” popup, click on the 51. Add Condition button to create a new connection condition.
  2. Create a condition according to the screenshot below and save.

  1. Close the popup window and come back to the “Form Steps Designer” again.
  2. 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.
  3. Click on the 52. Edit Connection pencil icon between “Custom design” and “Select box” steps to open the “Manage Connection” window again.

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

  1. Close the window and come back to the “Form Steps Designer”.
  2. Make just a connection (without any condition) between “Design mug” and “Select box” steps too.
  3. Make just an another connection between “Select box” and “Last Step” steps too.
  4. You will finally have all the steps related like the screenshot below.

Important!

You would already need to assign your multi-step form to a WooCommerce product.
To assign a form to a product, continue reading this section

Your multi-step product form is ready!

To see how your multi-step form would be displayed on your website after assigning to a product, click here or see the live demo here.

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.

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

Custom product showcase

Conclusion

In addition to simple installation process and easy to use and integrate this plugin with WooCommerce this plugin has many of other useful options which you can use to make it suitable for your website. With an appropriate price of $28 you can add a great functionality to your website that would cost a lot if you hire a developer for that.

Did you love this plugin? Please, write me your idea.