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:
You can also take a look at its live demo here:
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.
- Browse to, WordPress admin dashboard.
- Go to WC Multi-Step » Add Form, fill out the “Form Detail” section according to the image below and save the form.
- According to the image below, click on the Add new step button to create a new step.
- You will find your created step right beside the “Last Step” with a green flag that refers to the “Start Step” of the form.
- Click on the “Step” input box and change the step name to 5. Custom design as follows.
- Click on 6. List step elements button right above the step box.
- 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.
- Fill-in the “Element Details” page according to the image below and click on the 10. Add Option button to create a radio option.
- Fill-in the “Option Details” form according to the image below and save.
- You will be redirected back to the “Element Details” page again.
- Click on 10. Add Option button once again and fill-in the “Option Details” according to the image below and save.
- You will be redirected back to the “Element Details” page again and you can see your step form elements as below.
- Click on the 18, 19. Back button twice to come back to the step designer page.
- 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.
- 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.
- Fill-in the “Element Details” form according to the image below and click the 24. Add design view button.
- Fill-in the “Design View Details” form according to the image below and 27. Save.
- Click on the 28. Layers button to open the “Manage Design Layers” page.
- Click on the 29. Image button, enter a title for your new layer and click OK.
- The media library window will be opened and you should upload/select the image for your layer and 33. Pick.
- Click on the 34. Text button to create a new text element, enter a title for your new text layer and click OK.
- Click the 37. Save Layers button to save your layers.
- Come back to the “Element Details” page again by clicking the Back button for twice.
- According to the screenshot below, try adding the Design Views for all the other viewports of your product if you need.
- Click the Back button twice to come back to the step designer page again.
- 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.
- 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.
- Fill-in the “Element Details” form according to the image below and click 41. Add Option button.
- Fill-in the “Option Details” form according to the image below and save.
- You will be redirected back to the “Element Details” page again.
- Click on 41. Add Option button once again and fill-in the “Option Details” form according to the image below and save.
- You will be redirected back to the “Element Details” page again and you will see your create radio options in the Options tables.
- According to the screenshot below, try adding the radio options for all the other gift boxes you desire.
- Click on the 48. Back button for twice to come back to the step designer page at the end.
- 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.
- Click on the 50. Edit Connection pencil icon to open the “Manage Connection” popup.
- On the “Manage Connection” popup, click on the 51. Add Condition button to create a new connection condition.
- Create a condition according to the screenshot below and save.
- Close the popup window and come back to the “Form Steps Designer” again.
- 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.
- Click on the 52. Edit Connection pencil icon between “Custom design” and “Select box” steps to open the “Manage Connection” window again.
- Create a condition according to the screenshot below and save.
- Close the window and come back to the “Form Steps Designer”.
- Make just a connection (without any condition) between “Design mug” and “Select box” steps too.
- Make just an another connection between “Select box” and “Last Step” steps too.
- 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
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:
- From WordPress admin dashboard, browse to Products.
- Edit the product you would like to assign your multi-step form to, from your products list.
- In the Product Data block, select Multi-Step Designer from the left tab.
- Select the form you would like to assign to your product/service from the Bind to form drop-down list.
- 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.
How to Create a Social Stream On Your WordPress Website
In the world of communications, lots of people are members of various social networking websites. Every company has an official social media page on Facebook or Google+ and lots of companies notify their customers of their latest news or updates using Twitter. Any photographer has his own profile page on Instagram and lots of companies have their own video channel on YouTube and Vimeo.
We might be using the social media networks for any of the above reasons but, have you ever been decided to share your social networking activities with your website visitors? This is exactly what we call it Social Stream. A social stream, is a single stream of news, photos, videos and updates from multiple social media networks.
In this article I’m going to introduce you a WordPress plugin that allow you to combine all of your social networking activities into one single social stream and display on your WordPress website as a stylish social stream very easily.
WordPress Social Board plugin allows you to create a social media stream of various social networking accounts with multiple users. The plugin can display your social stream in 6 different formats. It supports 13 and still growing social networks and includes more than 30 different feed options. Your visitors can share your posts on their Facebook, Twitter, Google or LinkedIn profiles from your website. They will also have the option to reply, re-tweet or favorite the Twitter posts on your social stream. They can even filter your social stream by social networks or using custom defined filters. You can even change the style of your social board using the plugin theme manager or customize it via CSS stylesheets, and make it unique to your website.
Let’s install it!
To start with, first download the WordPress Social Board plugin on your PC.
You can also take a look at WordPress Social Board live demo to see how it’ll look on your website.
After downloading the plugin you will be given a zip file containing another zip file wordpress-social-board-*.zip that it is the original plugin file.
To install the plugin on your website, do the following steps:
1. Go to your WordPress admin panel. Click on Plugin » Add New button.
2. Then click on the Upload Plugin button.
You will see a screen like the one above.
3. Click on the Browse button and select the plugin file wordpress-social-board-*.zip (zip file only) from your PC and upload 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.
Now, you have installed the WordPress Social Board plugin. After installation, you would have to create your Social Board. Here we will explain you that how to create a Facebook wall on your website.
1. Go to WordPress admin panel
2. Go to Social Board » Add New Board and fill out the form as follows.
3. Go to Social Board » Manage Boards page.
4. Copy the Wall Shortcode that is marked with a red circle.
5. Go to WordPress admin panel » Pages » Add New Page
6. Paste the shortcode into your created page content as follows. You can also put the shortcode in a post instead.
7. Your social wall is ready now. Go to your created page by clicking on the “View Page” button.
Final word…
If you used WordPress Social Board plugin and you have any questions or suggestions concerning to this plugin please, let us know your thoughts on it by commenting below.