{"id":87012,"date":"2017-07-14T12:00:21","date_gmt":"2017-07-14T12:00:21","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=87012"},"modified":"2025-03-12T11:52:55","modified_gmt":"2025-03-12T11:52:55","slug":"magento2-custom-option-template","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/","title":{"rendered":"Magento 2 Custom Option Template"},"content":{"rendered":"\n<p> <a href=\"https:\/\/store.webkul.com\/Magento2-Custom-Option-Template.html\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Custom Option Template<\/a> extension will allow the admin to create an unlimited number of custom options from the admin back-end.<\/p>\n\n\n\n<p>After creating the custom options, the admin can easily add these custom options to the products. Apart from that, the admin can add multiple custom options to each product as well.<\/p>\n\n\n\n<p>As per default functionality, the admin of the website had to create custom options by going individually to each of the products and then adding the custom options for each of the products separately. <\/p>\n\n\n\n<p>Now, using this extension the store admin can create multiple numbers of custom options and then can assign these custom options to the products as required. <\/p>\n\n\n\n<p>Similarly, if you are running a jewellery online store and looking for a feature where your customers can build their custom rings and then add to their cart them, you can check&nbsp;<a href=\"https:\/\/webkul.com\/blog\/magento2-custom-ring-builder-documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Magento 2 Custom Ring Building<\/a>.&nbsp;<\/p>\n\n\n\n<p>Watch the below video tutorial to understand the extension workflow:<\/p>\n\n\n\n<div class=\"wp-block-wk-block-youtube-video wp-block-wk-block--yt-video components-placeholder wk-block--yt-video\"><div class=\"wk-block--yt-video-frame\"><div class=\"wk-block--yt-video-frame-request\" data-plyr-provider=\"youtube\" data-plyr-embed-id=\"eZV6Ip_U1D4\"><div class=\"components-placeholder__instructions\">eZV6Ip_U1D4<\/div><\/div><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Features<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li> Create an unlimited number of custom options templates.<\/li>\n\n\n\n<li> Can add multiple custom options on each product.<\/li>\n\n\n\n<li> Assign the single custom options to multiple products.<\/li>\n\n\n\n<li> Can delete the custom options.<\/li>\n\n\n\n<li> As per each template, the admin can set the title and option type.<\/li>\n\n\n\n<li> Add different types of custom options using the option types \u2013 text  (field, area), file, select (drop-down, radio buttons, check-box, and multi-select), and date (date, date &amp; time, time).<\/li>\n\n\n\n<li> The admin can edit custom options.<\/li>\n\n\n\n<li> As per each custom option, the admin can set title, price, price type, SKU.&nbsp; <\/li>\n\n\n\n<li>The admin can also unassign the custom option template.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Installation<\/h3>\n\n\n\n<p>Customers will get a <strong>zip folder<\/strong> then they have to <strong>extract the contents<\/strong> of this zip folder on their system. <\/p>\n\n\n\n<p>The extracted folder has an <strong>src<\/strong> folder, inside the<strong> src <\/strong>folder you have the <strong>app<\/strong> folder. You need to <strong>transfer<\/strong> this <span style=\"background-color: rgba(25, 30, 35, 0.2);\"><b>a<\/b><\/span><strong>pp folder<\/strong> into the <strong>Adobe Commerce<\/strong> <strong>Cloud root directory<\/strong> on the server as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Install-1.png\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Install-1.png\" alt=\"Install-1\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"># Run Commands<\/h3>\n\n\n\n<p>Now run this command on Adobe Commerce root directory &#8211;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento setup:upgrade<\/pre>\n\n\n\n<p>After running above two commands, run this command in the Adobe Commerce Cloud Root &#8211;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento setup:di:compile<\/pre>\n\n\n\n<p>Also, run this command into the Adobe Commerce Root \u2013 <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">php bin\/magento setup:di:compile<\/pre>\n\n\n\n<p> After running the commands, you have to <strong>flush<\/strong> the cache from the <strong>Adobe Commerce<\/strong> <strong>Cloud admin panel<\/strong> by navigating through -&gt;<strong>System<\/strong>-&gt;<strong>Cache management<\/strong> as shown below in the snapshot. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Flush-Cache-Memory.png\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Flush-Cache-Memory.png\" alt=\"Flush-Cache-Memory\" loading=\"lazy\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Multi-Lingual configuration<\/h3>\n\n\n\n<p> For Multilingual support, please navigate. <strong>Store-&gt;Configuration-&gt;General -&gt;Locale Options<\/strong>. Then select your desired language from the <strong>Locale<\/strong> option. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Multi-Lingual-1.png\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Multi-Lingual-1.png\" alt=\"Multi-Lingual configuration - Magento 2 Google Plus Wall Feeds\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Language Translation<\/h3>\n\n\n\n<p> If you need to do the module translation, please navigate the following path in your system. <strong>src\/app\/code\/Webkul\/CustomOptionTemplate\/i18n<\/strong>. Open the file named <strong>en_US.CSV<\/strong> for editing as shown in below screenshot. <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" width=\"1366\" height=\"354\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/custom_options_move_app_folder.png\" alt=\"custom_options_move_app_folder\" class=\"wp-image-192120\" style=\"width:700px;height:156px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/custom_options_move_app_folder.png 1366w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/custom_options_move_app_folder.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/custom_options_move_app_folder.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/custom_options_move_app_folder.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2019\/08\/custom_options_move_app_folder.png 1200w\" sizes=\"(max-width: 1366px) 100vw, 1366px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>\n\nOnce you have opened the file for editing. Replace the words after the<strong> comma(,)<\/strong> on the right with your translated words.\n\n<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Language-Translation-2.png\"><img decoding=\"async\" width=\"1126\" height=\"692\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_from_2020_05_07_13_15_03-1.png\" alt=\"language Translation - Magento 2 Google Plus Wall Feeds\" class=\"wp-image-247394\" style=\"width:700px;height:346px\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_from_2020_05_07_13_15_03-1.png 1126w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_from_2020_05_07_13_15_03-1-300x184.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_from_2020_05_07_13_15_03-1-250x154.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2020\/05\/Screenshot_from_2020_05_07_13_15_03-1-768x472.png 768w\" sizes=\"(max-width: 1126px) 100vw, 1126px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>\n\nAfter editing the <strong>CSV<\/strong> file, save it and then upload it to the same folder. Now your module translation is complete.\n\n<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Language-Translation-3.png\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/05\/Language-Translation-3.png\" alt=\"language Translation - Magento 2 Google Plus Wall Feeds\" style=\"width:700px\" loading=\"lazy\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">How To Use<\/h3>\n\n\n\n<p> After the successful installation of the extension, the admin will navigate to the <strong>Custom Option Template<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"792\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-template.webp\" alt=\"magento2-custom-option-template\" class=\"wp-image-435777\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-template.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-template-300x212.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-template-250x177.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-custom-option-template-768x543.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Clicking the menu option &#8220;<strong>Custom Options Templates<\/strong>&#8221; will bring up another page to manage the custom options as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"582\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-template-option-details.webp\" alt=\"magento2-template-options-details\" class=\"wp-image-435779\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-template-option-details.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-template-option-details-300x156.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-template-option-details-250x130.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-template-option-details-768x399.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Create the custom options under the section <strong>Customizable Options<\/strong> and then by clicking the &#8220;<strong>Add Option<\/strong>&#8221; button. Here, the admin can create the <strong>custom options<\/strong> using the <strong>Option Types<\/strong> &#8211; <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text<\/strong> &#8211; Field, Area<\/li>\n\n\n\n<li><strong>File<\/strong> &#8211; File<\/li>\n\n\n\n<li><strong>Select<\/strong> &#8211; Drop-Down, Radio Buttons, Check-Box, and Multi-Select<\/li>\n\n\n\n<li><strong>Date<\/strong> &#8211; Date, Date &amp; Time, Time<\/li>\n<\/ul>\n\n\n\n<p> and can make the custom options as required by checking the &#8220;<strong>Required<\/strong>&#8221; checkbox field. <\/p>\n\n\n\n<p><strong>Example:<\/strong> Now, we will try creating a custom option- <strong>Color<\/strong> with the<strong> Option Type<\/strong> as &#8220;<strong>Radio<\/strong>&#8221; button with values <strong>Blue<\/strong> and <strong>Black<\/strong> as shown below in the snapshot. <\/p>\n\n\n\n<p>After entering all the required information, click the <strong>Save<\/strong> button to save this custom option and its option values.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-customizable-options.webp\" alt=\"Customizable-Options\" class=\"wp-image-435783\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now, after creating the custom options the admin can add these <strong>custom options<\/strong> for each of his products by going to the<strong>&nbsp;Assign Custom Options to Products<\/strong> section &#8211; <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here, select the Products for which you want to add the custom options.<\/li>\n\n\n\n<li>Select <strong>Assign Option <\/strong>from the drop-down.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-assign-custom-option.webp\" alt=\"magento2-custom-option-template-product-assign\" class=\"wp-image-435785\" loading=\"lazy\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the <strong>Custom Option<\/strong> to add.<\/li>\n\n\n\n<li>Click the &#8220;<strong>Submit<\/strong>&#8221; button to apply the Custom Options.<\/li>\n<\/ul>\n\n\n\n<p> Now, on the <strong>front-end<\/strong>, the customers can find the custom options on the product page as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"800\" height=\"521\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/front_1-e1603982545935.png\" alt=\"front_1\" class=\"wp-image-272359\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/front_1-e1603982545935.png 800w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/front_1-e1603982545935-300x195.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/front_1-e1603982545935-250x163.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/front_1-e1603982545935-768x500.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p> Other product to which we have applied the same custom options. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"788\" height=\"458\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Fusion-Backpack-1-e1603983327820.png\" alt=\"Fusion-Backpack\" class=\"wp-image-272361\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Fusion-Backpack-1-e1603983327820.png 788w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Fusion-Backpack-1-e1603983327820-300x174.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Fusion-Backpack-1-e1603983327820-250x145.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/Fusion-Backpack-1-e1603983327820-768x446.png 768w\" sizes=\"(max-width: 788px) 100vw, 788px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Un<strong>assign Custom Options to Products<\/strong><\/h3>\n\n\n\n<p>After the successfully assign custom options to the product, the admin can also unassigned the product in the backend.  <\/p>\n\n\n\n<p>For that, first admin can go to the Manage custom option.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Here, select the Products for which you want to add the custom options.<\/li>\n\n\n\n<li>Select <strong>UnAssign Option <\/strong>from the drop-down.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"880\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassign-custom-option.webp\" alt=\"magento2-custom-option-template-product-unassign\" class=\"wp-image-435787\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassign-custom-option.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassign-custom-option-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassign-custom-option-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassign-custom-option-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select the <strong>Custom Option<\/strong> to unassign.<\/li>\n\n\n\n<li>Click the &#8220;<strong>Submit<\/strong>&#8221; button to apply the Custom Options.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Assigned Custom Option Product List<\/h3>\n\n\n\n<p>Lastly, after assigning the created custom options to the products you can see a list displaying all of the products to which you have added the custom options. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"666\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassigned-product-custom-option-1.webp\" alt=\"magento2-unassigned-product-custom-option\" class=\"wp-image-435794\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassigned-product-custom-option-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassigned-product-custom-option-1-300x178.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassigned-product-custom-option-1-250x149.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento2-unassigned-product-custom-option-1-768x457.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now, on the <strong>front-end<\/strong>, you can see that on the product page custom option are not available as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"800\" height=\"587\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/removed-e1603983043821.png\" alt=\"removed\" class=\"wp-image-272363\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/removed-e1603983043821.png 800w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/removed-e1603983043821-300x220.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/removed-e1603983043821-250x183.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/07\/removed-e1603983043821-768x564.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Important Note <\/h4>\n\n\n\n<p><strong>If the changes made in the existing template show the old custom template as well along with the newly added template too when re-assign the updated template to the respective products. <\/strong><\/p>\n\n\n\n<p><strong>Hence to remove the old custom option admin has to delete that custom option from the particular edit product page at the admin panel.<\/strong><\/p>\n\n\n\n<p>For example, you have changed the Drop-Down option type into a Radio_Buttons option type and saved it. Then assigned the newly added custom option to the product.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1120\" height=\"589\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento-custom-options-size.webp\" alt=\"magento-custom-options-size\" class=\"wp-image-435800\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento-custom-options-size.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento-custom-options-size-300x158.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento-custom-options-size-250x131.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/04\/magento-custom-options-size-768x404.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>Reflection<\/strong> of the changes in custom options on the <strong>storefront product page<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"700\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/manage_custom_option_2.png\" alt=\"manage_custom_option_2\" class=\"wp-image-281884\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/manage_custom_option_2.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/manage_custom_option_2-300x175.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/manage_custom_option_2-250x146.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/manage_custom_option_2-768x448.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>Now you need to remove the old custom option from the particular product page of admin-end. Because unassigned feature will not work in this case as now you have two custom options with the same name:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1047\" height=\"1024\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/product_page-1047x1024.png\" alt=\"product_page\" class=\"wp-image-281885\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/product_page-1047x1024.png 1047w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/product_page-300x293.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/product_page-250x244.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/product_page-768x751.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/product_page.png 1178w\" sizes=\"(max-width: 1047px) 100vw, 1047px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p><strong>After removing the old custom option:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"700\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/storefront_product_page.png\" alt=\"storefront_product_page\" class=\"wp-image-281890\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/storefront_product_page.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/storefront_product_page-300x175.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/storefront_product_page-250x146.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/storefront_product_page-768x448.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>In conclusion, that\u2019s all for Magento 2 Custom Option Template plugin. Also you can take benefits of our <a href=\"https:\/\/webkul.com\/adobe-commerce-theme-template-development-services\/\">Magento 2 Theme development<\/a> and <a href=\"https:\/\/webkul.com\/magento-development\/\">Magento 2 Services<\/a>.<\/p>\n\n\n\n<p>Still, have any issues feel free to add a ticket then let us know your views to make the module better at<strong> <a href=\"http:\/\/webkul.uvdesk.com\">webkul.uvdesk.com<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Magento 2 Custom Option Template extension will allow the admin to create an unlimited number of custom options from the admin back-end. After creating the custom options, the admin can easily add these custom options to the products. Apart from that, the admin can add multiple custom options to each product as well. As per <a href=\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":79,"featured_media":87031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[4947,2460],"class_list":["post-87012","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento2","tag-custom-option-template","tag-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Custom Option Template Extension For Magento 2<\/title>\n<meta name=\"description\" content=\"Magento 2 Custom Option Template allows the admin to create unlimited number of custom options &amp; apply multiple custom options to products.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Option Template Extension For Magento 2\" \/>\n<meta property=\"og:description\" content=\"Magento 2 Custom Option Template allows the admin to create unlimited number of custom options &amp; apply multiple custom options to products.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-14T12:00:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-12T11:52:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nishad Bhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nishad Bhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\"},\"author\":{\"name\":\"Nishad Bhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0\"},\"headline\":\"Magento 2 Custom Option Template\",\"datePublished\":\"2017-07-14T12:00:21+00:00\",\"dateModified\":\"2025-03-12T11:52:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\"},\"wordCount\":1056,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png\",\"keywords\":[\"custom option template\",\"Magento 2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\",\"url\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\",\"name\":\"Custom Option Template Extension For Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png\",\"datePublished\":\"2017-07-14T12:00:21+00:00\",\"dateModified\":\"2025-03-12T11:52:55+00:00\",\"description\":\"Magento 2 Custom Option Template allows the admin to create unlimited number of custom options & apply multiple custom options to products.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Magento 2 Custom Option Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0\",\"name\":\"Nishad Bhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Nishad Bhan\"},\"description\":\"Nishad Bhan excels in analyzing eCommerce processes on the Magento platform, optimizing workflows, and delivering strategic solutions. Expertise ensures seamless platform integration, driving digital innovation and aligning technology with business objectives for growth.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/nishad-bhan981\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Option Template Extension For Magento 2","description":"Magento 2 Custom Option Template allows the admin to create unlimited number of custom options & apply multiple custom options to products.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/","og_locale":"en_US","og_type":"article","og_title":"Custom Option Template Extension For Magento 2","og_description":"Magento 2 Custom Option Template allows the admin to create unlimited number of custom options & apply multiple custom options to products.","og_url":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2017-07-14T12:00:21+00:00","article_modified_time":"2025-03-12T11:52:55+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png","type":"image\/png"}],"author":"Nishad Bhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nishad Bhan","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/"},"author":{"name":"Nishad Bhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0"},"headline":"Magento 2 Custom Option Template","datePublished":"2017-07-14T12:00:21+00:00","dateModified":"2025-03-12T11:52:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/"},"wordCount":1056,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png","keywords":["custom option template","Magento 2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/","url":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/","name":"Custom Option Template Extension For Magento 2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png","datePublished":"2017-07-14T12:00:21+00:00","dateModified":"2025-03-12T11:52:55+00:00","description":"Magento 2 Custom Option Template allows the admin to create unlimited number of custom options & apply multiple custom options to products.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/magento2-custom-option-template\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/06\/Custom-Option-Template.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/magento2-custom-option-template\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Magento 2 Custom Option Template"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d5f376b54be75483744f8320d172d9e0","name":"Nishad Bhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a708390ff9ca00da55b3ed0b076fe4f3624005bce5b5d88e6b3d99d15c13ec2?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Nishad Bhan"},"description":"Nishad Bhan excels in analyzing eCommerce processes on the Magento platform, optimizing workflows, and delivering strategic solutions. Expertise ensures seamless platform integration, driving digital innovation and aligning technology with business objectives for growth.","url":"https:\/\/webkul.com\/blog\/author\/nishad-bhan981\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/87012","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=87012"}],"version-history":[{"count":83,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/87012\/revisions"}],"predecessor-version":[{"id":486126,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/87012\/revisions\/486126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/87031"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=87012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=87012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=87012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}