🕒 Changing the Time Format on Product and Cart Pages

This article describes how to change the format of the time on the Product and Cart pages when using the Booking Form Time Picker.

---

⚙️ For Widgets

The Time Format options can be found in the app:
Widgets → Select the Widget → Under “Time,” choose a Time Format option.

---

Note:
Widgets are our newest type of booking form, and we highly recommend using a widget over a classic form.

✨ Widgets offer several advantages:

• No coding changes required

• A modern look that integrates smoothly with your theme

• More settings and improved app performance

Because widgets don’t require coding, you can easily create different types of widgets across your store to handle a variety of booking scenarios.

---

💻 Product Page – TimePicker

If you’re using a timepicker (Forms 3, 4, or 6), you can specify the time format by adding the following attribute to the booking-form.liquid snippet:

For example:

<select id="{{ attribute }}" name="properties[Time]" 
  class="bta-opening-hours bta-load-enable" 
  data-datepicker="booking-start" data-prompt="Choose a date...">
  <option class="loading">Loading...</option>
</select>

Becomes:

<select id="{{ attribute }}" name="properties[Time]" 
  class="bta-opening-hours bta-load-enable" 
  data-datepicker="booking-start" data-prompt="Choose a date..."
  data-bta-timeformat='hh:mm a'>
  <option class="loading">Loading...</option>
</select>

To change to a 24 hour clock (Military time) please change data-bta-timeformat='hh:mm a' to data-bta-timeformat='HH:mm'>

---

📅 Upcoming Events

When using the Upcoming Events widget, the time format is applied directly to the event table.

<table id="events" class="bta-upcoming-events-table" style="width:100%" 
  data-bta-max-events="5" 
  data-variant="{{ product.variants.first.id }}"
  data-handle="{{ product.handle }}"
  data-bta-timeformat='hh:mm a'>
 <tr><td colspan="3" class="loading">Loading...</td></tr>
 </table>

Cart Page

On the cart page (templates/cart.liquid or sections/cart-template.liquid) the time is shown as a line item property like this:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
  {% for p in item.properties %}
    {% unless p.last == blank %}
      {{ p.first }}:
      {% if p.last contains '/uploads/' %}
        <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
      {% else %}
        {{ p.last }}
      {% endif %}
      <br>
    {% endunless %}
  {% endfor %}
{% endif %}

To specify the format for the time, change where it says:

{{ p.last }}

to either this (if you are using Form 3, 4 or 6):

{% if p.first == 'Time' %}{{ p.last | date: '%-I:%M %p' }}{% else %}{{ p.last }}{% endif %}

or this if you are using the upcoming events booking form (Form 5) or the Course Widget:

{% if p.first == 'Date' %}{{ p.last | date: '%m/%d/%y %-I:%M %p' }}{% else %}{{ p.last }}{% endif %}

 

To change to a 24 hour clock (Military time) please change date: '%m/%d/%y %-I:%M %p' to  '%m/%d/%y %H:%M %p'>

📘 For more details:
Please refer to the Product Page documentation under the Developer Guide in BookThatApp for additional information and examples.