Render Radio Buttons to Create as Tabs

  • Resolved wallacelin

    (@wallacelin)


    5 years, 6 months ago

    Hello,

    I want to use Fields Factory to build out a detailed e-commerce site to sell and offer quotes of commercial light fixtures, which requires a lot of different specifications on the product page.

    I would like to add those specs as radio buttons as tabs that customers can select. However, to create the tabs, I need to change the HTML rendering of radio buttons so input is rendered first, and label is rendered as an adjacent sibling element, like so:

    <input type="radio" class="test-radio-field" name="test-spec-1">
<label for="test-spec-1" class="test-radio-label">

    I tried to follow your article on how to change rendering behaviour but didn’t get it. How can this be done? I would love to do this. Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor sarkparanjothi

    (@sarkparanjothi)

    Not required to change the html rendering, just hide the radio button it will work.

    .wccpf-field[name="test-spec-1"] {
   display: none;
}

.wcff-option-wrapper-label {
   padding: 10px;
   color: #fff;
   background: #222;
}
    Thread Starter wallacelin

    (@wallacelin)

    Hello, thank you for your response. While that does change the options into tabs, you can’t tell when one of them is selected. I originally wanted to render the input before a label as a sibling element so I can apply the following CSS:

    .wccpf-field[type="radio"]:checked + .wcff-option-wrapper-label {
     padding: 10px;
     color: #222;
     background: transparent;
     border: 1px solid #222;
}

    For now, I shall keep the display of the radio input itself with the tab appearance of the label.

    • This reply was modified 5 years, 6 months ago by wallacelin.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Render Radio Buttons to Create as Tabs’ is closed to new replies.