Title: Radio button formating
Last modified: August 31, 2016

---

# Radio button formating

 *  [jgessentials](https://wordpress.org/support/users/jgessentials/)
 * (@jgessentials)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/radio-button-formating/)
 * Hi,
 * I would like to make my radio buttons look like this:
    [http://codepen.io/imohkay/pen/wyxuB/](http://codepen.io/imohkay/pen/wyxuB/)
 * I am using the mystile theme for woocommerce which has a custom.css included 
   so I can add the css there so that part is fine.
 * How do I go about adding a class to radio buttons to make them use the custom
   css? The radio buttons are linked to the woocommerce functionality as they are
   linked to products.
 * Any ideas are greatly appreciated.
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Andrew](https://wordpress.org/support/users/cipes/)
 * (@cipes)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/radio-button-formating/#post-7242083)
 * **First Option**
    I’d just use CSS specificity to select the radio buttons on
   the page you’re looking for. If it was on the product page it would be something
   like
 *     ```
       body.single-product input[type="radio"] {
         /*  your css here */
       }
       ```
   
 * **Second Option**
 * I would go about this by using WooCommerce’s templating system.
    [This information](https://docs.woothemes.com/document/template-structure/)
   tells you how to override templates within your theme. So you’d basically find
   which template outputs the radio buttons, copy it over to your theme file in 
   the correct location and add in the class you’re looking for.
 *  Thread Starter [jgessentials](https://wordpress.org/support/users/jgessentials/)
 * (@jgessentials)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/radio-button-formating/#post-7242141)
 * Thank you could you help clean this up?
 *     ```
       body.single-product input[type="radio"] {
       .radio {
           opacity: 0;
           position: absolute;
       }
   
       .radio, .radio-label {
           display: inline-block;
           vertical-align: middle;
           margin: 5px;
           cursor: pointer;
       }
   
       .radio-label {
           position: relative;
       }
   
       .radio + .radio-label:before {
           content: '';
           background: #fff;
           border: 2px solid #ddd;
           display: inline-block;
           vertical-align: middle;
           width: 20px;
           height: 20px;
           padding: 2px;
           margin-right: 10px;
           text-align: center;
       }
   
       .radio + .radio-label:before {
           border-radius: 50%;
       }
   
       .radio:checked + .radio-label:before {
           content: "\f00c";
           font-family: 'FontAwesome';
           color: #bbb;
       }
   
       .radio:focus + .radio-label {
         outline: 1px solid #ddd; /* focus style */
       }
       }
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Radio button formating’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [radio buttons](https://wordpress.org/support/topic-tag/radio-buttons/)

 * 2 replies
 * 2 participants
 * Last reply from: [jgessentials](https://wordpress.org/support/users/jgessentials/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/radio-button-formating/#post-7242141)
 * Status: not resolved