Добавить выбранное значение переключателя в качестве данных пользовательского элемента корзины через Ajax. Добавить в корзину в цикле продуктов WooCommerce

Чтобы добавить настраиваемые обязательные переключатели к продуктам на страницах архива WooCommerce и добавить выбранное значение в качестве данных настраиваемого элемента корзины, вы можете использовать следующее:

// Utility function: Custom radio buttons HTML output
function custom_input_radio_field( $field_key ) { 
    printf( '<div class = "custom-field-wrap gender-field-wrap" style = "margin: 10px;">
        <h4>%s</h4><div class = "form-check form-check-inline">
        <label for = "g-gender-boy">%s</label>
        <input type = "radio" id = "g_gender-boy" name = "%s" value = "boy" />
        </div> <div class = "form-check form-check-inline">
        <label for = "g-gender-girl">%s</label>
        <input type = "radio" id = "g_gender-girl" name = "%s" value = "girl" />
    </div></div>', __('Gender?', 'woocommerce'), __('Boy', 'woocommerce'),  $field_key, __('Girl', 'woocommerce'), $field_key );
}
    

// On product loop (archive pages)
add_action( "woocommerce_after_shop_loop_item", 'loop_product_add_custom_input_radio_field', 3 );
function loop_product_add_custom_input_radio_field() { 
    global $product;

    if ( $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ) {
        custom_input_radio_field( 'g_gender-'.$product->get_id() );
    }
}

// On single product
add_action( 'woocommerce_before_add_to_cart_button', 'single_product_add_custom_input_radio_field', 10 );
function single_product_add_custom_input_radio_field() { 
    custom_input_radio_field( 'g_gender' );
}

// Field validation
add_filter( 'woocommerce_add_to_cart_validation', 'validate_custom_input_radio_field', 10, 1 );
function validate_custom_input_radio_field( $passed ) {
    if ( isset($_REQUEST['g_gender']) && empty($_REQUEST['g_gender']) ) {
        wc_add_notice( __( 'Gender is a required field.', 'woocommerce' ), 'error' );
        return false;
    }
    return $passed;
}

// jQuery code add the radio button selected value to the request on Ajax add to cart
add_action( "init", 'custom_radio_field_loop_jquery_script', 1 );
function custom_radio_field_loop_jquery_script() {
    wc_enqueue_js( "$(document.body).on('adding_to_cart', function( e, btn, data ){
        const radio  = '[name=\"g_gender-'+data.product_id+'\"]',
            radioVal = $(radio+':checked').val();
                
        data['g_gender'] = radioVal ? radioVal : 0;
        return data['g_gender'];
    });" );
}

// Add checked radio button value as custom cart item data
add_action( 'woocommerce_add_cart_item_data', 'add_cart_item_radio_field_value', 10, 2 );
function add_cart_item_radio_field_value( $cart_item_data, $product_id ) {
    if ( isset($_REQUEST['g_gender']) && !empty($_REQUEST['g_gender']) ) {
       $cart_item_data[ 'gender' ] = esc_attr($_REQUEST['g_gender']);
       $cart_item_data['unique_key'] = md5( microtime().rand() );
    }
    return $cart_item_data;
}

// Display Gender value in minicart, cart and checkout
add_filter( 'woocommerce_get_item_data', 'display_cart_item_gender_value', 10, 2 );
function display_cart_item_gender_value( $cart_data, $cart_item ) {
    if ( isset($cart_item['gender']) ) {
        $cart_data[] = array( 
            'name'  => __('Gender', 'woocommerce'), 
            'value' => $cart_item['gender'] 
        );
    }
    return $cart_data;
}

// Save Gender value as custom order item data and display it on orders and emails
add_action( 'woocommerce_checkout_create_order_line_item', 'add_order_item_gender_value', 10, 4 );
function add_order_item_gender_value( $item, $cart_item_key, $values, $order ) {
    if ( isset($values['gender']) ) {
        $item->add_meta_data( 'gender', $values['gender'], true );
    }
}

// Change Gender displayed meta key label to something readable
add_filter('woocommerce_order_item_display_meta_key', 'filter_order_item_displayed_meta_key', 20, 3 );
function filter_order_item_displayed_meta_key( $displayed_key, $meta, $item ) {
    if ( $item->get_type() === 'line_item' && $meta->key === 'gender' ) {
        $displayed_key = __('Gender', 'woocommerce');
    }
    return $displayed_key;
}

Код находится в файле function.php вашей дочерней темы (или в плагине). Работает с Ajax-добавлением в корзину в циклах продуктов (а также на страницах отдельных продуктов).

Код также сохраняет выбранный пол в качестве метаданных пользовательского элемента заказа и отображает его в заказах и уведомлениях по электронной почте.