Can I get my radio buttons back on my HTML5 theme?

On the HTML5 themes, you will notice certain aesthetic changes. One of these changes is in regard to the way radio button options on displayed on product pages.

Instead of the standard circular radio button, radio options are now contained in a color changing selection box.

Some of our merchants have missed the old radio button style, so we’ve made it possible to change your template back to using the circular radio button selectors for your product options. If this is something that interests you, please use the following steps.

Please note
The following instructions will require some HTML editing knowledge. For the purposes of this article, we will outline the steps as clearly as possible.

  1. Log into your 3dcart Online Store
  2. Go to Settings ->Design ->Themes & Styles
  3. Click on “Edit Template (HTML)” to go into your store’s theme template editor.
  4. Look for listing_0.html and click on its “Edit” button

If the listing_0.html file is not present in your theme folder, then it is being served from the store’s common folder. To get to the common folder, look towards the top right to the “Go to folder:” drop down menu and select templates/common-html5

  1. Using your browser’s search function (CTRL-F) look for the word “radio-format” within the HTML coding.

You will be taken to a block of code that begins with “<!–START: radio-format–>.” This block of coding controls the radio buttons.

Directly beneath the “<!–START: radio-format–>” line, you will see the following:

<div class=”radio-format”>

Change this to say the following instead:

<div class=”alt-radio-format”>

  1. Save your changes.

Your product options will now be displayed in the old circular radio button format.