Step 1 – Install plugin
↑ Back to topIf 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 topClick 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 topDuring 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 “Designs ordered” you will now find a new entry. Click the eye-icon to get more information about the design. Also, you’ll be able to generate some export file (PNG, JPEG, PDF, WEBP, SVG and JSON).
The rendering duration will take some seconds. After it has been finished, the created file will be automatically downloaded.
If you have issues generating the image please use the most recent version of the Google Chrome browser.
Step 4 – Add images
↑ Back to topOf 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 images 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 topKILB 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 topTake your time to get to know the Product Designer. It’s an extremely powerful plugin, and therefore it might take some time to get used all the options.
We don’t want you to read some extensive documentation document first before you can actually work with the plugin. Therefore all configuration options are documented right in the plugin.
We recommended, you play around a bit with all the configuration options to get a better understanding.
For further help regarding our Product Designer for WooCommerce please have a look into the documentation:
https://docs.product-designer.io
And, last but not least, we’re here for you: If you need support, don’t hesitate to contact us.
