We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
Display Gender field as Radio button
Do you want to display the gender dropdown field as radio button in Magento 2? Then this post will definitely help you with that!
By default in Magento 2 the gender dropdown field can be shown in customer registration page, if it is configured so. This option can be configured in Magento Admin under Stores → Configuration → Customers → Customer Configuration → Name and Addresses Options. The "Show Gender" option can have 3 different values, No, Optional and Required. Let's set it to Required for our post.
Having a deeper look at the registration form template under
vendor/magento/module-customer/view/frontend/templates/form/register.phtml
we can see that Magento 2 uses widgets to display customer's attributes like Gender, Name, Tax/VAT number and Date of Birth.
The gender widget code in registration form.
The gender widget template can be found under
vendor/magento/module-customer/view/frontend/templates/widget/gender.phtml.
You can easily override this template by creating a template file called gender.phtml under your theme folder like
app/design/frontend/Your_Theme/default/Magento_Customer/templates/widget/gender.phtml
and adding the code below
In case you are wondering about the exta javascript code added on botton of the file above, the reason is for placing the error validation message of the radio buttons after all radio buttons. Maybe on our next post we will have a deeper look on a validation custom error placement message.
So now the registration form looks like below
And also in My Account → Account Information where the same widget template is used.
Our custom gender template can be found here.
Feel free to share this post and ask your questions in the comments below.
Till next time!
Recent Posts
