Magento 2 CMS offers a dropdown menu to allow the frontend users to select a choice from multiple options. It can be the name of city, country, or an option for a configurable product.<\/p>\n\n\n\n
Though dropdowns are convenient for selection, a store owner may want to change dropdown to radio buttons in Magento 2<\/strong><\/em> to make it look neat and clean.<\/p>\n\n\n\n Dropdowns may not be suitable for your theme or layout. Radio buttons may enhance the design of the page.<\/p>\n\n\n\n All these are the reasons, a merchant may want to change the attribute dropdown to radio buttons in Magento 2.<\/p>\n\n\n\n Though Magento 2 does not offer radio buttons by default, here\u2019s the programmatic solution using which you can implement it in your store:<\/p>\n\n\n\n That\u2019s it.<\/p>\n\n\n\n Also, do make sure to share the post with Magento Community via social media.<\/p>\n\n\n\n Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":" Magento 2 CMS offers a dropdown menu to allow the frontend users to select a choice from multiple options. It can be the name of…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1649","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1649"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1649\/revisions"}],"predecessor-version":[{"id":14413,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1649\/revisions\/14413"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Method to Change Dropdown to Radio Buttons in Magento 2:<\/h2>\n\n\n\n
\/\/Using id or class get Exising Select Options \n\n$('form#product select').each(function(i, select){\n var $select = $(select);\n $select.find('option').each(function(j, option){\n var $option = $(option);\n var $radio = $('<input type=\"radio\" \/>'); \/\/ Create a radio:\n $radio.attr('name', $select.attr('name')).attr('value', $option.val()); \/\/ Set name and value to radio \n if ($option.attr('selected')) $radio.attr('checked', 'checked'); \/\/ Set checked if the select's option was selected\n $select.before($radio);\n $select.before(\n $(\"<label \/>\").attr('for', $select.attr('name')).text($option.text())\n );\n $select.before(\"<br\/>\");\n });\n $select.remove();\n});\n\n\/\/ In Magento 2 if you want to change configurable product's dropdown options into radio buttons then you can also use this code. In that case, you have to take the class \"super-attribute-select\" instead of \"form#product select\".<\/pre>\n\n\n\n