Customize Calendar Designs with WooCommerce Bookings and Appointments

Design plays a big role in how your customers interact with the booking calendar on your site. Some businesses prefer a clean layout with the calendar always visible, while others want a compact design that only appears when clicked. That’s why the WooCommerce Bookings and Appointments plugin offers three different calendar templates you can choose from and full control over the colors.

In this article, we’ll show you how to select a calendar design and customize it to match your website.

Below are the three calendar design templates available in the WooCommerce Bookings and Appointments plugin.

This is how each calendar design appears on the product page:

Design 1: The calendar stays visible at all times on the product page in a clean and compact style.

Design 2: Uses a high-contrast, structured layout to make the calendar stand out more clearly.

Design 3: The calendar remains hidden until the customer clicks the date field, offering a cleaner UI.

1. Access Calendar Design Settings

To begin customizing your calendar appearance:

Go to: WooCommerce > Bookings > Settings > Calendar Design

Here, you’ll find the following options:

• Choose from Design 1, Design 2, or Design 3
• Preview how each design looks
• Change calendar colors for buttons, dates, text, and more

Note: Design 1 is selected by default.

2. Calendar Design Templates

The plugin provides three built-in calendar design layouts, each with its own display style.

2.1 Calendar Design 1 – Always Visible, Minimal Layout

This design keeps the calendar always visible on the product page, making it easy for customers to view available dates at a glance. It offers a clean and compact layout, making it an ideal choice for mobile-friendly stores or businesses that prefer a simple design.

Want to display the calendar on a custom page instead of the product page? Here’s how you can do it

Customizable Elements:

• Month and Weekday background colors
• Summary box and text
• Booked date and selected date highlights
• Button styling (background and text)

This is how the calendar will appear on the product page for your customers:

2.2 Calendar Design 2 – Bold Visual Calendar Layout

This design features a large, centered calendar layout, making it visually prominent on the product page. The booking details appear in a dedicated box below the calendar, creating a structured and focused experience. It’s an excellent choice for modern, immersive design themes that prioritize aesthetics.

 Customizable Elements:

• Primary background and summary box
• Date box, selected date, and booked date colors
• “Book Now” button colors

Here’s how this design will look on the frontend product page:

2.3 Calendar Design 3 – Show Calendar on Click

In this layout, the calendar remains hidden until the customer clicks on the date fields. At first glance, only the start and end date input boxes are visible, ideal for clean, form-style product pages. Once a user clicks inside the date field, the calendar pops up dynamically, allowing the customer to select their booking dates.

 Customizable Elements:

• Font and summary colors
• Date selection box on click
• Button and calendar box styling

Below is how the calendar looks before the user clicks on the date fields:

Once the customer clicks on the date field, the calendar appears like this, and they can now select their preferred start and end dates directly from the calendar, as shown : 

Once the customer picks their dates, the calendar closes automatically, and the selected dates appear in the input boxes, ready for them to continue with the booking process.

This approach saves space and gives your product page a minimal, user-friendly layout, especially useful for stores with many form inputs or compact UI designs.

3. Customize Calendar Colors

Each calendar design lets you modify specific colors. You can change:

• Font and text colors
• Background for calendar sections
• Booked/Selected date highlights
• Button styles for “Book Now” and calendar inputs

To change a color:

1. Click the color box next to the element you want to change.

2. Use the color picker or enter a hex code
3. Click Save Changes to apply

Click Reset to Default to revert to the original color settings.

Watch a quick walkthrough of the calendar design settings:

Now that you’ve chosen a calendar design and tailored its colors to match your brand, your booking interface is ready to deliver a smooth, on-brand experience for your customers.

Preview the booking calendar on your product page to ensure it looks and functions exactly how you want. If needed, feel free to revisit the settings, switching designs or tweaking colors is quick and easy. As your business evolves or seasons change, refreshing your calendar style is a great way to keep your store visually engaging and aligned with your offerings.

What’s next? Continue setting up your booking system by following our WooCommerce Bookings and Appointments Setup Guide