Magento 2 Web To Print extension allows you sell personalized products on your online store. With the help of Web To Print extension, the customer can customize the product with text, images, and shapes. Magento 2 Web To Print extension is a must who is selling personalized products such as printed t-shirts, personalized coffee mugs, custom phone cases.
Check how to create a customizable product using the plugin –
Check a brief overview of the plugin configuration –
- Set web to print status as active or not
- Show declaration and instruction text before adding product to cart
- Upload font files for the text editor
- Add various color options for the canvas
- New product type added in Magento – Web To Print
- The admin can set minimum DPI, height, and width of the images
- The admin can set the Canvas width and height in pixels
- Create multiple templates for the front view, back view, or side view
- The admin can upload mask image for the template design
- Customer can fully customize the template using image, text, and shapes
- After customizing and designing the product, the customer can download the image
- Customized image will be visible in the shopping cart and other places as product image
- Module supports multiple languages and translations
Step 1 – Upload Folder
Step 2 – Run Commands
Open the terminal from the Magento root directory and run the following commands:
First command - php bin/magento setup:upgrade
Second Command - php bin/magento setup:di:compile
Third Command - php bin/magento setup:static-content:deploy
Step 3 – Clear Cache
For translating the module language, please go to app>code>Webkul>WebToPrint>i18n and edit the en_US.csv file. Now, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code like de_DE.csv.
After installing the extension, go to Stores>Configuration>Webkul>WebToPrint Settings. The following options will be available:
Active – Select Yes to enable the module or select No to disable it.
Declaration Before Add to Cart – You can show any declaration message to the customer before adding the customized product to the cart.
Instruction Before Add To Cart – You can also show some instruction message to the customer.
Canvas Width in Pixels – Enter the minimum width (in pixels) of the upload image.
Canvas Height in Pixels – Enter the minimum height (in pixels) of the upload image.
Image Width In Pixel – Enter the width (in pixels) of the final image.
Image Height In Pixel – Enter the height (in pixels) of the final image.
Upload Images Minimum DPI – Set minimum DPI required for uploading images by a customer. Higher the DPI, the sharper and clearer will be the printed images.
Adding Image Category
For uploading the images for the templates, the admin first needs to create image categories. Go to Web To Print>Image Category>Add Images Category. Then, enter the name, description, and upload any category image.
After creating the categories for the images, the admin can now upload images for the templates. Go to Web To Print>Images>Add Image. Upload the image from your computer, select category and set alt text description.
The admin can upload custom font files for the text editor. Go to Web To Print>WTP Fonts>Add Fonts and upload the font file.
Although the admin and the customer can add the color in the template using color name or color codes. Besides that, the admin can create some predefined color options for the template. Go to Web To Print>WTP Colors>Add New Color.
Create Personalized Products
For adding a new personalized product to your online store go to Catalog>Products>Add Product>Web To Print.
Then, go to WTP Customize tab and click Create WTP Template.
Clicking the Create WTP Template brings up the below section.
To insert a new template, click Add More and the following form will appear where the admin needs to provide the template information:
Title – Set the title for the frontend.
Description – Enter any description of the template.
Base Image – Upload the base image of the product.
Mask Image – Upload the mask image of the product where customization can be done.
Add Template Variation – Use this to add the template variation.
To add a text in the template, click Text icon and edit the text. The text editor has various options to customize the text – font face, bold, italic, size, color etc.
The admin can add the images to the template. The height and width of the image can be adjusted accordingly.
For adding shapes, click Shape and then click any object. You can also customize the shape using fill color, border color, width, etc.
For adding zoom, first click the Zoom and then you can make use of the zoom slider to zoom in or out on the respective image.
The admin can also preview the customization made from the backend.
Customer Front-End View
On the product page, the customers will see the Customize Product button.
After clicking the Customize Product button, the Canvas editor will open. Here, the customer can customize the product images using the text editor, upload image, add shapes to the image or add a zoom functionality to the image. The customer can choose any of the template and customize it accordingly.
Once, the customer finishes the customization, the customer needs to save the template and then preview it. Following is the preview pop-up window, the customer needs to check the declaration, enter quantity, and then click Add to Cart button.
Now, when the customer finalizes the image, the product image will be changed automatically.
Current Product Version - 2.0.2
Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x