Product Designer for WooCommerce by KILB

Step 1 – Install plugin

If you did not yet purchase the plugin you can do so here: https://woocommerce.com/products/kilb-product-designer/

After you purchased a license of the plugin from the WooCommerce marketplace you can install the plugin in the admin area of your shop. Make sure the plugin is not only installed but also activated. After the plugin has been installed there will be a new navigation item KILB Product Designer.

Step 2 – Assign configuration

↑ Back to top

Click the new navigation entry KILB Product Designer. After this you will see the table of already ordered designs. This will be empty of course as no article with custom design was ordered yet.

Now click on the tab “Configurations”. As you can see there’s already a configuration present. This is an example configuration you already can work with. Open the configuration settings by clicking the icon with the three dots. Please add the product SKU (not: article id!) of the product you like to have designed to that configuration. Save the configuration now.

If you open the product detail page for that product it’s not possible to directly click the “add to cart” button anymore. Instead you first need to specify some product design. To test the implementation of the product design please create a new order with that article and any product design.

Step 3 – Generate image

↑ Back to top

During the order process the product designer plugin will only store meta information for the customized designs. Also some small preview image for the basket will be generated. As the rendering of the high resolution graphic can be slow and expensive it will not be done in the browser of your customers nor your shop server. Instead you will need to do that on your locale machine, in your browser.

Log in to the product designer backend again. Under “Ordered Designs” you will now find a new entry. Click the icon with the three dots to get more information about the design. You will be able to download an SVG or a serialized JSON export here. To generate a high resolution WebP you need to click the “Generate” button.

The rendering duration will take some seconds. After it has been finished you will see a small preview image. If you click it, it will automatically be downloaded.

If you have issues generating the image please use Google Chrome browser.

Step 4 – Add images

↑ Back to top

Of course, your customers will be able to upload their own images to add them into their product design.
Additionally you can provide them a set of predefined clip arts to choose from. For this please log in into the WordPress backend and go to Media > Add New.

Upload your image here. After uploaded click Edit, scroll down and enter a category name in Product Designer: Image Category.

If you like to provide background images, it works exactly the same. Add a new media entity and enter a category name for Product Designer: Background Image Category.

Step 5 – Setup translations

↑ Back to top

KILB Product Designer ships with translations for American English (en_US) and German (de_DE). You can find the JSON translations files here:
wp-content/plugins/kilb-product-designer/languages

Our Product Designer will automatically detect your Shop’s language chooses the right translation file.
If you want to add a new translation language, create a new directory kilb-product-designer in your WordPress language directory – which is usually wp-content/languages.
Add a new JSON file here and make sure it’s file name contains the Shop’s locale.

Example:
wp-content/languages/kilb-product-designer/es_ES.json

Be sure that the first part of the file name is lowercase (es), the second part is uppercase (ES) and there’s an underscore between both. Also make sure that the extension of the file is json.

Now copy all the content of one of the existing translation files from the plugin’s directory. For example you could use
wp-content/plugins/kilb-product-designer/languages/en_US.json

Now you can edit the file. Make sure you leave the JSON structure and name of the keys unchanged and only edit the values.

Step 6 – Read documentation

↑ Back to top

For further help regarding our Product Designer for WooCommerce please have a look into the documentation:

https://github.com/ckdot/kilb-product-designer-doc/blob/master/documentation.md