Woocommerce Modification: Personalised Card Shop

HTML5 canvas preview modal showing user's text and font/color combo - complete with overlaid watermark also drawn on using canvas

One of my favourite and most technically advanced jobs lately was a plugin expansion pack for Woocommerce, to allow the user to run a personalised card shop using Woocommerce.

I modified the product add/edit form with a new meta box allowing the admin to enter size and x+y position for a contentEditable div which is overlaid on the main product, they also enter a default text to go inside the div.

The contentEditable div allowing user to change text as dropdowns for font and color

The contentEditable div allowing user to change text as dropdowns for font and color

The contentEditable div allows the end user to edit the default text as they wish. Woocommerce variations are used to allow the user to change the font and color which updates in the contentEditable div in real time. On the main product page the user also has a preview button, when clicked this opens a modal showing the card’s image in 1008px width canvas with the text entered in the editable div in the chosen font and color, giving a better representation of what the finished card will look like.

HTML5 canvas preview modal showing user's text and font/color combo

HTML5 canvas preview modal showing user’s text and font/color combo – also features watermark drawn on in canvas

They add their cards to the shopping cart complete with their modifications, and once they pay for their order, their text is added on to a hi res pdf uploaded by the admin, and the finished products are exported to s3 for printing and sending via the Amazon S3 API.

The admin simply adds one image of the card (the 10008px wide version and it is cropped to the other sizes) and the hi res pdf for the text to be overlaid onto. Another feature of the modification is on the catalog page, if you visit the link you will see that the mini product images have been replaced by html5 canvas showing the image with the text written on in the default font/color combo. From that link you can click through to the main product page where you can see the rest of the work described above including the preview button. As the site is French the apercu (preview) button has been translated to Overview, click the Overview button to see the large preview canvas.

Small images replaced by canvas elements showing default text

Small images replaced by canvas elements showing default text

If you then add the product to the cart you can see that the text entered is part of the cart, and you have an opportunity to go back and change your text/font/color as well.

Cart page showing text and choices as well as button to go back and edit

Cart page showing text and choices as well as button to go back and edit

The chances are I built the above for one of my freelance clients. You can hire me at Codeable.io - an WordPress specialist outsourcing site that vets developers to make sure they are of the highest standard.

Posted in Featured, Woocommerce, Wordpress.

One Comment

  1. I was wondering if this had other options like font family and style control. Also do you have this plugin for sale? I would be very interested

Leave a Reply

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