在 Woocommerce 中添加到购物车操作时，将自定义选择的日期添加到购物车项目

Question

I'm building a shop with Woocommerce where you are supposed to have the opportunity to order different menus on different days.

So I created an array with dates from where I with Javascript create a Tabbed menu where each tab has a data-attribute with the date to the relevant day.

So what I want to achieve is, that when I for example click the tab "thursday 6.sept" (then its active) and then choose an Item (in this case a menu) and click "add to cart" - I want to add the date to that Item and send it to the cart.

How can I achieve that or is it even possible?

Answer 1

In the code below, the first function will display a hidden input field inside the add to cart form.

Inside your existing javascript code, you will have to add some more JS code that will get your chosen date value and will set it in this hidden field (as you haven't provided any related code) . This way when the product will be added to cart, the chosen date value will be posted.

Then all other functions will add the chosen date as custom cart item data and will display it (optionally) in cart and checkout pages. Then when the order will be placed, the chosen date will be saved in order items and will be displayed everywhere.

// Add a hidden input field inside the add to cart form
add_action('woocommerce_single_product_summary','custom_single_product_summary', 2 ); // single product pages
function custom_single_product_summary(){
    global $product;

    if( $product->is_type('variable') ){
        add_action('woocommerce_before_single_variation','add_hidden_input_product_field', 30 );
    } else {
        add_action('woocommerce_before_add_to_cart_button','add_hidden_input_product_field', 30 );
    }
}
function add_hidden_input_product_field(){
    echo '<div class="hidden-field"><input type="hidden" id="chosen_date" name="chosen_date" value=""></div>';
}

// add the chosen date as custom cart item data
add_filter('woocommerce_add_cart_item_data', 'add_custom_field_data_to_cart', 20, 3);
function add_custom_field_data_to_cart($cart_item_data, $product_id, $variation_id) {
    if (isset($_POST['chosen_date']) && !empty($_POST['chosen_date'])) {
        $cart_item_data['chosen_date'] = sanitize_text_field( $_POST['chosen_date'] ); // Add the date to cart item data
        $cart_item_data['unique_key'] = md5(microtime().rand()); // Make each item unique
    }
    return $cart_item_data;
}

// Display in cart items the chosen date
add_filter('woocommerce_get_item_data', 'display_custom_item_data', 10, 2);
function display_custom_item_data($cart_item_data, $cart_item) {
    if (isset($cart_item['chosen_date'])) {
        $cart_item_data[] = array(
            'name'  => __("Chosen date", "woocommerce"),
            'value' => date('Y-m-d', strtotime($cart_item['chosen_date'])), // Formatting date (optional)
        );
    }
    return $cart_item_data;
}

// Save and display chosen date in orders and email notifications (everywhere)
add_action('woocommerce_checkout_create_order_line_item', 'custom_fields_update_order_item_meta', 20, 4);

function custom_fields_update_order_item_meta($item, $cart_item_key, $values, $order) {
    if (isset($values['chosen_date'])) {
        $date = date('Y-m-d', strtotime($values['chosen_date'])); // Formatting date (optional)
        $item->update_meta_data(__('Chosen date', 'woocommerce'), $date); // Save the date
    }
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.