Using Elementor & Crocoblock as a Car Rental Website Builder

How would you start a car rental business? You’ll probably need a website. However, car rental website development is not all roses. One should create a complex digital architecture where all elements are tailored to work as one: custom post types for rentals, search and filtering by multiple parameters, booking functionality, catalog pages, taxonomies, etc. It’s tough, and we feel you.  

So, we’ve pondered, then pondered some more, and – oh, my! – found a solution. Why don’t you get a ready-made car rental website template, customize its look and feel, and launch it right away?! That’s how RentGo was born. 

In this article, I’ll let you go behind the scenes, explaining the backend processes and their front-end output and sharing helpful tips as we go. Enjoy the ride! 🚗

Now, let’s peek behind the curtain and see RentGo’s “opening acts” – header and footer.

To craft these vital elements, you’ll need several Crocoblock plugins. For starters, it’s JetBlocks, namely, its Site Logo widget. We used it to place the logo in the center and style it to look different on different web pages.

The next entry is JetThemeCore, which has covered the actual header and footer templates. Why are they necessary? Well, it’s for time-saving purposes. If you’ve got a template, you can embed it in the existing page in no time flat and be sure it looks equally great across all website pages.

The RentGo header template is presented in two variants:

• “Header for Front Page,” where the logo is on a transparent background;
• “Header for subpages” with the logo on a solid background.

As you can see, the header for this rent-a-car website is all about minimalistic simplicity, and the same can be said about the footer. 

The first thing you’ll spot is the variety of included elements and links. Except for the already mentioned site logo, there are headings, socials, and links:

• Headings Company and Support are brought into being by the JetElements plugin and its similarly dubbed widget. 
• The links are actually the Button widget. 
• Social links are added through the Social Icons widget from Elementor. 
• The Icon List widget displays the subitems in the Company and Support categories. 

That’s all about headers and footers. It’s time to dig deeper and penetrate the core.

RentGo template is a complex system whose internal structure contains many all-important correlations. Since RentGo originated as a rent-a-car website, its primary purpose is to promote the available cars and facilitate bookings and payments.

To create a car rental website, you’ll need to:

• Build custom post types (CPTs) and layouts to display them duly.
• Inter-relate the posts and output all car parameters dynamically. 
• Add car categories and create catalog pages. 
• Make it easy for users to find the best deal and book it.

You can shape the core thanks to JetEngine, JetBooking, JetSmartFilters, and other Crocoblock plugins. Let’s check out how it works in RentGo, one plugin at a time. 

The JetEngine plugin lets you create a dynamic structure for the website. For starters, create a custom post type titled Cars. Once done, you’ll get to find this post type in the WordPress admin panel.  

For this particular post type, we’ve added 16 different meta fields, but you can surely add more or delete any. Meta fields allow us to display the car-related details on the front end, and filling them out properly is essential.

To make it happen, use JetEngine dynamic widgets and blocks. They can pull out the car parameters to the front end and help to automate the process. Consider Dynamic Field, Dynamic Link, Dynamic Image, or any other widget you need. 

The next step is taxonomy creation. A taxonomy can help you categorize the available cars and ease out filtering. For the RentGo template, we created five taxonomies – Color, State, Body Type, Class, and Location – thanks to which sorting all car categories will be plain sailing in the long run.

Now that we’ve created car post types, we want them displayed on the website. And that’s when listings take the spotlight. They let us create terrific layouts, making the same post types look fancy on different pages. To create a listing, follow these steps.  

The best part about listings is that you style up a listing item just ONCE, and these settings will automatically apply to all your items. 😉       

Let’s focus on RentGo listings now. The first you can see is placed on the Home page. This “Main Listing” item was made using JetElements and JetEngine dynamic widgets:

• Dynamic Field widget;
• Dynamic Image widget to illustrate the listing item;
• Headline widget to bring out the texts;
• Headline widget + Dynamic Function tag > “Custom field (Area)” to pull out the price;
• Dynamic Link widget;
• Button widget.

The next listing, “Main Listing v2” item, is crafted for the Search Results page. This listing displays almost the same information but uses a different layout:

Lastly, there’s a service listing named “Main Listing Class” item. Its major purpose is to output the taxonomy terms – Economy, Intermediate, Standard, and Luxury. We strongly advise not to alter the car rental template’s settings for it to function correctly. 

Now, it’s time to “accommodate” the listings. Let’s open the Home page. As you can see, it houses four car categories. 

To deliver such a structure, you must use a Listing Grid widget and carefully tune the settings. We want prospective clients to search directly in the category they prefer. So we created a custom query for posts using Query Builder from JetEngine and set it to be Tax Query type. These listings are for the Class taxonomy, and the query determines which vehicles to output by the slug.

Let’s take the Economy class as a reference to see how it all works. We’ve added a Listing Grid widget to the Home page, picked the “Main Listing” item in the General tab, and chose a Custom Query – “Economy.” In the most basic terms, this query ignores all vehicle classes except for Economy and outputs them in the listing grid. 

Repeat the routine for each remaining vehicle class.

💡 Have you noticed the price tag next to the class title? The truth is you can set the starting price for each category and let the potential clients pick from the one they can afford. More to it, if you add a new car to any class, you won’t have to edit the starting price manually – the Dynamic Function tag feature will detect the change and do it for you!

Regarding the Search Results page, we’ve used the pre-cited Listing Grid to output the “Main Listing v2” item. Unlike the previous layout, this one showcases the post types as single-column tiles. You can switch between Classes at the top of the page.

✅ Dynamic content and listings – checked! Now, it’s time to delve into the page building.

We’ve already spoken about JetThemeCore at the beginning of the functionality overview. In addition to the header and footer, JetThemeCore helps us create car single pages and archive templates where all data is shown dynamically. 

The RentGo dynamic template houses five theme templates applied to four theme parts: CPT Archive, CPT Single, Entire Site, and Front Page.

To create all templates, you’ll need static and dynamic widgets. Here’s the trick: static widgets are rigid and will look the same everywhere you place them.  Conversely, dynamic widgets showcase the data you’ve added to custom fields. That’s why they look different on different pages.  

Let’s see which widgets make a car single page:

It contains Dynamic Image to display the car pic, Dynamic Field to pull the data from the post’s meta fields, Headline to output the selected custom field, and JetForm to embed a booking form. 

What is the best way to showcase the search results? We believe it’s a Search Archive page. JetThemeCore will have you covered; read how to create archive templates. 

In this ready-made car rental website, the archive page displays the available cars (CPTs via the Listing Grid widget) and advanced filters, which are about to be described. 

You’ve made it to the search routine, woop-woop! To implement the filtering functionality, you will need JetEngine and JetSmartFilters. These plugins go well together, making you more likely to create fully workable filters.

For this template, we’ve added Location, Image Filter, Year, Drivetrain, Transmission, Engine Capacity, Price, Body Type, Fuel Types, Pick-Up, and two hierarchical filters – Location Search Hierarchy and Search Hierarchy. You can find them all in the Smart Filters tab:

On the Home page, we’ve got a Quick Search option, which consists of two Select filters (Search Hierarchy), one Date Range filter, and the Apply button. After hitting the button, users change over to the Search Results page.

Now, this is where things get interesting. The Search Results page encapsulates the advanced filters, which are as follows:

• Active tags for displaying the parameters that are already applied;
• “Remove all filters” button;
• 4 Checkboxes filters for Transmission, Fuel Types, Body Type, and Drivetrain with a pre-set Indexer option;
• 3 Range filters for Engine Capacity, Price, and Year;
• 1 Visual Filter that lets you switch between the car categories;
• Pagination widget for smoother navigation.

Remember that JetSmartFilters has a lot more to offer, and these are not the limit. You can add/remove any filters you want to make them comply with your site’s concept.

All filters we’ve enumerated above use the AJAX request type, meaning they apply immediately without reloading the page. The page URL doesn’t change whatsoever.

All right, we’ve covered the items to book. Let’s proceed to set up the actual booking. It’s not that difficult to implement. All you need is JetBooking and the CPTs from earlier. Link the booking system to the required post type. It’s a time-saver because there’s no need to set up the booking engine manually.

When creating car rental websites, you still need to configure bookings. See how it’s done for RentGo:

• Booking mode is set to “Plain,” meaning the booking system focuses on the core functionality for managing bookings;

• Booking instance post type – pick the previously created main CPT in the dropdown (for RentGo, it’s Cars);
• enable WooCommerce integration;
• set the filter storage type to “Session”;
• provide custom labels where necessary (we wrote texts for “Night,” “Apply,” and “Previous Year”);
• Booking period – choose between the “Per Night” and “Per Day” options depending on whether to include the last booked date (we opted for “Per Day”);
• configure custom schedule by setting workdays and days off (it’s clean for RentGo, so you can customize it as needed);
• add extra database columns (we included order ID, additional options, and total).

JetBooking Wizard creates a Single Page Booking Form containing six fields (two are Hidden) and one Action button, “Rent Now.” You can customize these elements however you’d like. As you can see, everything is tuned and ready, even the calculation formula for additional services. 

💡 The booking form is built using JetFormBuilder, a free Crocoblock plugin. Find out more about its functionality from the Booking Form tutorial.

By default, the booking form is added to the car single page via the JetForm widget for Elementor. The booking form works only on the single page of the booking CPT, so it’s best not to move it anywhere. Moreover, RentGo is WooCommerce-integrated. It means that once the customer hits the “Rent Now” button, they will be taken to the checkout page.   

To find the submitted orders, go to the Bookings / WooCommerce > Orders sections in the WordPress dashboard.

The last stop for today is JetPopup. We’ve created two pop-ups storing car rental terms. You can spot them next to the car model name on its single page. Dubbed “Important Information” and “Insurance,” these two icon-bearing links open a pop-up window once clicked. As a space-saver, the solution is a real catch.

Start by creating a pop-up, then go to Elementor and use its Icon List widget to place the pop-up. You can create as many pop-up sections as necessary, set different visibility conditions, and embed them wherever needed. Just try to go easy on it. 😄

The pop-up templates for RentGo are stored in the JetPopup > All Popups section in the admin panel. You are free to modify their content, settings, and visibility conditions.

Looks like I’ve covered everything you should know about the rent-a-car website template. As you can see, it’s not difficult to recreate RentGo. All Crocoblock plugins inside are compatible; it’s highly functional and reasonably priced. Not to mention, you can customize the given template however you like. RentGo can help you save time, nerves, and money, meaning you won’t spend extra time perfecting the website. You would simply install the template, customize it a bit, and launch. 

Have you tried to create a car rental website? Feel free to share in the comments. 👇🏼