WordPress plugin for WooCommerce custom paintings

8 months ago · ••• views · 3 min read

Project type: WordPress plugin
Technologies: ReactJS, MaterialUI, WP REST API
Client industry: Printed products
Client request: Allow the customers to customize their printings with personal photos.
Goal: Implement a solution with a friendly UI, a better UX, fast and letting the users choose all the options for customizing thei photos.

About the client/business

TablouriColorate is a small business based in Târgu Mureș, Romania, with expertise in custom printing products. They print photos on canvas material and help their customers to create their custom products in the most innovative, simple, and fun way possible.

The problem

After a migration from a custom e-commerce limited platform to WooCommerce, the main challenge was to create a way that the customers can create their custom products while having more options to choose and customize their photos like choosing where to upload the picture from (either device or social media), painting size, finishing, packaging, photo filters, and retouching services. The WooCommerce market was a bit limited in this direction, so the best solution was to implement a custom plugin that allows all of these.

My custom plugin

This is where my custom WordPress plugin takes the stage. An earlier version of it was based on jQuery, but unfortunately, it turned out to be really slow when users were uploading their photos. How many users, and that many photo sizes, so it was a bit frustrating. The next journey was to rewrite this plugin and introduce something new, like a ReactJS interface. Said and done. I have rewritten the plugin and started to develop a ReactJS application. After some magic tricks, the solution was done, faster and very nicely designed.

Show results

The proposed solution seemed to perfectly fit for TablouriColorate and after that, we have gone further and "complicated" things a bit. I have implemented another similar page for posters, banners, and stickers and a nice thing was a page for customized photo collages. It lets the user upload many photos in the same frame in 8 different patterns like the below:

Some technical details

The WordPress plugin was developed following the official WPCS guidelines, and the ReactJS application was implemented as a standalone application, built on moved in the plugin directory. For the ReactJS application, I used the MaterialUI elements and Webpack.