Backend Configuration for Designer Tool – Getting started with Woocommerce Designer tool

This article explains the woocommerce designer tool and the basic backend configuration required in order to get started. 

Here’s how to successfully add your customizable products.

  1. Configure Default Design (Set Image Sides & Design Area) 

The first and mandatory step while adding a new product is setting  ‘image sides’ and ‘design area’ of the product.

  • For that, navigate to your ‘Designer Tool backend’. Go to: Catalogue -> Products and navigate to the detail page of the product for which you have enabled the BYI-designer tool.
  • Now, you can set ‘image sides’ by clicking on the image and after saving the product, you can set the design area in the image manually.
  • There is another way to configure the product in just one click. On the product detail page, there is a green button on top named “Configure Default Design”. By clicking on this button, the image side and the default design area will be added to the center in the first image of the product. Other attributes like Base, Small, Thumbnail can be added automatically.
  • Click the “OK” button and then “Save” the product. Once completed you will get a success message.

(i) Select Image Sides;

By clicking on Product Image, the ‘Image Detail’ pop up window will appear on the screen. Add ‘Alt Text’ and to display this image as the default image on Thumbnail, Product View and any other area, select the option of Role: Base, Small, Thumbnail, Swatch accordingly. Select the “Image side” for the product image from ‘Image Side’ dropdown list. After adding all the details, don’t forget to save it. You will not be able to create a design area for the product until you save it. 

(ii) Create Design Area

After saving, click on the “Brush” icon and “Create Design Area” window will pop up on your screen. To add a design area, use the mouse cursor and resize the selection box on the product image to set the design area for that particular product image side. (e.g. Front Side) After creating a design area, click on the “Save Design Area” button.You can delete a design area by clicking on the “Delete” button from the right side.

  1. Masking Category And Masking File

You can create, upload, delete or assign masking categories and masking files from here only. You can add a Masking file by choosing a masking category and masking image that must be SVG file from Select Existing Masking. 

  • To select any pre-uploaded masking file, select its masking category from the Masking Category dropdown. The names displayed in the Masking dropdown will be as per the name assigned while creating them. 
  • You can also create any category by just providing the name and save to create a new masking category at Create New Masking.
  • Similarly, you can create a new masking file by selecting Upload new masking files and assigning a category to it. It will provide options to save any masking file to use anytime.
Related Articles