dashellle
Daria Zelinska
Copywriter
Updated on
Tutorials

Turning Elementor & Crocoblock into Car Rental Website Builder

How would you start a car rental business? You’ll probably need a website. However, a development journey is not all rainbows and unicorns. A car rental website is a complex digital architecture, where all elements are tailored to work as one. You’ll need custom post types for each vehicle on offer, a search tool with a bunch of parameters, booking forms, vehicle catalogs – the list goes on. It’s tough, really, and we feel you. 

We’ve pondered, and pondered, then did another round and – oh, my! – came up with a solution. Why don’t you get a work-ready website template, customize its look and feel, and launch your business right away?! That’s how RentGo was born. 

In this article, we’ll let you behind the scenes, explaining the backend processes and their frontend output, sharing tips and tricks as we go. Journey on! 🚗

Table of Contents:

Functionality

Wrapper
Starting with Header and Footer

Core
Enhancing Content Management
Building Site Structure
Advanced Filters for Car Rental Catalog
Booking Functionality
Buttons, Sliders, and Headlines
Improving Conversion with Pop-Ups
Playing with Visual Side of Car Rental Website

How to Get Crocoblock Car Rental Template

Bottom Line

Functionality

The Car Rental dynamic template is a pre-made website built with Crocoblock plugins and Elementor. To make it clear for you, we’ll expose every plugin and added functionality. 

Wrapper

Now, peek behind the curtain and gaze at the RentGo! “opening acts” – namely, 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 differently on different webpages. 

The next entry is JetThemeCore, which covered the actual header and footer templates. Why are they necessary? Well, it’s for time-saving purposes. If you’ve got a template, it can be embedded in the existing webpage in no time flat. You can learn more about how to create a header and footer in our Knowledge Base.

The RentGo header template is present in two variants:

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

As you can see, the header for this rent-a-car website is all about minimalistic simplicity; yet we cannot say the same about the footer. 

First thing you’ll spot it’s the variety of included elements and links. Except for the already mentioned site logo, there are also 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, Elementor. Finally, we used the Icon List widget to display the subitems in the Company and Support categories. 

We’re done with headers and footers. It’s time to dig deeper and penetrate the core. Yikes!

Core

Crocoblock Car Rental website template is a complex system, whose ins are laced with the all-important correlations. Since RentGo originated as a rent-a-car website, its major purpose is to promote the available cars and facilitate the bookings and payments.

With that being said, you’re going to create CPTs (custom post types) and layouts to duly display them. It will be vital to inter-relate the posts and output all car parameters dynamically. There should be categories and vehicle catalogs. To pave it all, customers need the option to fish out the best deal and book it.

That’s right guys, the core is shaped thanks to JetEngine, JetBooking, JetSmartFilters, and more. Let’s eat that elephant one bite at a time. 🍴

Enhancing Content Management

The JetEngine plugin lets you power up your web project making it more dynamic. For starters, create a custom post type titled Cars. After it’s 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 frontend dynamically, that’s why you better fill them out properly. 

NOTE:

You are supposed to input all data once, and then it will be automatically displayed on the single page template.

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

The next step is creating taxonomies. They are meant to categorize the available cars and ease out filtering. For the RentGo template, we created 5 taxonomies such as Color, State, Body Type, Class, and Location. In the long run, it will be plain sailing to sort all car categories – all thanks to taxonomies!

Layouts

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 yourself, go to JetEngine > Listings.  

Done? Now, open Elementor, search for the Listing Grid widget, and proceed to customize the listing item until it looks exactly like you pictured. The best part about it is that you style up a listing item just ONCE, and these settings will apply to all your items automatically!       

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 JetEngine dynamic widgets and JetElements widgets:

Pro tip

Except for Headline, Dynamic Tags can be used with other Elementor and Crocoblock widgets. Just make sure to submit the metadata beforehand.

NOTE:

Bear in mind that all data is input manually on the backend. Dynamic widgets just help to pull it up but if you want to change the car details, you do that on the backend and you stay aware the minor changes will apply to all listing items.

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:

rentgo search results page on the frontend

Lastly, there’s a service listing named “Main Listing Class” item. Its major purpose is to output the taxonomy terms, which are four – Economy, Intermediate, Standard, and Luxury. For the proper functioning of the car rental template, we strongly advise not to alter its settings. Read more about Terms.

Phew! 😌 All listings created, it’s time to ‘accommodate’ them. Let’s open the Home page. 

As you can see, it houses four car categories. 

To deliver such a structure, it’s necessary to add three Listing Grids and tune the settings carefully. Remember we’ve mentioned taxonomies? This is the moment we turn to the Class taxonomy. Since we’ve got 4 classes of vehicles (aka, Terms), they differ by price and technical statement. We want prospective clients to search directly in the category they prefer. That’s why the car groups were united into Classes.  

Let’s take 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 set advanced parameters in the Posts Query section. In the most basic terms, these parameters cherry-pick the Economy class vehicles from the listing and ignore all others. You can also see that we’ve used the Slider layout inside the Listing Grid. 

Repeat the routine for each remaining vehicle class. 

Have you noticed the price tag next to the class title? That’s a tweak everyone will appreciate. You can set the starting price for each category and thus let the potential clients pick from the one they can afford. More to it, if you happen to add a new car to any class, you won’t have to edit the starting price manually – the feature will detect the change and do it for you! What the feature is that, you ask? It’s the Dynamic Function tag.   

As to 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. The Classes can be switched to back and forth at the top of the page.

Forms

Using JetEngine, you can also create a form layout for your car rental website. RentGo contains just one – a Single Page Booking Form, meaning the car can be booked from its single page. The form contains 7 fields and a Submit button “Book Now” but you can customize these elements however you’d like. 

As you can see, everything is tuned and ready, even the calculation formula that adds additional services to the total. And one more thing: don’t forget to enable the Forms module in the settings so it all works smoothly. 

✅ Listings and forms – checked! Now, it’s time to delve into the page building.

Building Site Structure

We’ve already spoken about JetThemeCore at the very 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 will be outputted dynamically. 

The RentGo! dynamic template houses 5 theme parts:

rentgo theme parts in wordpress

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. On the flip side, dynamic widgets showcase the data you’ve added to meta 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 up the data from the admin panel, Headline to output the selected custom field, and Order Form to embed a booking form. 

Archive Template

What is the best way to showcase the search results? We believe it’s a Search Archive page. JetThemeCore will cover you, just read how to create it

Pro tip

Feel free to customize the template we’ve included in this car rental template. It’s THAT versatile! 😎

In this dynamic template, the archive page displays the available cars (CPTs via the Listing Grid widget) and the advanced filters. 

Advanced Filters for Car Rental Catalog

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

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

rentgo smart filters list in wordpress

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 in between the car categories;
  • Pagination widget for smoother navigation.

Keep in mind 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.

NOTE:

To ensure proper filtering, pay due attention to taxonomies and meta fields. Poorly developed items will have a toll on the search routine.

All filters we’ve enumerated above are subject to AJAX, which means they are applied immediately without reloading the page. The page URL doesn’t change whatsoever. 

Pro tip

The Indexer makes the filtering even smarter. It grays out the search parameters that are not compatible with those you already applied.

Booking Functionality

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 real time-saver because there’s no need to create stand-alone booking pages.

By default, the booking form is added to the car single page. But you can revamp it and place anywhere you want using the Form widget – the template logic tolerates that. Moreover, RentGo is WooCommerce-integrated. It means that once the customer hits the “Book Now” button, he/she will see the checkout page.   

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

NOTE:

We chose not to set the payment options for obvious reasons. So, you should do that on your own. If you don’t want your website to be WooCommerce-integrated, just disable the functionality in the settings.

Buttons, Sliders, and Headlines

We’ve already spoken about JetElements describing header and footer. However, the remaining website parts incorporate its widgets, as well. All buttons are due to the Button widget. There is a Slider in the Car Catalog section. Whenever you see a cool heading, be sure it’s made with the Headline widget. 

It’s not the limit for JetElements; one can add a lot more with it. But what we find outstanding about this plugin it’s the fact it can display data both statically and dynamically.

Improving Conversion with Pop-Ups

A second-last stop for today is JetPopup. To pack the essentials on car rental terms, we’ve made up two pop-ups. 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 are free to create as many pop-up sections as necessary, set different visibility conditions, and embed them wherever you want. Just try to go easy on it. 😄 

The pop-up templates for RentGo are in the JetPopup section in the admin panel. Should we mention that you are free to modify them? Just like anything else in this dynamic template. 

rentgo jetpopup section in the wordpress dashboard

Playing with Visual Side of Car Rental Website

JetTricks made it possible to add a cool Sticky Column effect on the car single page. Just look at this beauty!

How to Get Crocoblock Car Rental Template

As a Crocoblock user, you can simply upgrade to All-Inclusive. Except for RentGo!, you’ll be able to access all Crocoblock Extras. How much will it cost you? It depends on the package you’ve got and the desired All-Inclusive set (Lifetime or Yearly for 1 Website/Unlimited). At the checkout, the cost of your current plan will be subtracted from the total. Profit!   

Not a Crocoblock user yet? It’s not a problem. Visit the Pricing page and purchase the All-Inclusive set. It will grant you access to all Extras and plugins by Crocoblock.     

A quick tip: go through the Installation Wizard video tutorial if you find it difficult to install the package.

Bottom Line

The end. 🙂 We’ve shared everything you should know about this car rental website template. As you can see, it’s not that difficult to recreate RentGo on your own. The compatibility of Crocoblock plugins is beyond incredible, so integrating them won’t be an issue. To top it off, you can customize the existing template to any possible extent. Get creative and don’t be shy to add whatever you need on YOUR car rental website. Good luck!