Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetAppointment: Creating Single Service/Provider Pages

 

From this tutorial, you’ll learn how to create Single Page templates for services and providers.

Tutorial requirements: 

JetAppointment is a plugin for WordPress that will help you create a website with providers and services. To customize and display them on the front end, you will need to build Single Page templates for providers and services. Let’s find out how to do it effortlessly.

Kindly note that the Service is the main CPT, and JetAppointment could function without the Provider CPT, so you decide whether to create it or not.

Create Single Service Page

Navigate to WordPress Dashboard > Crocoblock > Theme Templates.

Here you can also observe the built header and footer so you can create them with JetThemeCore as well.

crocoblock theme parts section

How to build a service page in Elementor

The Template Type should be set as “Single,” Template Content Type as “Elementor,” and the final Template Name field is optional. Click the “Create Template” button once ready with the fields.

create a template popup with elementor

As the editor opens, head to the settings block in the bottom left corner of the editor and proceed to the Preview Settings block.

Here set the Service CPT as Post Type and specify the post in the Select Post field if desired.

single preview settings

After setting up the Preview, you’ll be able to fill the template with content using JetEngine Dynamic widgets.

That’s what a Single Service Page would look like. Press the “Update” button once you are satisfied with the achieved result.

service single page in elementor editor

How to build a service page in Block Editor

After clicking the “Add New” button in the WordPress Dashboard > Crocoblock > Theme Templates directory, select “Single” as a Template Type, “Block Editor” as Template Content Type, and complete the Template Name field if needed.

Press the “Create Template” button to open the Block Editor.

create a template popup with block editor

Work on the appearance of the page. Add the required blocks to make the template complete.

NOTE
The preview is unavailable in Block Editor; all the changes will be visible on the front end.
service single page in block editor

Setting the single service template visibility conditions

Now we need to set the template visibility conditions. Return to WordPress Dashboard > Crocoblock > Theme Templates and find the newly built template. Look at the Instances tab; you can press the “Edit Conditions” button here.

service conditions not selected

The initial step is pushing the “Add Condition” button.

visibility conditions popup

There you go, now you can select the needed options for display. Choose “Include,” “Singular,” and “CPT” options. Then specify the CPT by choosing the service one.

Don’t forget to click on the “Save Conditions” button.

conditions for service page

Now, you can check any service page to see the built template in action. Let’s have a look at the Elementor-built template.

service page built with elementor

And now check the template created with the help of Block Editor.

service page built with gutenberg

Create Single Provider Page

How to build a provider page in Elementor

Using the description above, create the Single Provider Page template. That’s what it would look like.

Press the “Update” button to implement the changes.

provider single page in elementor

How to build a provider page in Block Editor

Here the procedure is pretty much the same as described earlier. 

Add the desired blocks to be shown on the provider page template and push the “Update” button to save the result.

provider single page in block editor

Setting the single provider template visibility conditions

Open the WordPress Dashboard > Crocoblock > Theme Templates tab once again. Here find the needed provider template.

Press the “Edit Conditions” button located in the Instances tab.

provider conditions not selected

Hit the “Add Condition” button to start adjusting the conditions.

provider single page visibility conditions popup

Pick the “Include” option in the first drop-down, then move to the second where the “Single” option should be selected. One more option to be chosen is “CPT.” Moreover, mind specifying the CPT you have earlier set as the provider.

Click the “Save Conditions” button and close the pop-up window.

conditions for provider page

Head to the provider page to see what it looks like. Firstly, let’s check the result once the template is built with Elementor.

provider page built with elementor

And that’s what the Gutenberg-created template looks like on the front end.

provider page built with gutenberg

So, moving to the template editor, drag and drop the Dynamic Field widget. Choose “Meta Data” as the Source and the Meta Field: “Related (the Provider CPT name)” in the Content block.

Enable the Filter field output toggle and choose the Callback: “Related posts list.”

If you want, you can use the Add links to related posts feature, so clients can click on the corresponding provider and go to their page.

dynamic field widget related provider

Then you could do the same for the Single Provider Page, but choose the Meta Field: “Related (the Service CPT name).”

dynamic field widget related service

The same procedure can be applied to the Block Editor. Open the editor and paste the Dynamic Field block.

Select the Meta Dataas the Source and “Related (the Provider CPT name)” as the Meta Field.

dynamic field block related provider

Toggle the Filter field output and pick the “Related posts list” option in the Callback selector.

Also, you can activate the Add links to related posts feature if needed.

the second part of dynamic field block related provider

Then you can take the same steps to showcase the related posts of the provider. Just choose the “Related (the Service CPT name)” as the Meta Field this time.

dynamic field block related service

You could add Single Booking Forms to your new Single Pages for Services and Providers. The creation and setup of forms are described here.

That is all about Single Service and Provider Pages. Now you know how to create them and what features to use to present the service at its best.