Enable user local time in Woocommerce Cart and Checkout date time display

Question

For a bookings website I have activated 'Timezones'. The visitor's local time should be displayed. In the booking form everything is working fine. The cart data ($start_time, $end_time) is not being displayed correctly when using the function below.

add_filter( 'woocommerce_get_item_data', 'display_cart_data_wc_bookings', 10, 2 );
function display_cart_data_wc_bookings( $item_data, $cart_item ){

    if ( ! empty( $cart_item['booking'] ) ) {

        $date_format = apply_filters( 'woocommerce_bookings_date_format', wc_date_format() );
        $time_format = apply_filters( 'woocommerce_bookings_time_format', wc_time_format() );
        $start_date = apply_filters( 'woocommerce_bookings_get_start_date_with_time', date_i18n(  $date_format, $cart_item['booking']['_start_date'] ) );
        $start_time = apply_filters( 'woocommerce_bookings_get_start_date_with_time', date_i18n(  $time_format, $cart_item['booking']['_start_date'] ) );
        $end_time = apply_filters( 'woocommerce_bookings_get_end_date_with_time', date_i18n(  $time_format, $cart_item['booking']['_end_date'] ) );
        $persons = $cart_item['booking']['_persons'];
        $ID = $cart_item['booking']['_booking_id'];

        echo '<dt class="titel datum">' . __('Date', 'woocommerce') . '</dt><dd class="data datum">' . esc_html( $start_date ) . '</dd>';
        echo '<dt class="titel tijdvak">' . __('Time', 'woocommerce') . '</dt><dd class="data tijdvak">' . esc_html( $start_time ) . ' - ' . esc_html( $end_time ) . '</dd>';
        foreach($persons as $person){
            echo '<dt class="titel personen">' . __('Persons', 'woocommerce') . '</dt><dd class="data personen">' . esc_html( $person) . '</dd>';
        }
        echo '<dt class="titel booking_id">' . __('Booking #', 'woocommerce') . '</dt><dd class="data booking_id">' . esc_html( $ID) . '</dd>';

    }
}

The output of $start_time and $end_time should be displayed in the visitor's local time. How can I achieve this?

Answer 1

To enable the user time zone jQuery and ajax are necessary. Here are the following steps:

1. early enabling user WooCommerce session ( WC Session ),
2. getting the user browser time zone (time zone from user computer or device),
3. sending that timezone to php via ajax,
4. grab that time zone in the user WC Session ,
5. then use it in your code on date and time php functions as date(), date_i18n(), time()…

Once the user time zone is saved in WC Session, all the related code will be auto disabled (as not needed anymore).

The code:

// Early enable customer WC_Session (if not done)
add_action( 'init', 'wc_session_enabler' );
function wc_session_enabler() {
    if ( isset(WC()->session) && ! WC()->session->has_session() ) {
        WC()->session->set_customer_session_cookie( true );
    }
}

// Get the browser user timezone and send it to php (Ajax)
add_action( 'wp_head', 'user_timmezone_js' );
function user_timmezone_js() {
    if( ! WC()->session->get('time-zone') ) :
    ?>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.6/jstz.min.js"></script>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof woocommerce_params === 'undefined') 
            return false;

        var tz = jstz.determine();

        $.ajax({
            type: "POST",
            url: woocommerce_params.ajax_url,
            data: ({
                'action': 'time_zone',
                'timezone': tz.name()
            }),
            success: function(response) {
                console.log('Success: '+response);
            }
        });
    });
    </script>
    <?php
    endif;
}

// function that gets the Ajax data and save it to user WC Session
add_action( 'wp_ajax_time_zone', 'set_session_timezone' );
add_action( 'wp_ajax_nopriv_time_zone', 'set_session_timezone' );
function set_session_timezone() {
    if ( isset($_POST['timezone']) && ! empty($_POST['timezone']) ){
        WC()->session->set('time-zone', esc_attr($_POST['timezone']) );
        echo  WC()->session->get('time-zone');
    }
    die();
}

Code goes in function.php file of your active child theme (or active theme).

Then you will include the following to get and set the time zone:

if( $timezone = WC()->session->get('time-zone') ) {

    date_default_timezone_set($timezone);
}

---

Updated:

Now your code is incorrect when using woocommerce_get_item_data as it's a filter hook and require to return filtered content (not to echo html)…

Try the following instead (untested):

add_filter( 'woocommerce_get_item_data', 'display_cart_data_wc_bookings', 10, 2 );
function display_cart_data_wc_bookings( $item_data, $cart_item ){
    if ( isset($cart_item['booking']) && ! empty($cart_item['booking']) && ! is_admin() ) {
        // Get and set the user time zone
        if( $timezone = WC()->session->get('time-zone') ) {
            date_default_timezone_set($timezone);
        }
        $booking_data = $cart_item['booking'];
        $date_format  = apply_filters( 'woocommerce_bookings_date_format', wc_date_format() );
        $time_format  = apply_filters( 'woocommerce_bookings_time_format', wc_time_format() );
        $start_date   = apply_filters( 'woocommerce_bookings_get_start_date_with_time', date_i18n(  $date_format, $booking_data['_start_date'] ) );
        $start_time   = apply_filters( 'woocommerce_bookings_get_start_date_with_time', date_i18n(  $time_format, $booking_data['_start_date'] ) );
        $end_time     = apply_filters( 'woocommerce_bookings_get_end_date_with_time', date_i18n(  $time_format, $booking_data['_end_date'] ) );
        $persons      = $booking_data['_persons'];
        $booking_id   = $booking_data['_booking_id'];
        
        $item_data[] = array(
            'key'       => __('Date', 'woocommerce'),
            'value'     => esc_html( $start_date ),
            'display'   => esc_html( $start_date ),
        );
        
        $item_data[] = array(
            'key'       => __('Time', 'woocommerce'),
            'value'     => esc_html( $start_time ),
            'display'   => esc_html( $start_time ),
        );
        
        $count = 1;
        
        foreach($persons as $person){
            $item_data[] = array(
                'key'       => __('Person', 'woocommerce') . $count,
                'value'     => esc_html( $person ),
                'display'   => esc_html( $person ),
            );
            $count++;
        }
        
        $item_data[] = array(
            'key'       => __('Booking #', 'woocommerce'),
            'value'     => esc_html( $booking_id ),
            'display'   => esc_html( $booking_id ),
        );
    }
    return $item_data;
}

---

Partially based on: How to detect user's timezone?

Answer 2

@LoicTheAztec: Thanks for the update. Still not working. I've updated the code based on file 'class-wc-booking-cart-manager.php':

add_filter( 'woocommerce_get_item_data', 'display_cart_data_wc_bookings', 10, 2 );
function display_cart_data_wc_bookings( $item_data, $cart_item ){
    if ( isset($cart_item['booking']) && ! empty($cart_item['booking']) ) {

        // Get and set the user time zone
        $booking_data = $cart_item['booking'];
        if ( ! empty( $booking_data['_booking_id'] ) ) {
            $booking = get_wc_booking( $booking_data['_booking_id'] );
            if ( wc_should_convert_timezone( $booking ) ) {
                $timezone_data = array(
                    'name'    => get_wc_booking_data_label( 'timezone', $cart_item['data'] ),
                    'value'   => str_replace( '_', ' ', $booking->get_local_timezone() ),
                    'display' => '',
                );
            }
        }

        $date_format    = apply_filters( 'woocommerce_bookings_date_format', wc_date_format() );
        $time_format    = apply_filters( 'woocommerce_bookings_time_format', wc_time_format() );
        $start_date     = date_i18n( get_option( 'date_format' ), $booking->get_start( 'view', true ) );
        $start_time     = date_i18n( get_option( 'time_format' ), $booking->get_start( 'view', true ) );
        $end_time       = date_i18n( get_option( 'time_format' ), $booking->get_end( 'view', true ) );
        $persons        = $booking_data['_persons'];
        $booking_id     = $booking_data['_booking_id']; 

        $item_data[] = array(
            'key'       => __('Booking #', 'woocommerce'),
            'value'     => esc_html( $booking_id ),
            'display'   => esc_html( $booking_id ),
        );

        $item_data[] = array(
            'key'       => __('Date', 'woocommerce'),
            'value'     => esc_html( $start_date ),
            'display'   => esc_html( $start_date ),
        );

        $item_data[] = array(
            'key'       => __('Start time', 'woocommerce'),
            'value'     => esc_html( $start_time ),
            'display'   => esc_html( $start_time ),
        );

        $item_data[] = array(
            'key'       => __('End time', 'woocommerce'),
            'value'     => esc_html( $end_time ),
            'display'   => esc_html( $end_time ),
        );

        $count = 1;

        foreach($persons as $person){
            $item_data[] = array(
                'key'       => __('Person(s)', 'woocommerce') . $count,
                'value'     => esc_html( $person ),
                'display'   => esc_html( $person ),
            );
            $count++;
        }

        if ( ! empty( $timezone_data ) ) {
            // Add timezone to the end.
            $item_data[] = $timezone_data;
        }
    }

    return $item_data;

With this code step 1 to step 4 in your first comment are not necessary. Tested and it works!

Answer 3

Its little bit tricky, what we can do is always in back-end deal with UTC time format and from front-end convert the UTC time to local time

to convert the localtime you can find the help here, hope this way you can archive your goal