Image Editor For Customer Uploads In WooCommerce E-Shop

WooCommerce add-on

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:

WooCommerce add-on

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”:

 

WooCommerce Image Upload sub-menu

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:

WooCommerce Image editor settings

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:

WooCommerce image editor product data

Publish or Update your Product. Now you should be able to see the file input field on the Product’s page:

image editor products

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”:

pixo image editor

Install & Activate the plugin.

After activation you will see a notification that Pixo requires some additional actions in order to complete its installation:

pixo plugin installation

Click on the notification link. You will be redirected to Pixo’s registration page:

pixo image editor registration

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:

configure image editor

Click Save.

And that’s it! When your customers upload an image from the Product’s page, Pixo Editor will open:

pixo editor example

They can now apply Instagram-like image filters, add stickers, rich text, frame, shape, and more:

pixo editor filters

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:

image editor card

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.