Everything you need to know about the Layered Images add-on

This document explains how the Layered Images add-on for Advanced Product Fields for WooCommerce works and how it can be set up.

Introduction

Using Advanced Product Fields lets you add form input fields to your product pages, so your customers can personalize their product before adding it to the cart.

On occasion, you’ll need to showcase different designs and styles depending on the options a customer selects. But using a separate image for each style/design can be a time consuming task. The Layered Images add-on allows you to use image layers to create the final product image – saving you time.

Take a look at our “configurable chair” demo product, which has 9 different variations. Instead of loading 9 different images, you can use the Layered Images plugin to create only 6 layers which cover all possible combinations.

In this guide, we will show you how the add-on works.

Installing the Layered Images add-on

To install the Layered Images add-on, follow these steps:

1. Log in to your Studio Wombat account and download the plugin.
2. Go to the Plugins section in your WordPress admin dashboard and select “Add New.”
3. Browse to the downloaded ZIP file and click Install Now.
4. Once the plugin is installed & activated, go to WooCommerce → Settings → Product fields → Layered Images and enter your license key.
5. Click Activate.

You’re now ready to use the add-on.

Setting up a product

Before we can use the Layered Images add-on, we need to have a WooCommerce product configured with some custom input fields.

For the purpose of this guide, we’ll create a customizable chair with 2 color fields (“Primary Color” and “Secondary Color”). If you do not know how to do this, please read our Advanced Product Fields getting started guide. It explains in detail how to add fields to your products.

We created 2 fields of type Color Swatches. The configration looks like this:

Setting up Layered Images

Now that we have our WooCommerce product fully configured, we can start to configure the layers.

Adding a base background image

When creating layered images, you need to start with a base layer that acts as a basic background image. In many cases, this will just be a plain colored background with some shadows that complement the layers that follow.

In the case of our chair product, our base layer looks like this. As you can see, it is a simple layer that contains some shadows for the chair’s legs.

To set this up, navigate to the Custom fields tab of the product and scroll down to the Layers section. First, enable the toggle which tells the system that layered images should be used.

Next, click the light gray Select box, and select or upload your base layer image.

Creating layers

In this final step, we will define the actual layers and link them to the color fields created at the beginning of this tutorial.

Click Add a layer. A popup opens where you can select which field this layer is for:

Add a layer for both the Primary Color and the Secondary Color. Once both layers have been added, you should see a similar screen like below:

Open up the Primary Color layer by clicking on it. You’ll see all color options appear that require you to add a layer. Click the light gray Select box next to each option to select a specific image.

Repeat this step for the Secondary Color layer.

Once done and you have defined a total of 6 layers, click Update to save the WooCommerce product configuration.

That’s it! You now have a product that displays layers instead of single images.