Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Customize the WooCommerce Product Page with a Datepicker Input Field?

Ever thought about when a date picker becomes super important, especially on your product page? Well, for stores with booking services or events, it’s a big deal. Say your store sells services or event tickets for specific dates. With a date picker on the product page, customers can easily choose the date they want to book or attend.

Now, let’s look at how this datepicker input field helps customers when they’re ordering stuff.

Solution: Customize the WooCommerce Product Page with a Datepicker Input Field

This code snippet adds a custom date picker field to WooCommerce product pages, allowing customers to select a specific date related to their order.

add_action( 'woocommerce_before_add_to_cart_button', 'ts_display_custom_date_picker', 9 );
function ts_display_custom_date_picker() {
    echo '<div class="custom-date-picker">';
    woocommerce_form_field( 'custom_date', array(
        'type'         => 'date',
        'required'     => false, // Change to true if field is required
        'label'        => 'Custom Date',
        'placeholder'  => 'Select custom date...',
        'class'        => array('custom-date-picker-class'), // Add custom CSS class if needed
        'autocomplete' => 'off', // Disable browser autocomplete
    ));
    echo '</div>';
}

// Add custom date to cart item data for all products
add_filter( 'woocommerce_add_cart_item_data', 'ts_add_custom_date_to_cart', 10, 2 );
function ts_add_custom_date_to_cart( $cart_item_data, $product_id ) {
    if ( isset( $_POST['custom_date'] ) ) {
        $cart_item_data['custom_date'] = sanitize_text_field( $_POST['custom_date'] );
    }
    return $cart_item_data;
}

// Display custom date in cart and checkout
add_filter( 'woocommerce_get_item_data', 'ts_display_custom_date_in_cart', 10, 2 );
function ts_display_custom_date_in_cart( $cart_data, $cart_item ) {
    if ( isset( $cart_item['custom_date'] ) ) {
        $cart_data[] = array(
            'name'  => 'Custom Date',
            'value' => sanitize_text_field( $cart_item['custom_date'] ),
        );
    }
    return $cart_data;
}

// Save the custom date field value to the order items
add_action( 'woocommerce_checkout_create_order_line_item', 'ts_save_custom_date_to_order_items', 10, 4 );
function ts_save_custom_date_to_order_items( $item, $cart_item_key, $values, $order ) {
    if ( isset( $values['custom_date'] ) ) {
        $item->add_meta_data( 'Custom Date', $values['custom_date'], true );
    }
}

// Display custom date in admin order items table
add_filter( 'woocommerce_order_item_name', 'ts_display_custom_date_in_admin_order_items_table', 10, 2 );
function ts_display_custom_date_in_admin_order_items_table( $item_name, $item ) {
    // Check if the item has custom date associated with it
    if ( $custom_date = $item->get_meta( 'Custom Date' ) ) {
        // Append the custom date to the item name
        $item_name .= '<br><small>' . esc_html__( 'Custom Date:', 'your-textdomain' ) . ' ' . esc_html( $custom_date ) . '</small>';
    }
    return $item_name;
}

Output

When a customer visits the product page, the code displays a custom date picker field above the add-to-cart button. Customers can select a specific date for booking to attend an event or for a service to be sceduled. This information is then stored and displayed throughout the checkout process and in the admin order items table.

How to Customize the WooCommerce Product Page with a Datepicker Input Field? - Tyche Softwares

The customer entered date will be saved and shown in the admin order details page inside the items table.

How to Customize the WooCommerce Product Page with a Datepicker Input Field? - Tyche Softwares

Just like with the date picker, adding a time picker on product page can greatly enhance the functionality of your WooCommerce store, especially for businesses that offer time-specific services or deliveries. Imagine a scenario where customers can select their preferred time for a service appointment or delivery – this customization makes their shopping experience as convenient as possible.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x