{"id":8118,"date":"2019-09-10T15:35:34","date_gmt":"2019-09-10T14:35:34","guid":{"rendered":"https:\/\/4967f73ca45390335.temporary.link\/?p=8118"},"modified":"2023-08-21T03:09:59","modified_gmt":"2023-08-21T02:09:59","slug":"how-to-create-a-custom-product","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/how-to-create-a-custom-product\/","title":{"rendered":"How to create a custom product – Ouidah Product Designer"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]https:\/\/youtu.be\/8O43xlzsd2Q<\/p>\n

This tutorial is a step-by-step guide to teach you how to create a custom product on a WooCommerce store using the Ouidah WooCommerce Product Designer plugin.<\/span><\/p>\n

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

The first step to making our product customizable is to create a configuration. A configuration is a set of options which once defined will allow our plugin to take charge of the process of customizing your product from the designer to the generation of printable output files.\u00a0<\/span><\/p>\n

How to create a configuration<\/span><\/strong><\/h2>\n
\n
    \n
  1. Click on <\/span>WPD > Configurations<\/b>, to access the list of existing configurations.<\/span><\/span><\/li>\n
  2. Next, click on <\/span>New Configuration<\/b> to have access to the page on which you can create a new configuration.<\/span><\/span><\/li>\n
  3. Add a <\/span>Configuration name<\/b>.<\/span><\/span><\/li>\n
  4. Certain WooCommerce-compatible themes allow the display of our <\/span>Design from scratch<\/b> and <\/span>Custom design uploads<\/b> buttons below customizable products on the product pages, these options allow you to decide to display (or not) the <\/span>Design from scratch<\/b> button and the <\/span>Custom design uploads<\/b> button on the WooCommerce product page.<\/span>\"\"<\/span><\/li>\n
  5. The dimensions you have just defined are not only the dimensions of your output files but also allow our plugin to define a customizable canvas whose dimensions will be proportional to that of your output files and on which your customers can customize the product. Choose your output files size right here.\"\"<\/span><\/li>\n
  6. The “Parts” are the components of your product that you want to make customizable. You will need to define the dimensions within which your customers can work. This also defines the output files so you can go directly to printing.<\/span>\u00a0 The “Parts” section allows you to define the editable product parts or sections. Click on the “Add part” button to add your parts.<\/span><\/span>\n
      \n
    1. \n
        \n
      1. Name: Name of your part<\/span><\/li>\n
      2. Icon: This allows you to define an icon for the parts<\/span><\/li>\n
      3. Bg. (not inc.): This allows you to define a background image for the parts. This image won\u2019t be included in the final design.<\/span><\/li>\n
      4. Bg. (inc.): This allows you to define a background image for the parts. This image will be included in the final design.<\/span><\/li>\n
      5. Overlay image: This 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.\"\"<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

        Note:<\/b> Note that it is imperative to choose images whose sizes are proportional to the dimensions of output files defined above as background included, background not included, or even image overlay so our plugin can easily scale them on the designer for a good rendering.<\/span><\/span><\/p>\n

        This is what your customers will see in the designer:<\/span><\/p>\n<\/div>\n

        \"\"<\/span><\/p>\n

        The front part on the shirt in the designer<\/span><\/p>\n

        \"\"<\/span><\/p>\n

        Back part of the shirt in the designer<\/span><\/p>\n

        <\/h2>\n

        How to assign a configuration to a WooCommerce product?<\/b><\/span><\/h2>\n

        Once the configuration is created, we\u2019ll assign it to a product to make the product customizable.<\/span><\/p>\n

          \n
        1. For a new product, click on <\/span>Products > Add New<\/b> to access the product creation screen.<\/span><\/span><\/li>\n
        2. Enter your product name.<\/span>\"\"<\/span><\/li>\n
        3. Select the product type (only <\/span>simple<\/b> and <\/span>variable products<\/b> are supported at this time).<\/span><\/span><\/li>\n<\/ol>\n

          For simple products:<\/b><\/span><\/h3>\n
            \n
          1. Enter product price (note that the price is mandatory for the product to be customizable, even the value \u2018zero\u2019).<\/span><\/li>\n
          2. Now select the previously created configuration.<\/span>\"\"<\/span><\/li>\n
          3. Publish<\/b> your product.<\/span><\/span><\/li>\n<\/ol>\n

            For variable products:<\/b><\/span><\/h3>\n
              \n
            1. In the product creation view, select \u201cvariable product\u201d as product data.<\/span><\/li>\n
            2. Click on the \u201cvariations\u201d tab.<\/span><\/li>\n
            3. Select the variations you want to configure.<\/span><\/li>\n
            4. Enter “variation price”.<\/span><\/li>\n
            5. Now select the corresponding configuration previously created.<\/span>\"\"<\/span><\/li>\n
            6. Publish<\/b> your product.<\/span><\/span><\/li>\n<\/ol>\n

              Q: How can a customer customize a product?<\/b><\/span><\/h2>\n

              Once a product has been set as customizable, there are 2 ways for customers to customize it:<\/span><\/p>\n

                \n
              • From the shop page (simple products only): a <\/span>Design from scratch<\/b> button will appear under the <\/span>Add to cart<\/b> button. A click on it will lead the user to the editor page with the product data you previously created already loaded.<\/span><\/span><\/li>\n
              • From the product page: a <\/span>Design from scratch<\/b> button will appear under the <\/span>Add to cart<\/b> button. A click on it will lead the user to the editor page with the product data already loaded. <\/span>For variable products, selecting the right option will lead to the right configuration when you click the <\/span>Design from scratch<\/b> button.<\/span><\/span><\/li>\n<\/ul>\n

                Q: Can I add a configuration to an existing product?<\/b><\/span><\/h2>\n

                Yes, the configuration field appears in existing Woocommerce products as well. However, th<\/span>e existing Woocommerce product must either be a simple or variable product.<\/span><\/span><\/p>\n

                You can follow the steps above for either product type, to add the configuration.<\/span><\/p>\n

                Q: Will this work for themes that do not have any reference to WooCommerce?<\/b><\/span><\/p>\n

                \u00a0<\/b>This works for WooCommerce-enabled themes. It 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. If not, then troubleshoot and verify that all hooks are properly triggered in the theme.<\/span><\/span><\/p>\n

                [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"

                [vc_row][vc_column][vc_column_text]https:\/\/youtu.be\/8O43xlzsd2Q This tutorial is a step-by-step guide to teach you how to create a custom product on a WooCommerce store using the Ouidah WooCommerce Product Designer plugin. 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"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-8118","post","type-post","status-publish","format-video","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\/8118","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=8118"}],"version-history":[{"count":3,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/8118\/revisions"}],"predecessor-version":[{"id":159496,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/8118\/revisions\/159496"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=8118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=8118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=8118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}