Search

WooCommerce: Customer Created Photo Collages for Product Personalization

    Uday Kokitkar
Listen to this article
instagram-woocommerce-integration
Collage of Instagram Images to be Sold with WooCommerce

Emily runs a small business, selling personalized gifts. A top selling item in her store is a customizable mug. As a buyer, you can upload your pictures and add them to the mug. Last month, she increased her sales, by allowing customers to create and add photo collages, onto gifts.

If you’re wondering how you can do the same? This article is for you!

[space]

Photo Collage Creator on WordPress

A collage is a collection. And, in this case, the collection we are talking about, contains photographs or rather images. A simple photo collage creator would work in the following way:

  1. Customer selects a Product
  2. Customer Uploads Photos to create a Collage
  3. Customer Purchases the Product

This is all okay, from a customer’s point of view. But, if we were to translate this into features, to be provided on a WordPress website (with WooCommerce), we would need to do the following:

Customer selects a Product

The customizable product will have to be added in your WooCommerce store. For example, on Emily’s website, this would be a personalizable mug. Such a product will have a collage template, where photos can be uploaded.

Customer Uploads Photos (which are added to the template)

There would have to be an upload option on the WooCommerce product page, using which a customer can upload pictures. When a customer uploads these pictures, they will have to be added to the collage template so that the customer can see a live preview of the photo collage, he is creating.

Customer Purchases the Product

Once the customer has created the collage, he can submit it, and purchase the product from the WooCommerce store. The collage image will have to be sent along with the purchase order.

[space]

On the usual WordPress website, the obvious gap in this solution, is the Collage Creator Application, that fits into your WooCommerce store, which allows customers to create such photo collages to personalize products.

Do not worry. We have a solution.

[space]

Insta-Woo: The Ultimate Photo Collage Generator

By integrating Instagram and WooCommerce you can create an ultimate collage maker. You can set a grid template, and allow users to pick images from Instagram to form a collage and then purchase it as a product.

Integrating Instagram with WooCommerce

To fetch images from Instagram, we need to use an authentication protocol and then log into the platform. If the collage preview has to be shown, we’ll need to use AJAX.

Adding a Custom Template

Instead of a grid template, you could also allow a custom template to be created, using Canvas.

  1. There will be an option provided to the store admin, to upload a background image. This background image could basically represent the product, with placeholders for where images can be uploaded. This option will be present on every product page. For example, below, I’ve uploaded an image of a customizable wooden frame. As you can see, there are 3 placeholders.
    • upload-background-template-collage
  2. As the admin, you will then be able to create and add masks, onto the background image. These masks will be portions of the image, where an uploaded image will be added. Here, you basically have to mark these placeholders.
    • create-masks-collage
  3. Once you’ve done that, you can save the created template and then publish the product.
    • identify-masks-collage
  4. On the front-end, a customer will be able to upload images (either from his system or Instagram- the usual way), and a live preview of the product will be shown.
    • created-photo-collage-woocommerce

[space]

The Photo Collage Maker, can be integrated into your WordPress website, as a custom solution. The customizable template allows store owners to create any kind of templates they can print. And allows customers to create collages on the fly, to personalize products on sale.

[space]

Uday Kokitkar

Uday Kokitkar

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads