{"id":19893,"date":"2020-02-03T12:20:55","date_gmt":"2020-02-03T11:20:55","guid":{"rendered":"https:\/\/4967f73ca45390335.temporary.link\/?p=19893"},"modified":"2023-08-18T16:12:24","modified_gmt":"2023-08-18T15:12:24","slug":"how-to-create-a-custom-product-with-our-kandi-phone-case-designer","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/how-to-create-a-custom-product-with-our-kandi-phone-case-designer\/","title":{"rendered":"How to create a custom phone case with our Kandi phone case designer"},"content":{"rendered":"\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. Here is how to create a custom product:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click on <strong>Kandi &gt; Configurations<\/strong>, to access the list of existing configurations.<\/li>\n\n\n\n<li>Next, click on <strong>New Configuration<\/strong> to have access to the page on which you can create a new configuration.<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-01-1024x58.png\" alt=\"Create New Configuration\" width=\"640\" height=\"36\" title=\"\"><\/li>\n\n\n\n<li>Then add a <strong>Configuration name<\/strong>. <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-02-1024x109.png\" alt=\"Name the Configuration\" width=\"640\" height=\"68\" title=\"\"><\/li>\n\n\n\n<li>Choose your phone model and the available layouts<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-03-1024x514.png\" alt=\"Choose phone model\" title=\"\"><\/figure>\n<\/div>\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li>The Text section gives you a lot of funny options that will allow you to choose how your customers should manage their texts in the designer.<br><strong>Use global fonts: <\/strong>This option allows you to choose if your customer will be able to use all the fonts you have defined in the fonts section or a specific set of fonts you will choose beforehand.<br><strong>Select fonts<\/strong><strong>: <\/strong>This option allows you to choose the available fonts on this configuration.<br><strong>Max length: <\/strong>This option allows you to choose the maximum length of the texts your customers can add on the design.<br><strong>Colors palette type:<\/strong> This option allows you to choose if your customer will have a color picker or if you want to define a palette of color for them to choose the text color in the designer at the front end.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19902 size-large\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-1024x314.png\" alt=\"Select Fonts\" width=\"640\" height=\"196\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-1024x314.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-300x92.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-600x184.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-768x235.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-190x58.png 190w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05-294x90.png 294w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-05.png 1178w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>The background settings section gives you a lot of funny options that will allow you to choose how your customers should manage their background in the designer.<br><strong>Background categories: <\/strong><strong>This option will allow you to select which Clipart categories to be used as background images.<\/strong><br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19898 size-large\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-1024x126.png\" alt=\"Background settings\" width=\"640\" height=\"79\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-1024x126.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-300x37.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-600x74.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-768x94.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-190x23.png 190w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06-732x90.png 732w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-06.png 1188w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>The output section allows you to choose the format, size, and resolution of the customer\u2019s output file after designing it in the front end.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19897 size-large\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-1024x306.png\" alt=\"Output format fields\" width=\"640\" height=\"191\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-1024x306.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-300x90.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-600x179.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-768x230.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-190x57.png 190w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07-301x90.png 301w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-07.png 1174w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n\n\n\n<li>Click on the <strong>Publish<\/strong> button to save your configuration.<\/li>\n<\/ol>\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-941318f6\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-941318f6\">With Kandi, you can easily Set Up A Custom Phone Case Designer! No technical knowledge.<\/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:\/\/demos.orionorigin.com\/kandi\/product\/kandi-iphone-demo\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=Kandi+live+demo&amp;utm_id=19893\" 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\"><strong>How to create a custom WooCommerce product?<\/strong><\/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 <strong>Products &gt; Add New<\/strong> to access the product creation screen.<\/li>\n\n\n\n<li>Enter your product name.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19896 size-large\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-1024x236.png\" alt=\"Product creation screen\" width=\"640\" height=\"148\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-1024x236.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-300x69.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-600x138.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-768x177.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-190x44.png 190w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08-391x90.png 391w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-08.png 1293w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/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\"><strong>For simple products:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Enter product price.<\/li>\n\n\n\n<li>Now select the corresponding configuration previously created from a dropdown field on the page.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19895 size-large\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-1024x322.png\" alt=\"Simple product configuration field\" width=\"640\" height=\"201\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-1024x322.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-300x94.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-600x188.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-768x241.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-190x60.png 190w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09-287x90.png 287w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-09.png 1296w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>Write a short description of the product.<\/li>\n\n\n\n<li>Finally, click on the <strong>Publish<\/strong> button to save your product.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>For variable products:<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In the Product creation page, 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.<br><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-19894 size-large\" src=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-1024x737.png\" alt=\"Variable product configuration field\" width=\"640\" height=\"461\" title=\"\" srcset=\"https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-1024x737.png 1024w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-300x216.png 300w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-600x432.png 600w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-768x552.png 768w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-1536x1105.png 1536w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10-125x90.png 125w, https:\/\/www.orionorigin.com\/wp-content\/uploads\/2020\/02\/wpd-kandi-tutorial-10.png 1600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/li>\n<\/ol>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Write a short description of the product.<\/li>\n\n\n\n<li>Finally, click on the <strong>Publish<\/strong> button to save your product.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>How can a customer customize a product?<\/strong><\/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 Now<\/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.<\/li>\n\n\n\n<li>From the product page: a <strong>Design Now<\/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 it is a variable product, make sure you select the options before clicking the <strong>Design Now<\/strong> button.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Can I add a configuration to an existing product?<\/strong><\/h2>\n\n\n\n<p>Yes, but the existing WooCommerce product must either be a <strong>simple<\/strong> or <strong>variable<\/strong> product. The configuration field appears in existing WooCommerce products as well. You can follow the steps above to add the configuration for either product type. <strong>Note:<\/strong> 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 included in the theme.<\/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-c52b65d4\" 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-666e3817\" class=\"wp-block-themeisle-blocks-advanced-column\">\n<h4 id=\"wp-block-themeisle-blocks-advanced-heading-72697938\" class=\"wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-72697938\">Give your customers an unforgettable experience by allowing them to design Phone Cases with Kandi!<\/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:\/\/demos.orionorigin.com\/kandi\/product\/kandi-iphone-demo\/?utm_source=google&amp;utm_medium=article&amp;utm_campaign=Kandi+live+demo&amp;utm_id=19893\" 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>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. Here is how to create a custom product: How to create a custom WooCommerce product? [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[422],"tags":[347,449,450,36],"class_list":["post-19893","post","type-post","status-publish","format-standard","hentry","category-phone-case-customizer","tag-custom-phone-case","tag-kandi","tag-phone-case","tag-woocommerce"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/19893","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=19893"}],"version-history":[{"count":6,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/19893\/revisions"}],"predecessor-version":[{"id":159474,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/19893\/revisions\/159474"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=19893"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=19893"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=19893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}