title: How to add a radio button with price on product page? WordPress woocommerce
body: <p>How can to customize the product page to include an extract fee base on the user's choice. Something slimier to the attached photo with customize your order option on the product page not on checkout page. <a href="https://i.stack.imgur.com/Djxiv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Djxiv.png" alt="enter image description here"></a></p>
  
  <p>I have this code which display the radio buttons and option on the checkout but for some reason the fee is not being added to the total.</p>
  
  <pre><code>    // Part 1
  // Display Radio Buttons
  // Uses woocommerce_form_field()
  
  add_action( 'woocommerce_before_add_to_cart_form', 'bbloomer_checkout_radio_choice' );
  
  function bbloomer_checkout_radio_choice() {
  
     $chosen = WC()-&gt;session-&gt;get('radio_chosen');
     $chosen = empty( $chosen ) ? WC()-&gt;checkout-&gt;get_value('radio_choice') : $chosen;
     $chosen = empty( $chosen ) ? 'no_option' : $chosen;
  
     $args = array(
     'type' =&gt; 'radio',
     'class' =&gt; array( 'form-row-wide' ),
     'options' =&gt; array(
        'no_option' =&gt; 'No Option',
        'option_1' =&gt; 'Option 1 ($10)',
        'option_2' =&gt; 'Option 2 ($30)',
     ),
     'default' =&gt; $chosen
     );
  
     echo '&lt;div id="checkout-radio"&gt;';
     echo '&lt;h3&gt;Customize Your Order!&lt;/h3&gt;';
     woocommerce_form_field( 'radio_choice', $args, $chosen );
     echo '&lt;/div&gt;';
  
  }
  
  // Part 2
  // Add Fee and Calculate Total
  // Based on session's "radio_chosen"
  
  #2 Calculate New Total
  
  add_action( 'woocommerce_cart_calculate_fees', 'bbloomer_checkout_radio_choice_fee', 20, 1 );
  
  function bbloomer_checkout_radio_choice_fee( $cart ) {
  
    if ( is_admin() &amp;&amp; ! defined( 'DOING_AJAX' ) ) return;
  
    $radio = WC()-&gt;session-&gt;get( 'radio_chosen' );
  
    if ( "option_1" == $radio ) {
     $fee = 10;
    } elseif ( "option_2" == $radio ) {
     $fee = 30;
    }
  
    $cart-&gt;add_fee( __('Option Fee', 'woocommerce'), $fee );
  
  }
  
  // Part 3
  // Refresh Checkout if Radio Changes
  // Uses jQuery
  
  add_action( 'wp_footer', 'bbloomer_checkout_radio_choice_refresh' );
  
  function bbloomer_checkout_radio_choice_refresh() {
  if ( ! is_checkout() ) return;
      ?&gt;
      &lt;script type="text/javascript"&gt;
      jQuery( function($){
          $('form.checkout').on('change', 'input[name=radio_choice]', function(e){
              e.preventDefault();
              var p = $(this).val();
              $.ajax({
                  type: 'POST',
                  url: wc_checkout_params.ajax_url,
                  data: {
                      'action': 'woo_get_ajax_data',
                      'radio': p,
                  },
                  success: function (result) {
                      $('body').trigger('update_checkout');
                  }
              });
          });
      });
      &lt;/script&gt;
      &lt;?php
  }
  
  // Part 4
  // Add Radio Choice to Session
  // Uses Ajax
  
  add_action( 'wp_ajax_woo_get_ajax_data', 'bbloomer_checkout_radio_choice_set_session' );
  add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'bbloomer_checkout_radio_choice_set_session' );
  
  function bbloomer_checkout_radio_choice_set_session() {
      if ( isset($_POST['radio']) ){
          $radio = sanitize_key( $_POST['radio'] );
          WC()-&gt;session-&gt;set('radio_chosen', $radio );
          echo json_encode( $radio );
      }
      die();
  }
  </code></pre>
  
  <p>If I change the hook to add_action( 'woocommerce_product_options_general_product_data', 'bbloomer_checkout_radio_choice' );</p>
  
  <p>The option buttons shows up on the check out page and it work fine, I assume some how I need to pass the option value from product page to the check out page</p>