Skip to main content

Style the Appointment Form

Customize the form via CSS or by overriding WooCommerce templates in your theme.

Option A: CSS Only​

Add CSS in a child theme, custom plugin, or Appearance → Customize → Additional CSS. Useful selectors:

.wc-appointments-appointment-form-wrap, .wc-appointments-appointment-form, .wc-appointments-appointment-cost, .wc-appointments-appointment-form-button.

Example:

.wc-appointments-appointment-form-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}
.wc-appointments-appointment-form { display: block !important; }
.wc-appointments-appointment-form label { font-weight: 600; color: #111827; }
.wc-appointments-appointment-form input,
.wc-appointments-appointment-form select {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
}
.wc-appointments-appointment-cost.price {
  margin-top: 12px;
  font-size: 1.125rem;
  font-weight: 700;
  color: #0f766e;
}
.quantity .qty { max-width: 120px; }
.wc-appointments-appointment-form-button.button {
  display: inline-block !important;
  background: #2563eb;
  border-color: #2563eb;
  border-radius: 8px;
  padding: 10px 16px;
}
.wc-appointments-appointment-form-button.button:hover { background: #1d4ed8; }

Option B: Override Templates​

For structural changes, copy templates into your theme (do not edit plugin files):

  • plugins/woocommerce-appointments/templates/single-product/add-to-cart/appointment.php
  • plugins/woocommerce-appointments/templates/appointment-form/*.php

Place them in your theme with the same paths:

  • wp-content/themes/<your-theme>/woocommerce/single-product/add-to-cart/appointment.php
  • wp-content/themes/<your-theme>/woocommerce/appointment-form/*.php

You can then add wrappers/classes and style them:

<form class="wc-appointments-appointment-form-wrap cart my-appointments-form">
  <div class="wc-appointments-appointment-form my-appointments-inner">
    <div class="my-form-header">Book your time</div>
    <?php $appointment_form->output(); ?>
    <div class="wc-appointments-appointment-cost price my-form-cost"></div>
  </div>
  <button class="wc-appointments-appointment-form-button button alt my-submit">Confirm</button>
</form>

Useful hooks: woocommerce_before_appointment_form_output, woocommerce_after_appointment_form_output, woocommerce_before_add_to_cart_button, woocommerce_after_add_to_cart_button.

Tips​

  • Use a child theme to keep overrides upgrade-safe.
  • Prefer CSS and hooks for small tweaks; override templates only when needed.
  • Re-sync overrides when plugin templates update.
  • The Appointment Form block renders the same form; these styles apply to block-based pages too.