Displaying Appointment Capacity on the Single Service Page
Discover how to display the appointment capacity on the Single Service Page by using the JetAppointment and JetEngine plugins for your WordPress website.
Before you start check tutorial
- Elementor (Free version) or Block editor (Gutenberg)
- JetAppointment plugin installed and activated
with the appointment functionality set up
- JetEngine plugin installed and activated
- JetThemeCore plugin installed and activated
with Single Service Page built
The appointment capacity option allows you to set the maximum number of appointments for one time slot for every service.
Displaying appointment capacity can be helpful if you have group services like language classes, group training, web conferencing, etc., to display how many participants can enter one session.
Consider that you can display appointment capacity not only on the Provider and Service Single Pages but also in the Listing template.
Proceed to the JetAppointments > Settings tab on the WordPress Dashboard and enable the Manage Capacity and then the Show Capacity Counter toggles.
Then, navigate to the CPT tab that you set as the Services post type via the JetAppointment setup. In my case, it’s the “Services” CPT. Click to edit any post.
Move to the Appointment Settings tab, and set the Capacity number so clients can book, for example, only five appointments per day for this service.
After that, hit the “Update” button and repeat this step for other posts.
Go to Crocoblock > Theme Templates and click the “Edit” button under the Single Service template if you built it in the WordPress (block) editor or the “Edit with Elementor” button if you created it with Elementor.
If you already have a Single Service Page, you can go to Crocoblock > Theme Builder, click three dots near the Single Service Body Template, and push the “Edit content” button.
Drag-n-drop the Meta Field widget or block. Select the “Meta Data” Source and enter the “jet_apb_post_meta” line to the Custom meta field/repeater key field.
Enable the Filter field output toggle and pick the “Get child element from object/array” Callback. In the Child item name field, enter the “meta_settings/_app_capacity” line.
If you wish, you can also Customize field output.
When you finish, push the “Update” button.
Proceed to the front end and open several posts to check if the appointment capacity is displayed correctly.