{"id":131051,"date":"2018-03-23T22:18:21","date_gmt":"2018-03-23T21:18:21","guid":{"rendered":"https:\/\/4967f73ca45390335.temporary.link\/?p=2536"},"modified":"2023-08-18T16:10:21","modified_gmt":"2023-08-18T15:10:21","slug":"how-to-create-a-woocommerce-custom-sign-or-lettering-product","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/how-to-create-a-woocommerce-custom-sign-or-lettering-product\/","title":{"rendered":"How to create a WooCommerce custom sign or lettering product?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">This tutorial is a step-by-step guide to teach you how to create a custom product on a WooCommerce store using WooCommerce Lettering and Sign Designer plugin.<\/span><\/p>\n\n\n\n<div class=\"wp-block-cover is-light has-parallax orion-cta-style\" style=\"min-height:217px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-light-green-cyan-background-color has-background-dim-10 has-background-dim\"><\/span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-157860 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/www.orionorigin.com\/wp-content\/uploads\/2023\/05\/2-2.png)\"><\/div><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div id=\"wp-block-themeisle-blocks-advanced-columns-678cc482\" class=\"wp-block-themeisle-blocks-advanced-columns has-1-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-equal-layout has-vertical-bottom ticss-c00aadba\"><div class=\"wp-block-themeisle-blocks-advanced-columns-overlay\"><\/div><div class=\"innerblocks-wrap\">\n<div id=\"wp-block-themeisle-blocks-advanced-column-4d412c51\" class=\"wp-block-themeisle-blocks-advanced-column\">\n<h4 id=\"wp-block-themeisle-blocks-advanced-heading-fb3c7a39\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-fb3c7a39\">Increase your WooCommerce sales effortlessly by offering custom signs and lettering products using Seme.<\/h4>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link has-white-color has-text-color wp-element-button\" href=\"https:\/\/demos.orionorigin.com\/seme\/product\/seme-signs-demo\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=seme+live+demo&amp;utm_id=131051\" style=\"border-radius:0px\" target=\"_blank\" rel=\"noreferrer noopener\">VIEW DEMO<\/a><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 10pt;\"><strong>How to create a custom product configuration?<\/strong><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">A custom product configuration is a set of parameters that can be assigned to one or more WooCommerce products that regulate how they work. Assigning a custom product configuration to a normal WooCommerce product turns it into a customizable product.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">1.&nbsp; Click on <strong>LSD &gt; Configurations<\/strong>, to access the list of existing configurations.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">2. Next, click on <strong>New Configuration<\/strong>&nbsp;to have access to the page on which you can create a new configuration.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/lsd-new-config-button-1.png\" alt=\"lsd new config button 1\" class=\"wp-image-2530\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\"><\/span><span style=\"font-size: 10pt;\">3. Next, define the configuration name.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/lsd-config-name-1.png\" alt=\"lsd config name 1\" class=\"wp-image-2529\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">4.&nbsp;The canvas section allows you &nbsp;to set defaults values as well as necessary parameters for the designer:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/canvas.png\" alt=\"canvas\" class=\"wp-image-2533\" title=\"\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Default product dimensions: this setting allows you to define the product&#8217;s default dimensions (width and height). Those values will be used for generating the final output unless the customer has defined his own dimensions.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Keep ratio: this setting allows you to choose whether or not the customer can adjust his design dimensions by keeping the ratio. This also means that if this setting is set to \u201cYes\u201d, for each defined dimension, the second will be automatically calculated.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Background color selector: this setting allows us to define which colors will be available for the customers. You can decide to give them unlimited choices of colors or allow them to choose from a specific color set that you must define. And if you choose to not let them define any background color, set this to \u201cNone\u201d.<\/span><span style=\"font-size: 10pt;\"><\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">5. &nbsp; &nbsp;The text section allows you to define the choices from which your customers will choose their desired text color. You can let them choose from an unlimited set by choosing \u201cColors Picker\u201d or limit their choices by defining a \u201cColors Palette\u201d.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/text.png\" alt=\"text\" class=\"wp-image-2527\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">6. The Fonts section allows you to choose which fonts will be available for the customers to choose from. When \u201cUse global fonts\u201d is set to \u201cYes\u201d, all the fonts defined are automatically used to populate the customer\u2019s selection. When choosing \u201cNo\u201d, you define the list of fonts that you want your customers to choose from.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/fonts-tab.png\" alt=\"fonts tab\" class=\"wp-image-2526\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">7. &nbsp; The Pricing rules section enables the admin user to charge an extra for the customization depending on the rules defined.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">A pricing rule has 5 components:<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">o &nbsp; The<strong>&nbsp;rule parameter<\/strong>: allows you to set which condition should be checked. The parameters currently included in the tool are:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Character square unit (WxH): this calculates the character square value by multiplying it height with its width<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">A number of characters in text (<strong>NB Chars in text<\/strong>): this has to do with the number of alphabets or numeric figures in a text.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">A number of lines in text (<strong>NB Lines in text<\/strong>): this has to do with the lines of a text.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Selected font: this checks the selected font<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">if character spacing: this is related to the spacing between characters<\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">o &nbsp; The <strong>rule operator<\/strong>: allows you to define the kind of comparison to perform against the rule value. The operators included in the tool are:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Is less than.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">&nbsp;Is less or equals to.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Equals.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">&nbsp;More than.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">&nbsp;More or equal to.<\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">o &nbsp; The<strong>&nbsp;rule value<\/strong>&nbsp;to check against.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">o &nbsp; <strong>The Price<\/strong>: this allows you to define the price or extra price to add to the product base price if the rule is verified.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">o &nbsp; <strong>The scope<\/strong>: allows you to set the rule scope. 2 scopes are currently supported:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">&nbsp;Per item: the extra will be added for each design element that matches the rule defined.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">On the Whole design: the extra will be added only once even if more than one element matches the rule defined.<\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">Please also note that the administrator has the ability to combine simple rules to create a complex one.<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">Click on the <strong>Add rule group<\/strong>&nbsp;to set a whole new group pricing rules.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/pricing.png\" alt=\"pricing\" class=\"wp-image-2528\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">Click on the <strong>Publish<\/strong>&nbsp;button to save your configuration.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 10pt;\"><strong>How to create a custom WooCommerce product?<\/strong><\/span><span style=\"font-size: 10pt;\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">Once you\u2019ve created a configuration as described in the previous section:<\/span><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Click on <strong>Products &gt; Add New<\/strong>&nbsp;to access the product creation screen<\/span><span style=\"font-size: 10pt;\"><img decoding=\"async\" class=\"wp-image-2534\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/firefox_2017-09-14_04-06-11.png\" alt=\"firefox 2017 09 14 04 06 11\" title=\"\"><\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Enter your product name<img decoding=\"async\" class=\"wp-image-2531\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/firefox_2017-09-14_04-06-38.png\" alt=\"firefox 2017 09 14 04 06 38\" title=\"\"><\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Select the product type (only <strong>simple<\/strong>&nbsp;and <strong>variable products<\/strong>&nbsp;are supported at this time).<\/span><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 10pt;\"><strong>For simple products:<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Enter product price<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Now select the corresponding configuration previously created<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/simple-product.png\" alt=\"\" class=\"wp-image-2575\" title=\"\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Write a short description of the product<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Finally, click on <strong>Publish<\/strong>&nbsp;button to save your product<\/span><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-size: 10pt;\"><strong>For variable products:<\/strong><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">First of all select \u201cvariable product\u201d<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Click on the option \u201cvariations\u201d<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Select the variations you want to configure<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Enter &#8220;variation price&#8221;<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Now select the corresponding configuration previously created.<\/span><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2018\/03\/variable-product.png\" alt=\"\" class=\"wp-image-2576\" title=\"\"><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">Write a short description of the product<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">Finally, click on <strong>Publish<\/strong>&nbsp;button to save your product.<\/span><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"font-size: 10pt;\"><strong>How can a customer customize a product?<\/strong><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\">Once a product has been set as customizable, there are 2 ways for customers to customize it:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-size: 10pt;\">From the shop page (simple products only): a <strong>Design<\/strong>&nbsp;button will appear under the <strong>Add to cart<\/strong> button. A click on it will lead the user to the editor page with the product data already loaded.<\/span><\/li>\n\n\n\n<li><span style=\"font-size: 10pt;\">From the product page: a <strong>Design<\/strong>&nbsp;button will appear under the <strong>Add to Cart<\/strong>&nbsp;button. A click on it will lead the user to the editor page with the product data already loaded. If the product is variable, make sure you select the options before clicking the <strong>Design <\/strong>button.<\/span><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><span style=\"font-size: 10pt;\"><strong>Note:&nbsp;<\/strong>This does not only work for WooCommerce valid themes but also works for themes that do not have any reference to WooCommerce. If the theme the customer is using is a WooCommerce-compatible theme or a custom theme, and all hooks are properly triggered, then all buttons will appear.<\/span><\/p>\n\n\n\n<div class=\"wp-block-cover is-light has-parallax orion-cta-style\" style=\"min-height:217px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-light-green-cyan-background-color has-background-dim-10 has-background-dim\"><\/span><div role=\"img\" class=\"wp-block-cover__image-background wp-image-157860 has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/www.orionorigin.com\/wp-content\/uploads\/2023\/05\/2-2.png)\"><\/div><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<div id=\"wp-block-themeisle-blocks-advanced-columns-98ad1b32\" class=\"wp-block-themeisle-blocks-advanced-columns has-1-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-equal-layout has-vertical-bottom ticss-c00aadba\"><div class=\"wp-block-themeisle-blocks-advanced-columns-overlay\"><\/div><div class=\"innerblocks-wrap\">\n<div id=\"wp-block-themeisle-blocks-advanced-column-355b4a6e\" class=\"wp-block-themeisle-blocks-advanced-column\">\n<h4 id=\"wp-block-themeisle-blocks-advanced-heading-cf65ade9\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-cf65ade9\">&nbsp;Easily generate custom signs and banners using Seme, and watch your sales soar with just a few clicks.<\/h4>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-primary is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link has-white-color has-text-color wp-element-button\" href=\"https:\/\/demos.orionorigin.com\/seme\/product\/seme-signs-demo\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=seme+live+demo&amp;utm_id=131051\" style=\"border-radius:0px\" target=\"_blank\" rel=\"noreferrer noopener\">VIEW DEMO<\/a><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is a step-by-step guide to teach you how to create a custom product on a WooCommerce store using WooCommerce Lettering and Sign Designer plugin. How to create a custom product configuration? A custom product configuration is a set of parameters that can be assigned to one or more WooCommerce products that regulate how [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":149631,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[420],"tags":[267,278,36],"class_list":["post-131051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lettering-and-signs-designer","tag-custom","tag-lettering-signs-designer","tag-woocommerce"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/131051","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=131051"}],"version-history":[{"count":6,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/131051\/revisions"}],"predecessor-version":[{"id":159460,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/131051\/revisions\/159460"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media\/149631"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=131051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=131051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=131051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}