{"id":23763,"date":"2022-04-16T20:51:10","date_gmt":"2022-04-16T20:51:10","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=23763"},"modified":"2023-09-28T14:29:49","modified_gmt":"2023-09-28T14:29:49","slug":"how-to-create-single-service-and-provider-pages","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-create-single-service-and-provider-pages\/","title":{"rendered":"How to Create Single Service\/Provider Pages"},"content":{"rendered":"\n
\n

JetAppointment<\/em> 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\u2019s find out how to do it effortlessly.<\/p>\n\n\n\n

Kindly note that the Service is the main CPT, and JetAppointment<\/em> could function without the Provider CPT, so you decide whether to create it or not.<\/p>\n<\/div><\/div>\n\n\n\n

Create Single Service Page<\/strong><\/h2>\n\n\n\n
\n

Navigate to WordPress Dashboard > Crocoblock<\/em><\/strong> > <\/em>Theme Templates<\/em><\/strong>.<\/p>\n\n\n\n

Here you can also observe the built header<\/a> and footer<\/a> so you can create them with JetThemeCore <\/em>as well.<\/p>\n\n\n\n\"crocoblock\n\n\n\n

How to build a service page in Elementor<\/h3>\n\n\n\n

The Template Type<\/strong> should be set as \u201cSingle,\u201d Template Content Type <\/strong>as \u201cElementor,\u201d and the final Template Name<\/strong> field is optional. Click the \u201cCreate Template<\/strong>\u201d button once ready with the fields.<\/p>\n\n\n\n\"create\n\n\n\n

As the editor opens, head to the settings block in the bottom left corner of the editor and proceed to the Preview Settings <\/strong>block.<\/p>\n\n\n\n

Here set the Service CPT as Post Type <\/strong>and specify the post in the Select Post <\/strong>field if desired.<\/p>\n\n\n\n\"single\n\n\n\n

After setting up the Preview<\/strong>, you\u2019ll be able to fill the template with content using JetEngine <\/em>Dynamic widgets.<\/p>\n\n\n\n

That\u2019s what a Single Service Page would look like. Press the \u201cUpdate<\/strong>\u201d button once you are satisfied with the achieved result.<\/p>\n\n\n\n\"service\n\n\n\n

How to build a service page in Block Editor<\/h3>\n\n\n\n

After clicking the \u201cAdd New<\/strong>\u201d button in the WordPress Dashboard > Crocoblock > Theme Templates <\/em><\/strong>directory, select \u201cSingle\u201d as a Template Type<\/strong>, \u201cBlock Editor\u201d as Template Content Type, <\/strong>and complete the Template Name <\/strong>field if needed.<\/p>\n\n\n\n

Press the \u201cCreate Template<\/strong>\u201d button to open the Block Editor.<\/p>\n\n\n\n\"create\n\n\n\n

Work on the appearance of the page. Add the required blocks to make the template complete.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The preview is unavailable in Block Editor; all the changes will be visible on the front end.<\/p><\/div><\/div>\n\n\n\n\"service\n\n\n\n

Setting the single service template visibility conditions<\/h3>\n\n\n\n

Now we need to set the template visibility conditions. Return to WordPress Dashboard > Crocoblock > Theme Templates <\/em><\/strong>and find the newly built template. Look at the Instances <\/strong>tab; you can press the \u201cEdit Conditions<\/strong>\u201d button here.<\/p>\n\n\n\n\"service\n\n\n\n

The initial step is pushing the \u201cAdd Condition<\/strong>\u201d button.<\/p>\n\n\n\n\"visibility\n\n\n\n

There you go, now you can select the needed options for display. Choose \u201cInclude,\u201d \u201cSingular,\u201d and \u201cCPT\u201d options. Then specify the CPT by choosing the service one.<\/p>\n\n\n\n

Don\u2019t forget to click on the \u201cSave Conditions<\/strong>\u201d button.<\/p>\n\n\n\n\"conditions\n\n\n\n

Now, you can check any service page to see the built template in action. Let\u2019s have a look at the Elementor-built template.<\/p>\n\n\n\n\"service\n\n\n\n

And now check the template created with the help of Block Editor.<\/p>\n\n\n\n\"service\n<\/div><\/div>\n\n\n\n

Create Single Provider Page<\/h2>\n\n\n\n
\n

How to build a provider page in Elementor<\/h3>\n\n\n\n

Using the description above, create the Single Provider Page template. That\u2019s what it would look like.<\/p>\n\n\n\n

Press the \u201cUpdate<\/strong>\u201d button to implement the changes.<\/p>\n\n\n\n\"provider\n\n\n\n

How to build a provider page in Block Editor<\/h3>\n\n\n\n

Here the procedure is pretty much the same as described earlier. <\/p>\n\n\n\n

Add the desired blocks to be shown on the provider page template and push the \u201cUpdate<\/strong>\u201d button to save the result.<\/p>\n\n\n\n\"provider\n\n\n\n

Setting the single provider template visibility conditions<\/h3>\n\n\n\n

Open the WordPress Dashboard > Crocoblock > Theme Templates <\/em><\/strong>tab once again. Here find the needed provider template.<\/p>\n\n\n\n

Press the \u201cEdit Conditions<\/strong>\u201d button located in the Instances <\/strong>tab.<\/p>\n\n\n\n\"provider\n\n\n\n

Hit the \u201cAdd Condition<\/strong>\u201d button to start adjusting the conditions.<\/p>\n\n\n\n\"provider\n\n\n\n

Pick the \u201cInclude\u201d option in the first drop-down, then move to the second where the \u201cSingle\u201d option should be selected. One more option to be chosen is \u201cCPT.\u201d Moreover, mind specifying the CPT you have earlier set as the provider.<\/p>\n\n\n\n

Click the \u201cSave Conditions<\/strong>\u201d button and close the pop-up window.<\/p>\n\n\n\n\"conditions\n\n\n\n

Head to the provider page to see what it looks like. Firstly, let\u2019s check the result once the template is built with Elementor.<\/p>\n\n\n\n\"provider\n\n\n\n

And that’s what the Gutenberg-created template looks like on the front end.<\/p>\n\n\n\n\"provider\n<\/div><\/div>\n\n\n\n