All Collections
Calender Widget Customization
Appointment Calendar Widget
How to manually add "Select Date and Time" button for Appointments?
How to manually add "Select Date and Time" button for Appointments?
Support avatar
Written by Support
Updated over a week ago

Sometimes "Select Date and Time" button does not shows automatically for appointment products and customers continue to see "Buy Now" and "Add to Cart" options. This might happen with the stores having customized themes. In such cases merchants will have to add "Select Date and Time" button manually by following the steps given below:

  1. Go to the online store and open the appointment product. You will see options "Buy Now" and "Add to Cart". Go to the option "Add to Cart" or "Buy Now" and right click. Choose the option "inspect" from the dropdown menu.

    Screen_Shot_2021-02-26_at_3.51.41_PM.png
  2. The elements page will open in a browser with button element highlighted. As you see above you will notice the "CSS class" element for that section.
    Make sure to select the CSS class that covers the whole section including List of Variants, Quantity options, Buy Now and Add to Cart button.

    Screen_Shot_2021-02-26_at_3.57.57_PM.png
  3. Copy the name of the class. (In the image below it is "product-form-product-template")

    Screen_Shot_2021-02-26_at_4.00.04_PM.png
  4. Go to app Settings > Widget. In the Product Page Widget section, paste the name of div class in the field "Custom CSS class of "Add to cart / Buy now / Select variant" container".
    Save the changes.

  5. Go back to the appointment product in the online store and refresh the page. "Select Date and Time" button will start showing in all the existing and upcoming appointment products.

Did this answer your question?