In this article you will learn how to allow your customers to upload images before adding Products to Cart, using Upload Add-on for Woocommerce and Pixo Image Editor, in five easy steps.
Uploading images to Cart helps store owners to capture additional information from their customers and also saves considerable time in preparing the Order for the customer without waiting for additional information that might be required. A great example is a T-Shirts store that allows the customer to purchase a T-Shirt and to have a custom image printed to the front and/or back of that T-Shirt.
Step 1
The first step is to install the Upload Add-on for Woocommerce plugin. Simply go to your Plugins in the wp-admin section and click Add New. In the Search UI, select to search by Tag from the drop-down, and type “WooCommerce file upload” in the search field:
Install & Activate the plugin.
Step 2
Step 2 is to configure the plugin. In the WooCommerce wp-admin section you will have a new sub-menu called “Woocommerce Image Upload”:
Click on it and you will go to the Settings page of the plugin. Make sure to check the “Upload Mandatory” checkbox. You may also add a custom text to appear before the file input field on the Product’s page:
Save the changes.
Step 3
Step 3 is to create your Woocommerce Products and enable file uploads for them. In the Add/Edit Product page in wp-admin, you will have a new tab in the Product Data metabox called File Upload. Make sure to enable it:
Publish or Update your Product. Now you should be able to see the file input field on the Product’s page:
Step 4
Step 4 is to install Pixo Image Editor. Simply go to your Plugins in the wp-admin section and click Add New. In the Search field type “pixo”:
Install & Activate the plugin.
After activation you will see a notification that Pixo requires some additional actions in order to complete its installation:
Click on the notification link. You will be redirected to Pixo’s registration page:
Pixo Editor is actually a Software-as-a-Service (SaaS) and the WordPress plugin is just a wrapper of this service. In order to use the service, you will have to register.
Step 5
Step 5 is to configure Pixo to work in your website’s front-end. Go to Pixo Editor settings in the wp-admin section. Click on the Frontend tab and enable the Global editor:
Click Save.
And that’s it! When your customers upload an image from the Product’s page, Pixo Editor will open:
They can now apply Instagram-like image filters, add stickers, rich text, frame, shape, and more:
The WordPress plugin also allows you to upload and manage your own Stickers collection, but we will cover that in another article.
Finally, when the customer saves his changes and adds the Product to the Cart, the edited image will be properly uploaded:
This will take three (3) minutes to set up.
Both Upload Add-on for Woocommerceand and Pixo Image Editor for WordPress plugins are free. Pixo Editor service has a free version too, but the coolest features are Premium and require a subscription. You can purchase a subscription from Pixo Editor’s website.