- January Free Plugin of the Month: EDD Sale Price
- February Free Plugin of the Month – WooCommerce Advanced Shipping Validation
- March Free Plugin of the Month: Stripe for WooCommerce
- April Free Plugin of the Month: Role-Based Pricing
- May Free Plugin of the Month: T-Shirt Designer
- June Free Plugin of the Month: WooCommerce Shipping Estimates
- July Free Plugin of the Month: Checkout Notes for Easy Digital Downloads
- August Free Plugin of the Month: Catalog WooCommerce Products
- September Free Plugin of the Month: EDD Featured Downloads
- October Free Plugin of the Month: Pop-up Sales Offers for WooCommerce
- November Free Plugin of the Month: WooCommerce Product Dependencies
- December Free Plugin of the Month: EDD Metrics
Many companies allow personalization on their products. Think about the engraving you can get on the back of Apple products, or write customized messages for tags and cards. This allows customers to get something more unique than what product variants can provide. This month’s free plugin is the T-Shirt Designer plugin for WooCommerce that allows customers to personalize clothing or other products on your store by adding images to them. The plugin is built by ParaTheme.
In this post, we will go over setting up the free plugin, the customer journey using the interface, and some limitations to keep in mind.
Since this is a free plugin available in the WordPress.org directory, you can install it through your WordPress dashboard. Click on Plugins > Add New > search for “T-Shirt Designer”. Install and activate the plugin to get started.
The plugin adds two items in the left sidebar – the “Sticker” post type, and “T-Shirt Designer” settings. The settings are relatively bare-bones for the free plugin and primarily highlight areas to find help, and features of the premium plugin.
The only thing you can adjust in the settings page is how many products are shown to the customer on the storefront. By default, 10 items are shown. You can adjust this based on the number of products you plan to allow customers to personalize.
Next, you can select the images (called stickers) that customers can add to your products. On the left sidebar, click on Sticker > Add Sticker. Fill in the name of the sticker, the sticker category, and select the sticker by adding it as the Featured Image. For the best experience, add PNG files with a clear background for your sticker images.
Now, you will need to set the products for which you will allow customizations. To do this, create a new product or go to an existing product, and fill out the product details like the description, price, SKU, etc. At the bottom of all edit product pages, you will see the plugin section where you can upload the front and back images of the product.
Note that even if images are shown in this section, you have to upload/assign the front and back images for each product you want customers to be able to personalize. You cannot assign products to show through the plugin in any other way. Only those products will be shown for personalization for which you have individually uploaded images in the edit product section.
Lastly, you will need to add the
[tshirt_designer] shortcode to the page where you want to display the storefront editor.
Let’s take a look at the customer journey on the front-end. Once you add the shortcode to a page, the storefront editor is displayed.
The editor shows three tabs on the left pane – Product, Sticker, Text. Customers can select the product they want to personalize. They will have to do the personalization for the front and back separately. So, after they select the product, they will select Front or Back, and then select the Sticker tab and click on a sticker to add.
Customers can move the sticker to where they want to place it, and drag to resize the sticker. They can also double-click the sticker to adjust further options like the opacity, rotation, etc.
In the Text tab, customers can choose to add text to the product.
For the text, customers can change the font size, type, color, and style. The text can be moved around on the product to where the customers want it.
Once the customizations are done, customers will click on Preview. This triggers a lightbox with the preview of Front OR Back of the product. In order to save these changes, customers will have to click on the disk-button on the right side of the screen.
This will add the side of the product you completed at the top of the editor. You can now do a similar process for customizations to the other side of the SAME product. Once you’ve finished these customizations, click on the “Add to cart” button along with the quantity.
This will add the product to the cart – with the front and back images included in the product description that will become part of the order. In this way, customers and you can follow the links to the images to see the personalizations.
Take a look at the demo store to see the plugin in action.
Although the free plugin adds the ability for customers to personalize certain products, the plugin does have a few limitations.
First, customers cannot add customization to more than one product in one go. After they’ve added a product to the cart, they cannot remove the selected products at the top of the editor, but can only replace them by starting the customization for another product. This is not entirely intuitive as the selected products can only have one Front and one Back view.
Second, customers can go through the customization for the Front of one product, and the Back of another. This will add two different products in the top selected area. When this is added to the cart, only one base product is included in the cart which has the lower price of the two. This can create confusion as this function is not explained in the interface of the plugin.
Lastly, the interface and functionality of the plugin is not very intuitive. If you do use the plugin, consider including step-by-step instructions for your customers on the page about how to use the plugin, and potential user experience issues they may encounter. Two main things to highlight – that customers have to customize, preview, and save the Front and the Back separately, and that it is up to the customers to add the Front and Back of the same product at one time to the order.
The T-Shirt Designer is a free plugin that allows you to sell customized clothing (or other products). The plugin lets customers apply and place images (stickers) or text at the front and back of clothing items before adding them to the cart. In this way, customers are able to create unique items related to your brand.
You can use the free plugin to select images or stickers, and the products that these can be applied on. Customers can adjust certain aspects of the stickers or text – like the opacity, rotation, text font, text color, etc. You can also upgrade to a premium version of the plugin to allow customers to upload their own images to be printed on your products.
Do you sell customized products on your store? Why or why not? Please tell us in the comments below.