{"id":1361,"date":"2018-01-30T09:56:48","date_gmt":"2018-01-30T08:56:48","guid":{"rendered":"https:\/\/4967f73ca45390335.temporary.link\/?p=1361"},"modified":"2023-08-16T16:07:33","modified_gmt":"2023-08-16T15:07:33","slug":"woocommerce-custom-t-shirt-designer","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/woocommerce-custom-t-shirt-designer\/","title":{"rendered":"The step-by-step tutorial on how to create your woocommerce custom t-shirt designer"},"content":{"rendered":"\n\n\n<p class=\"wp-block-paragraph\">Creating a Woocommerce custom t shirt designer store comes with different phases. This article will focus on the process of setting up the Woocommerce custom t shirt designer store with a Product Designer plugin<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This tutorial is a step-by-step guide to teach you how to create a woocommerce custom t shirt designer store using a custom t shirt designer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.orionorigin.com\/product\/woocommerce-product-designer\/?utm_source=website&amp;utm_medium=blog%20article&amp;utm_campaign=woocommerce%20product%20designer%20_link&amp;utm_content=Woocommerce%20Product%20Designer\"><strong>WooCommerce Product Designer<\/strong><\/a> allows any WordPress store to deploy a t shirt customization solution for their customers. Shoppers can create a personalized design by adding images &amp; text, then adjusting fonts &amp; alignments to order a beautifully customized design.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You too can get your WooCommerce custom t shirt designer store up and running in no time by following this simple tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to create a standard WooCommerce t shirt as a variable product<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Variable products can be used to create a product type with variable attributes such as t shirts, wherein the color and size can be changed. When viewing a product on the front-end the customer will see a product with available options to change the color and size.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They will also be able to see the price and stock availability per variation. If the customer tries to click on the <strong>Add to cart<\/strong> button, a prompt will appear directing him to select attributes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Step 1 &#8211; Set the Product Type<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This must be done in WooCommerce, under Products<\/li>\n\n\n\n<li>Add a variable product by either adding a new product &#8211; Add Product, or editing an existing product, Edit.<\/li>\n\n\n\n<li>Then set the Product Type as Variable product<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Step 2 &#8211; Add attributesYou may select a global attribute from the dropdown or add a custom attribute<br>For global attributes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select an attribute from the dropdown menu and Add<\/li>\n\n\n\n<li>If you would like to add all attributes click Select all<\/li>\n\n\n\n<li>Tick Used for variations<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Using custom attributes for specific products:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select custom product attribute and Add<\/li>\n\n\n\n<li>Name the attribute (eg. Size)<\/li>\n\n\n\n<li>Set values using a vertical pipe to separate (e.g., small | medium | large)<\/li>\n\n\n\n<li>Tick Used for variations<\/li>\n\n\n\n<li>Don\u2019t forget to Save attributes<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1380\" height=\"668\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01.png\" alt=\"\" class=\"wp-image-1265\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01.png 1380w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01-300x145.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01-600x290.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01-1024x496.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01-150x73.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD01-768x372.png 768w\" sizes=\"auto, (max-width: 1380px) 100vw, 1380px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Step 3 \u2013 Add variations<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This must be done in the Variations section in the Product Data meta box<\/li>\n\n\n\n<li>To manually add a variation select Add variation and click Go<\/li>\n\n\n\n<li>Select attributes such as color and size<\/li>\n\n\n\n<li>Click the triangle to expand additional data<\/li>\n\n\n\n<li>Edit any available data and fill in the Regular Price<\/li>\n\n\n\n<li>Don\u2019t forget to <strong>Save changes<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1306\" height=\"488\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02.png\" alt=\"\" class=\"wp-image-1267\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02.png 1306w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02-300x112.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02-600x224.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02-1024x383.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02-150x56.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/wpd-02-768x287.png 768w\" sizes=\"auto, (max-width: 1306px) 100vw, 1306px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You may <strong>edit many variations<\/strong> by navigating forward and backward through the list, provided you have more than 10 variations. Each time you navigate to a new set of variations the previous set will be saved.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You may also set defaults on preferred variations. This variation will automatically appear when a customer visits the page. The customer will be able to <strong>Add to Cart<\/strong> directly. You may however only set a default after at least one variation has been created.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All the variation data with respect to variable products will need to be assigned properties. This includes <strong>general information<\/strong>, <strong>inventory<\/strong>, <strong>shipping information<\/strong> and <strong>linked products<\/strong>. If the SKU, weight, dimensions and stock fields are not set, the product will inherit values assigned to the variable product. It is also very important to set price fields per variation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some quick fixes for speeding through variations include <strong>Duplicating a Product<\/strong>, <strong>Bulk editing<\/strong> and<strong> Linking variations<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to turn a standard shirt into a custom t shirt using WooCommerce Product Designer?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A regular t shirt can be turned into a custom t shirt &nbsp;by assigning to it a custom t shirt designer configuration. A <strong>custom product configuration<\/strong> is a set of parameters which regulates how the product works.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>WPD &gt; Configurations<\/strong> and create a new configuration<\/li>\n\n\n\n<li>Under <strong>Basic settings<\/strong> you can add a <strong>Design from blank<\/strong> button<\/li>\n\n\n\n<li>You can also apply a custom <strong>Canvas<\/strong> and define the <strong>Parts<\/strong> for your configuration<\/li>\n\n\n\n<li>Once you have created a configuration you can create a custom WooCommerce t shirt by entering a product name and price, then select the product type and a configuration.<\/li>\n\n\n\n<li>The same process may be followed for each t shirt variation<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1238\" height=\"568\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03.png\" alt=\"\" class=\"wp-image-1268\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03.png 1238w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03-300x138.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03-600x275.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03-1024x470.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03-150x69.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-03-768x352.png 768w\" sizes=\"auto, (max-width: 1238px) 100vw, 1238px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You can learn more about how to create a custom product <a href=\"https:\/\/www.orionorigin.com\/tutorials\/create-woocommerce-custom-product\/\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How we designed templates for our Woocommerce custom t shirt?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Templates are great when you want to create several custom products such as t shirts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To create a template:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to WPD &gt; Templates<\/li>\n\n\n\n<li>Click New template<\/li>\n\n\n\n<li>Select a product<\/li>\n\n\n\n<li>Assign a Category<\/li>\n\n\n\n<li>Add formats and features<\/li>\n\n\n\n<li>Insert shapes<\/li>\n\n\n\n<li>Upload images<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1238\" height=\"634\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04.png\" alt=\"\" class=\"wp-image-1269\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04.png 1238w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04-300x154.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04-600x307.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04-1024x524.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04-150x77.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-04-768x393.png 768w\" sizes=\"auto, (max-width: 1238px) 100vw, 1238px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">For detailed instructions on using templates visit <a href=\"https:\/\/www.orionorigin.com\/tutorials\/create-display-templates-customers\/\">this page<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to get images and fonts?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You may be wondering where we obtained the images and fonts used in the demo;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How do we get our images?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We purchased images from <a href=\"https:\/\/creativemarket.com\/Mocca2Go\/541278-Men-Women-Ghost-T-shirt-Mock-up?u=orionorigin\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Creative Market<\/span><\/a> and manipulated them using photoshop,. You can also purchase images from <a href=\"https:\/\/elements.envato.com\/?utm_source=envatocom&amp;utm_medium=promos&amp;utm_campaign=elements_envatocom_quicknav&amp;utm_content=env_quicknav\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Envato Elements<\/span><\/a>. &nbsp;Another good resource from which you can get clip art for free is <a href=\"https:\/\/openclipart.org\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Openclipart<\/span><\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Where did we find the fonts used in our demo?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ve used google fonts, however the plugin also supports custom ttf fonts.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Fonts is the different ways in which you can style your text. Google fonts &nbsp;is a repository of free fonts that you can download or embed into a webpage. With more than 1000 fonts from which you can choose. Download your fonts <a href=\"https:\/\/fonts.google.com\/?selection.family=Open+Sans%7CRoboto\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">here<\/span><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Custom TTF fonts is a file extension for a font file developed by Apple. TTF files are currently used by Apple and Microsoft as a raster font format. It can be scaled to any size without quality loss or pixelation, and the stored image appears the same when printed as it does on-screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to create the alternative products section?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The alternative products is a feature of the <a href=\"https:\/\/www.orionorigin.com\/product\/woocommerce-product-designer\/?utm_source=website&amp;utm_medium=blog%20article&amp;utm_campaign=woocommerce%20product%20designer%20_link&amp;utm_content=Woocommerce%20Product%20Designer\"><strong>Woocommerce Custom Product Designer<\/strong><\/a> which helps your customer select or switch to an alternate product during a configuration without losing his design. This is really useful when a visitor is customizing a blue t shirt for example and then wants to see how it looks on a green one. He can then click on the green t-shirt on the upper left side of the designer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This woo-commerce custom t-shirt designer is very flexible during manipulation and allows you to work without hassle or frustration.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1312\" height=\"652\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05.png\" alt=\"Woocommerce custom t shirt designer\" class=\"wp-image-1270\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05.png 1312w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05-300x149.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05-600x298.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05-1024x509.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05-150x75.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-05-768x382.png 768w\" sizes=\"auto, (max-width: 1312px) 100vw, 1312px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The first thing to know is that this feature is only available for <strong>variable products<\/strong> and uses the variation attributes as switches. It can be setup in the <strong>Related Products \/ Quantities section<\/strong> of the variable product for which you wish to enable it as below:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1271 size-full\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06.png\" alt=\"Woocommerce custom t shirt designer\" width=\"1258\" height=\"432\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06.png 1258w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06-300x103.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06-600x206.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06-1024x352.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06-150x52.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-06-768x264.png 768w\" sizes=\"auto, (max-width: 1258px) 100vw, 1258px\" \/><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;How to setup the alternative quantities section?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Woocommerce custom t shirt designer has a feature called &#8220;alternative quantities&#8221; which allows your customer to purchase a variable product in different quantities. Let say for example that the visitor is customizing &nbsp;a red t shirt. Using the alternative quantities feature, he can add the same design in multiple sizes to his cart in different quantities. It can be setup in the Related Products \/ Quantities section of the variable product for which you wish to enable it as below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1248\" height=\"420\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07.png\" alt=\"Woocommerce custom t shirt designer\" class=\"wp-image-1272\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07.png 1248w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07-300x101.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07-600x202.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07-1024x345.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07-150x50.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-07-768x258.png 768w\" sizes=\"auto, (max-width: 1248px) 100vw, 1248px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">How to set up the editable area (bounding box) in the Woocommerce custom t-shirt designer plugin?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Woocommerce custom t shirt designer also has a bounding box section, which allows you to set the bounding boxes parameters if needed. This parameter can be used to define the editable area INSIDE the canvas. &nbsp;The client can clearly see the area he can edit during the customization process. For example if you want to configure t-shirt as your product, in the process of creating your configuration you will define the basic setting then the dimensions of the canva. The bounding box section will allow you to set the editable limits to your canva. Make sure you fill the remaining sections and save your configuration.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/01\/WPD-08.png\" alt=\"Woocommerce custom t shirt designer\" class=\"wp-image-1273\" title=\"\"><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Has this article been helpful to you? Is there a question on your mind? Feel free to leave a comment in the comment box below.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a Woocommerce custom t shirt designer store comes with different phases. This article will focus on the process of setting up the Woocommerce custom t shirt designer store with a Product Designer plugin This tutorial is a step-by-step guide to teach you how to create a woocommerce custom t shirt designer store using a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[418],"tags":[267,247,271,36,81,17],"class_list":["post-1361","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-t-shirt-designer","tag-custom","tag-online-shop","tag-t-shirt","tag-woocommerce","tag-woocommerce-product-designer","tag-wordpress"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/1361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/comments?post=1361"}],"version-history":[{"count":3,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/1361\/revisions"}],"predecessor-version":[{"id":157451,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/1361\/revisions\/157451"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media\/2642"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=1361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=1361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=1361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}