如何在产品页面上添加带有价格的单选按钮？ WordPress woocommerce

Question

如何根据用户的选择自定义产品页面以包含提取费。 通过在产品页面（而不是结帐页面）上自定义订购选项，可以使随附的照片更苗条。

我有这段代码，在结帐时显示了单选按钮和选项，但是由于某些原因，费用未添加到总计中。

    // 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()->session->get('radio_chosen');
   $chosen = empty( $chosen ) ? WC()->checkout->get_value('radio_choice') : $chosen;
   $chosen = empty( $chosen ) ? 'no_option' : $chosen;

   $args = array(
   'type' => 'radio',
   'class' => array( 'form-row-wide' ),
   'options' => array(
      'no_option' => 'No Option',
      'option_1' => 'Option 1 ($10)',
      'option_2' => 'Option 2 ($30)',
   ),
   'default' => $chosen
   );

   echo '<div id="checkout-radio">';
   echo '<h3>Customize Your Order!</h3>';
   woocommerce_form_field( 'radio_choice', $args, $chosen );
   echo '</div>';

}

// 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() && ! defined( 'DOING_AJAX' ) ) return;

  $radio = WC()->session->get( 'radio_chosen' );

  if ( "option_1" == $radio ) {
   $fee = 10;
  } elseif ( "option_2" == $radio ) {
   $fee = 30;
  }

  $cart->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;
    ?>
    <script type="text/javascript">
    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');
                }
            });
        });
    });
    </script>
    <?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()->session->set('radio_chosen', $radio );
        echo json_encode( $radio );
    }
    die();
}

如果我将钩子更改为add_action（'woocommerce_product_options_general_product_data'，'bbloomer_checkout_radio_choice'）;

选项按钮显示在签出页面上，并且工作正常，我假设需要一些方法将选项值从产品页面传递到签出页面

Answer 1

添加以下代码片段以实现您的工作-

function add_custom_fees_before_add_to_cart() {
    global $product;

    $args = array(
        'type' => 'radio',
        'class' => array( 'form-row-wide' ),
        'options' => array(
            '' => 'No Option',
            '10' => 'Option 1 ($10)',
            '30' => 'Option 2 ($30)',
        ),
        'default' => ''
    );
    ?>
    <div class="custom-fees-wrap">
        <label for="iconic-engraving"><?php _e( 'Customize Your Order!', 'textdomain' ); ?></label>
        <?php woocommerce_form_field( 'custom_fees', $args, '' ); ?>
    </div>
    <?php
}

add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_fees_before_add_to_cart', 99 );


function save_value_add_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
    $custom_fees = filter_input( INPUT_POST, 'custom_fees' );

    if ( empty( $custom_fees ) ) {
        return $cart_item_data;
    }

    $cart_item_data['custom_fees'] = $custom_fees;

    return $cart_item_data;
}

add_filter( 'woocommerce_add_cart_item_data', 'save_value_add_cart_item_data', 99, 3 );

function calculate_add_cart_fee() {
    global $woocommerce;
    $cart_items = $woocommerce->cart->get_cart();
    foreach( $cart_items as $key => $item ) { 
        if( !isset( $item['custom_fees'] ) && empty( $item['custom_fees'] ) ) continue;
        $woocommerce->cart->add_fee( __('Custom fees', 'textdomain'), $item['custom_fees'] );
    }
}
add_action( 'woocommerce_cart_calculate_fees', 'calculate_add_cart_fee', 99 );