{"id":8120,"date":"2019-09-10T15:42:45","date_gmt":"2019-09-10T14:42:45","guid":{"rendered":"https:\/\/4967f73ca45390335.temporary.link\/?p=8120"},"modified":"2024-02-12T12:07:41","modified_gmt":"2024-02-12T11:07:41","slug":"variable-products","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/variable-products\/","title":{"rendered":"How to create a custom product in a WooCommerce store."},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Getting Started Series: Create a customizable product\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/8O43xlzsd2Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This tutorial is a step-by-step guide to teach you how to create a custom product on a WooCommerce store using the <span style=\"font-weight: 400;\"> <a href=\"https:\/\/www.orionorigin.com\/product\/woocommerce-product-designer\">Ouidah Product Designer plugin<\/a><\/span>.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light orion-cta-style\" style=\"min-height:217px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-80 has-background-dim\" style=\"background-color:#5c54ff\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-157867\" alt=\"\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2023\/05\/5.png\" data-object-fit=\"cover\" title=\"\"><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 has-dark-bg\"><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\">&nbsp;Easily attract more customers and grow your business by using our Custom Product Designer for Woocommerce.<\/h4>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d 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:\/\/wordpress.org\/plugins\/woocommerce-products-designer\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=Ouidah+Free+Version&amp;utm_id=8106\" style=\"border-radius:0px\" target=\"_blank\" rel=\"noreferrer noopener\">Download now<\/a><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to create a custom product configuration?<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on <b>WPD &gt; Configurations<\/b>, to access the list of existing configurations.<\/li>\n\n\n\n<li>Next, click on <b>New Configuration<\/b> to have access to the page on which you can create a new configuration.<br><img decoding=\"async\" class=\"alignnone size-medium wp-image-700\" style=\"width: 100%; margin: 20px 0 10px 0; display: block;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-10_01-41-42.png\" alt=\"\" title=\"\"><br><img decoding=\"async\" class=\"alignnone size-medium wp-image-699\" style=\"width: 100%; margin-bottom: 20px; display: block;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-10_01-39-32.png\" alt=\"\" title=\"\"><\/li>\n\n\n\n<li>Under the basic settings section you have the Design from blank feature which can allow you to display or not the button on the product page.<br><img decoding=\"async\" class=\"alignnone size-medium wp-image-699\" style=\"width: 100%; margin: 20px 0; display: block;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-14_03-38-59.png\" alt=\"\" title=\"\"><\/li>\n\n\n\n<li>The canvas section allows you to apply a custom canvas size to your product. The canvas can be smaller than the expected output files in order to fit inside the website pages but need to be a scaled version of the expected output.<br><img decoding=\"async\" class=\"alignnone size-medium wp-image-701\" style=\"width: 100%; margin: 20px 0; display: block;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-10_01-42-16.png\" alt=\"\" title=\"\"><\/li>\n\n\n\n<li>The parts section allows you to define the products parts. Click on the Add parts button to add your parts.\n<ul>\n<li>Name: Name of your part<\/li>\n<li>Icon: Allows you to define an icon for the parts<\/li>\n<li>Bg. (not inc.): allows you to define a background image for the parts. This image won\u2019t be included in the final design.<\/li>\n<li>Bg. (inc.): allows you to define a background image for the parts. This image will be included in the final design.<\/li>\n<li>Overlay image: allows you to define an overlay image for the parts. This image can be selected to either be included or not in the final design.<\/li>\n<\/ul>\n<figure><img decoding=\"async\" class=\"alignnone size-medium wp-image-703\" style=\"width: 100%; margin-top: 20px;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-10_01-44-47.png\" alt=\"\" title=\"\"><\/figure><figure><img decoding=\"async\" class=\"alignnone size-medium wp-image-703\" style=\"width: 100%; margin-bottom: 20px;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-14_04-39-44.png\" alt=\"\" title=\"\"><\/figure><p><br><\/p>\n<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image wp-image-703 size-medium\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-14_04-01-10.png\" alt=\"Front part\" class=\"wp-image-703\" title=\"\"><figcaption class=\"wp-element-caption\">Front part<\/figcaption><\/figure>\n<\/div>\n\n\n<figure class=\"wp-block-image alignnone wp-image-703 size-medium\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-14_04-35-38.png\" alt=\"Back part\" class=\"wp-image-703\" title=\"\"><figcaption class=\"wp-element-caption\">Back part<\/figcaption><\/figure>\n\n\n\n<li>Click on the <b>Publish<\/b> button to save your configuration.<\/li>\n\n\n\n<h2 class=\"wp-block-heading\">How to create a custom WooCommerce product?<\/h2>\n\n\n\n<p>Once you\u2019ve created a configuration as described in the previous section:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on <b>Products &gt; Add New<\/b> to access the product creation screen<\/li>\n\n\n\n<li>Enter your product name<br><img decoding=\"async\" class=\"alignnone size-medium wp-image-711\" style=\"width: 100%; margin-bottom: 20px; display: block;\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/firefox_2017-09-14_04-06-38.png\" alt=\"\" title=\"\"><\/li>\n\n\n\n<li>Select the product type (only <strong>simple<\/strong> and <strong>variable products<\/strong> are supported at this time).<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">For variable products:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First of all select \u201cvariable product\u201d<\/li>\n\n\n\n<li>Click on the option \u201cvariations\u201d<\/li>\n\n\n\n<li>Select the variations you want to configure<\/li>\n\n\n\n<li>Enter &#8220;variation price&#8221;<\/li>\n\n\n\n<li>Now select the corresponding configuration previously created.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2124\" height=\"1528\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial.png\" alt=\"\" class=\"wp-image-1647\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial.png 2124w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-300x216.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-600x432.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-1024x737.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-150x108.png 150w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-768x552.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-1536x1105.png 1536w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2017\/09\/product-designer-tutorial-2048x1473.png 2048w\" sizes=\"auto, (max-width: 2124px) 100vw, 2124px\" \/><\/figure>\n\n\n\n<p>5. Write a short description of the product<\/p>\n\n\n\n<p>6. Finally click on <b>Publish<\/b> button to save your product.How can a customer customize a product?<\/p>\n\n\n\n<div class=\"wp-block-cover is-light orion-cta-style\" style=\"min-height:217px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-80 has-background-dim\" style=\"background-color:#5c54ff\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-157867\" alt=\"\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2023\/05\/5.png\" data-object-fit=\"cover\" title=\"\"><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 has-dark-bg\"><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\">&nbsp;Easily attract more customers and grow your business by using our Custom Product Designer for Woocommerce.<\/h4>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d 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:\/\/wordpress.org\/plugins\/woocommerce-products-designer\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=Ouidah+Free+Version&amp;utm_id=8106\" style=\"border-radius:0px\" target=\"_blank\" rel=\"noreferrer noopener\">Download now<\/a><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How can a customer customize a product?<\/h2>\n\n\n\n<p>Once a product has been set as customizable, there are 2 ways for customers to customize it:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>From the shop page (simple products only): a <strong>Design from the blank<\/strong> button will appear under the <strong>Add to Cart<\/strong> button. A click on it will lead the user the editor page with the product data already loaded.<\/li>\n\n\n\n<li>From the product page: a <strong>Design from blank<\/strong> 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. If the product is variable, make sure you select the options before clicking the <strong>Design from blank<\/strong> button.<\/li>\n<\/ul>\n\n\n\n<p><strong>Note: <\/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.<\/p>\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 the Ouidah Product 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 they [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":149533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"video","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[417],"tags":[263,36,81,17],"class_list":["post-8120","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-designer","tag-product","tag-woocommerce","tag-woocommerce-product-designer","tag-wordpress","post_format-post-format-video"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/8120","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=8120"}],"version-history":[{"count":9,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/8120\/revisions"}],"predecessor-version":[{"id":162981,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/8120\/revisions\/162981"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media\/149533"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=8120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=8120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=8120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}