Introduction

Turbo is a Car Rental WordPress theme designed with Grid-Based Approach. It serves the aspiration of a modern and creative design and functionality.

BUY NOW / VIEW DEMO

Warning:

For previous TURBO user and new TURBO user this note is for RnB plugin.

If you are a new user of our plugin please follow this documentation.

If you are already an existing user of our plugin, please read the below information carefully before updating and using this version of our plugin

• New inventory management system has been added from this version onward
• Hourly booking with hourly calendar blocking has been added from this version
• Data structure has been changed.
• If you already have an order from 10th of this month to 12th of this month, it will not block the calendar once you update the plugin. New orders will block the calendar.
• If you want to use the latest version of our plugin, then you will need to create the inventory with pricing and features attributes, pick up location etc. after updating the plugin.

If you do not wish to update and want to use our legacy version then please follow the below documentation.

https://legacy.gitbook.com/book/redq/woocommerce-rental-and-booking/details

Author Information

Theme Name: Turbo – Car Rental WordPress Theme

Theme URI: http://bit.ly/2eKJEJb

Author: RedQ Team

Author URI: RedQTeam.com

Version: 1.0

License: GNU General Public License v2 or later

License URI: License

GettingStarted

Welcome to installation process…

After downloading the theme package from themeforest extract the package folder and there is the zip package of the theme.

Follow the steps to install the theme.

1.Goto Wp-Admin panel "Appearance > Themes"

2."Add new > Upload a theme"

3.Then Choose & Upload turbowp zip file

Installation Theme Helper and other Plugins

After install & activate the theme there is options to installed the required plugins needed for the theme.

Please check this admin notice on WP-Admin panel after installing the theme.

Begin installing the plugin and activate them.

Turbo Demo Importer

After installing theme and all required plugins go Dashboard-> Appearance-> Import Demo Data.

Now look at the below screen Shot. From this screen shot you will see our all demos are available to import. Before importing you may have a chance to preview them, you need to click on preview.

Special Note: After importing data you have to go to each and every product and edit them manually to connect each of them with respected Inventory. An example bellow.

Shortcodes

Please remember one thing before using any shortcode that, do not use the Gutenberg Editor, instead use the Classic Mode.

Intro

There are plenty of short codes for you to build pages as you wish. You hold the full control.

There are some short codes which will contain elements as their child. Those are:

• Accordion
• Contact Us Page Address Bar
• Testimonial
• Our Partner
• Our Team
• How It Works etc.

In Contact Us Page Address Bar, we have shown how to add child elements. Please follow this instruction for the short codes mentioned above.

Top Rated Products

Backend:

Frontend:

Note: Please Use Car Tabs shortcode instead this shortcode for better view and result.

Isotope Car Grid

Backend:

Frontend:

Content Blocks

Backend:

Frontend:

Featured Blocks

Backend:

Layout 3

Layout 4

Frontend:

Layout 4

Recent Products

Backend:

Frontend:

Note: Please Use Car Tabs shortcode instead this shortcode for better view and result.

Car Tabs

For Layout Two

Backend:

Frontend:

Testimonial

Backend:

Frontend:

Tips & Tricks

Backend:

Frontend:

Help Line

Backend:

Frontend:

Our Mission

Backend:

Frontend:

Our Partner

Backend:

Frontend:

Horizontal Search Form

Backend:

Layout 3

Layout 4

Frontend:

Layout 3

Layout 4

Vertical Search Form

Backend:

Frontend:

About Contact Info

Backend:

Frontend:

Our Team

Backend:

Frontend:

The Brand

Backend:

Frontend:

Contact Us Page Address Bar

Contact details will look like this:

To achieve this block use “Contact Us Page Address Bar” shortcode. Insert child elements. Then fill up the fields. You are ready to go.  🙂

Popular Cars Slider

Backend:

Frontend:

Feature Block Holder

Backend:

Frontend:

Download App

Backend:

Frontend:

Single Content Block

Backend:

Frontend:

News Letter

Backend:

Frontend:

Buttons

Backend:

Frontend:

Fact Boxes

Backend:

Frontend:

Countdown

Backend:

Frontend:

Progress Bar

Backend:

Frontend:

Circular Progress Bar

Backend:

Frontend:

Accordions

Frontend:

For this block, first choose ‘Accordions’ shortcode. Then add elements as child of this shortcode. Please note that you have to provide unique id for each accordion element.

Backend:

Google Map

Backend:

Frontend:

Fancy Title

Backend:

Frontend:

Featured Product

Backend:

Frontend:

Pages

Listing Page

Configure Reactive Pro (Searching & Filtering Plugin) with RnB ( WooCommerce Rental & Bookings Plugin )

If you want bookings and rental products in your site then you can use ourRnBplugin https://codecanyon.net/item/rnb-woocommerce-rental-booking-system/14835145?s_rank=7

When your site has bunch of rental properties then you might thinking about searching and filtering facilities for your site. In this case you can relax because we’ve most amazingSearching & Filtering Plugin (Reactive Pro). which works perfectly with RnB plugin.

Please check the following configuration to work perfectly RnB plugin with Reactive Pro Plugin.

Back-end Configuration :

Create a builder post for rental products from Dashboard->Reactive Builder by clicking Add Reactive Builder button

Enter a title in title box

1. Select product and inventory post types from Select post types select box
2. Then in Taxonomy Select box you’ll find all available taxonomies. From here you can choose all available taxonomies for product and inventory post types. Here is the list of all available taxonomies of inventory and product post types rnb_categories, resource, person, pickup_location, dropoff_location, attributes, features, depositeWhen you build your search page in front-end then you’ll only these taxonomies available here.
3. Like taxonomies you’ll find all available meta keys in Meta Key Select box.

You can also choose term meta and redirect page from here.

Please check the following screenshot:

When you click the update button you’ll see a shortcode at top right.

Copy it and go to Dashboard->pagedirectory, create a new page and paste this shortcode then click publish button and you’re done with back-end settings.

Turbowp Option Framework Settings

Turbo WordPress theme use Redux Option framework to handle a vast section. Where user can easily upload their correspondin images, social media links, custom styling etc.

In this chapter lets discuss about theTurbowp Options.

General Settings

This is the general settings of turbowp options.

Custom CSS/Scripts

Header Options

• Transparent Header

• Listing Header

Car Settings

Blog Settings

Banner Options

WooCommerce

• Product Settings

• Product Banner

• Social Share Settings

Login/Registration

Google Map

Social Profile

Footer Options

Copyright Options

Background Options

Typography Options

Import/Export

Turbo Product Creation

For creating Rental & Booking Product please follow this link. Here is given a brief discussion about product creation.

WooCommerce Rental & Booking Documentation

Turbo Listing

Home Page

First Step

Go to the theme option panel (Turbo Options). Then proceed to WooCommerce –> Product Settings. Now from Product Settings go to WooCommerce Layout. From WooCommerce Layout choose the layout Listing Layout.

Then click on Save Changes.

Second Step

Go to home page settings via edit page.

1.Layout Options:

2.Header Options:

3.Banner Options:

4.Footer Options:

Finally click on Update.

5.Final output of home page:

Third Step

Go to reactive builder from dashboard and add a new reactive builder.

Copy the reactive key.

Let’s see the home page again.

Click on Add Block.

Select Map and Search Block

Let’s see the home page again.

Fourth Step

For Map API key go to dashboard then click on Google Map. Then provide required information.

Click on settings icon of Map

Go to Appearance Tab and provide the Custom Class –> turbo-listing-home-map

Fifth Step

Now click on the + icon of Search Block and add search fields according to your requirement then click on save button.

Now click on the settings icon of the search block and go to Appearance tab and give the custom class name as turbo-listing-home-search and click on save button.

Now you will have this output on your home page.

Sixth Step

To add Map marker go to Dashboard–>Reactive–>Geobox

Now go to your Products–>All Products–>Edit Product

Here you can find location field, you can add your product location by dragging map marker on map or you can add location data by searching on location field.

After providing product location data you will have this output on home page in map as product location.

You may notice that our map marker design is not similar to our demo. Here is a procedure to change map marker design. Go to Dashboard–>Reactive Templates–>All Map Marker Template–>Add New Map Marker Template. Then put this below code.

<div class="turbo-marker marker-icon map-marker {{data.customClass}}" data-uid={{data.ID}}>
    <div class="marker-icon-wrapper">
      <i class="{{data.iconClass}}"></i>
    </div>
  </div>

Now go to Reactive Admin View and click on the Map settings icon. Here you can find the Template tab. Select your Map Marker Template. Here Turbo Listing Marker is the template you have created previously.

After selecting Map Marker Template you will have this output on home page.

Now it is time to set Map Info Window Template. Go to Dashboard–>Reactive Templates–>Map Info Window Template–>Add New Map Info Window Template.

<div class="reactiveInfoWindowWrapper">
  <div class="reactiveInfoWindowImage">
      <# if(data.meta._product_image_gallery_links && data.meta._product_image_gallery_links.length > 1) { #>
      <div class="reactive-lightbox-gallery product-image-wrapper turbo-owl-carousel owl-carousel owl-theme">
          <# _.each(data.meta._product_image_gallery_links, function( image ) { #>
              <# if(image) { #>
                <img class="item" src={{ image }}>
              <# } else {#>
                <img class="item" src={{ data.gridPlaceHolder }} alt="Image">
              <# } #>
          <# }) #>
      </div>
      <# } else { #>

      <div class="product-image-wrap">
          <a class="reactiveImagePopup" href="">
            <# if(data.thumb_url) { #>
              <img class="item" src={{ data.thumb_url }}>
            <# } else {#>
              <img class="item" src={{ data.gridPlaceHolder }}>
            <# } #>
          </a>
      </div>
      <# } #>
  </div>

  <div class="reactiveInfoWindowContents">
    <address>Broklyn, Newyork</address>
    <h3 class="title">
      <a href="#">{{data.post_title}}</a>
    </h3>

    <# if(data.meta._price) { #>
      <p class="price">${{ data.meta._price }} USD</p>
    <# } #>

    <div class="listing-btn-area">
      <a class="view-details-btn" href="{{data.post_link}}">View Details</a>
    </div>
  </div>
  <div class="opacity-height"></div>
</div>

Now go to home page and click on the settings icon of Map. From Map go to Template tab and select your Info Window Template just you have created previously and click on save button.

Now you have Map Info Window in home page’s Map while you click on the marker.

Seventh Step

This step is for creating a category Menu slider. To do this go to Dashboard–>Reactive Templates–>All Grid Shortcodes–>Add New Grid Shortcode.

Now go to your home page and click edit page. Add a fancy title block. Your fancy title layout should be listing fancy title. Then add a new row and paste Grid Shortcode key you just have created previously.Then click update. Below is the sample of a screenshot.

Now go to home page and you will see the category menu slider.

You may notice that Explore By Type is not similar to our demo. But there is a procedure to match it with our demo. To achieve this at first write a new category menu grid template. So go to Dashboard–>Reactive Templates–>All Category Templates–>Add New Category Template.

<div class="reactive-container-fluid turbo-category-menu-listing">  
  <# if(data.view == 'list') { #>
  <div class="reactive-row reactiveGridBlock {{ data.listClass }} owl-carousel category-menu-carousel owl-theme">
    <# } else { #>
    <div class="reactive-row reactiveGridBlock owl-carousel category-menu-carousel owl-theme">
      <# } #>
      <# 
              var siteUrl = REACTIVE.site_url;
            var redirectPage = REACTIVE.redirectPages && REACTIVE.redirectPages.length ? REACTIVE.redirectPages[0] : '';
            var listingPage = REACTIVE.redirectPages && REACTIVE.redirectPages.length ? `${siteUrl}/${redirectPage}` : '';
            var categoryTaxonomy = data.categorySettings.esternalPreLoad && data.categorySettings.esternalPreLoad.split(",").length >1 ? data.categorySettings.esternalPreLoad.split(",")[1] : '';
            var texCategory = `?tex_${categoryTaxonomy}=`;
            var texCategoryUrl = `${listingPage}/${texCategory}`
      #>
      <# _.each(data.categories, function( category ) { #>

          <#
            var totallCategories = category.posts.length;
            var categoryUrl = `${texCategoryUrl}${category.slug}`;
        #>
        <!-- Grid -->
          <div key=src={{ category.ID }} data-uid={{ category.ID }} class="reactiveCatGridType-Simple fadeIn">
          <div class="reactiveGridContent">
            <a href="{{categoryUrl}}" target="_blank">
              <# if(category.term_meta && category.term_meta.thumbnail_id) { #>
                <img src={{ category.term_meta.thumbnail_id }}>
              <# } else {#>
                <img src={{ data.gridPlaceHolder }}>
              <# } #>
                <div class="img-caption">
                  <h3 class="catTitle">{{ category.name }}</h3>
                  <p class="totallCat">
                    <# if (totallCategories > 1) { #>
                      {{ totallCategories }} cars
                    <# } else { #>
                      {{ totallCategories }} car
                    <# } #>
                  </p>
                </div>
            </a>
         </div>
        </div>
        <!-- Grid End -->
    <# }) #>
   </div>
</div>

Now go to your home page and click on settings bar under your category title Explore By Type.

In External Grid Settings go to Settings tab then select Grid Type Taxonomy then product_cat.

Now go to Layouts tab and choose Category Layout you just have created previously. Then click on save button.

Now go to home page and see the view of Explore By Type. Now it is similar to our demo.

Eighth Step

Now the step is to create a Product Grid on home page. So go to Dashboard–>Reactive Templates–>All Grid Shortcodes–>Add New Shortcode.

Now go home page and click on edit page. Add a fancy title block. Your fancy title layout should be listing fancy title. Then add a new row and paste Grid Shortcode key you just have created previously.Then click update. Below is the sample of a screenshot.

Now go to the home page. You may notice that Latest Premium Cars is not similar to our demo. But there is a procedure to match it with our demo. So click on the settings bar of Latest Premium Cars.

So go to Settings tab, Select Grid Type Taxonomy–>Post Types and click on save button.

Now it is time to create a new grid template like Airbnb. In order to create this template you need to go to Dashboard–>Reactive Templates–>All Grid Templates–>Add New Grid Template. Copy our provided code and paste it here. To do this see our screenshot below.

<div class="reactive-container-fluid turbo-airbnb-grid">

    <# if(data.view == 'list') { #>
    <div class="reactive-row {{ data.listClass }}">
    <# } else { #>
    <div class="reactive-row">
    <# } #>

        <# _.each(data.posts, function( post ) { #>

        <#
          var isPreviewEnable = data.gridSettings.previewPopUp;
          var postLink = post.post_link;
          var wishlist_added = false; 
          var icon_class = "fa fa-heart-o";
          var user_id = '';
          var user_wished = '';
          var wishlist_class = "redq-wwc-add-wishlist reactiveWishlist";
          user_id = REACTIVE.current_user.ID;
          if(post.meta._user_wished) {
              user_wished = post.meta._user_wished;
            for (const key in user_wished) {
                if (user_wished.hasOwnProperty(key) && user_wished[key] == user_id) {
                    wishlist_added = true;
                    icon_class = "fa fa-heart";
                            wishlist_class = "redq-wwc-add-wishlist reactiveWishlist wished";
                }     
            }
          }
          if(isPreviewEnable == 'true')
            postLink = '#';
        #>

        <!-- Grid -->

        <# if(data.view == 'list') { #>
          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.listColumnClass}} reactive-product-listing-list-item fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >

        <# } else { #>


          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.columnClass}} reactive-product-listing-item fadeIn " data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
              <div class="reactive-image-wrapper">
                    <# if(post.meta._product_image_gallery_links && post.meta._product_image_gallery_links.length > 1) { #>
                  <div class="reactive-lightbox-gallery product-image-wrapper turbo-owl-carousel owl-carousel owl-theme">
                      <# _.each(post.meta._product_image_gallery_links, function( image ) { #>
                          <a class="reactiveImagePopup" href={{postLink}}>
                          <# if(image) { #>
                            <img class="item" src={{ image }}>
                          <# } else {#>
                            <img class="item" src={{ data.gridPlaceHolder }} alt="Image">
                          <# } #>
                          </a>
                      <# }) #>
                  </div>
                    <# } else { #>

                  <div class="product-image-wrap">
                      <a class="reactiveImagePopup" href={{postLink}}>
                        <# if(post.thumb_url) { #>
                          <img class="item" src={{ post.thumb_url }}>
                        <# } else {#>
                          <img class="item" src={{ data.gridPlaceHolder }}>
                        <# } #>
                      </a>
                  </div>
                  <# } #>
                  <a href="#"
                     class="{{wishlist_class}}"
                     data-preview="icon"
                     data-text="Favorite"
                     data-icon="fa fa-heart" 
                     data-icon_alt="fa fa-heart-o" 
                     data-product_id="{{post.ID}}" 
                     already_added="{{wishlist_added}}" 
                     data-post_type="{{post.post_type}}"
                    >
                        <i class="{{icon_class}}"></i> 
                   </a> 
                 </div>

                 <div class="product-short-info">
                    <# if (post.meta.formattedAddress) { #>
                         <address>{{ post.meta.formattedAddress }}</address>
                    <# } #>

                    <h3 class="title">
                      <a href="{{postLink}}">{{post.post_title}}</a>
                    </h3>
                    <# if(post.meta._price) { #>
                      <p class="price">${{ post.meta._price }} USD</p>
                    <# } #>

                     <div class="listing-btn-area">
                       <a class="view-details-btn" href="{{post.post_link}}">View Details</a>
                     </div>
                 </div>
             </div>
          <# } #>
          <!-- Grid End -->
      <# }) #>
    </div>
</div>

Again go to your home page and refresh it. Then click on settings bar of Latest Premium Cars.

Now go to Layouts tab and choose Airbnb Grid as your Grid Layout. Then go to Appearance tab. Here Wrapper Class name should be turbo-airbnb__grid-template. Then you can find Number Point field. So you can increase or decrease the number according to your requirement. Select Component should be Grid. Then go to Gridcolumn tab and set your product column according to your need and click on save button.

Now you will get the final view of your home page similar to the below screenshot.

Ninth Step

Now the step is to create a Product Grid on home page. So go to Dashboard–>Reactive Templates–>All Grid Shortcodes–>Add New Shortcode.

Select Product as the post type. Copy the reactive key. Click on Update.

Now go home page and click on edit page. Add a fancy title block. Your fancy title layout should be listing fancy title. Then add a new row and paste Grid Shortcode key you just have created previously.Then click update. Below is the sample of a screenshot.

Now go to Reactive Templates–>All Grid Template–>Top rated product grid and Put the bellow code and click on Update.

<div class="reactive-container-fluid turbo-airbnb-grid">

    <# if(data.view == 'list') { #>
    <div class="reactive-row {{ data.listClass }}">
    <# } else { #>
    <div class="reactive-row">
    <# } #>

        <# _.each(data.posts, function( post ) { #>

        <#
          var isPreviewEnable = data.gridSettings.previewPopUp;
          var postLink = post.post_link;
          var wishlist_added = false; 
          var icon_class = "fa fa-heart-o";
          var user_id = '';
          var user_wished = '';
          var wishlist_class = "redq-wwc-add-wishlist reactiveWishlist";
          user_id = REACTIVE.current_user.ID;
          if(post.meta._user_wished) {
              user_wished = post.meta._user_wished;
            for (const key in user_wished) {
                if (user_wished.hasOwnProperty(key) && user_wished[key] == user_id) {
                    wishlist_added = true;
                    icon_class = "fa fa-heart";
                            wishlist_class = "redq-wwc-add-wishlist reactiveWishlist wished";
                }     
            }
          }
          if(isPreviewEnable == 'true')
            postLink = '#';
        #>

        <# if(post.meta._wc_average_rating >= 4 ) { #>

        <!-- Grid -->

        <# if(data.view == 'list') { #>
          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.listColumnClass}} reactive-product-listing-list-item fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >

        <# } else { #>


          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.columnClass}} reactive-product-listing-item fadeIn " data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
              <div class="reactive-image-wrapper">
                    <# if(post.meta._product_image_gallery_links && post.meta._product_image_gallery_links.length > 1) { #>
                  <div class="reactive-lightbox-gallery product-image-wrapper turbo-owl-carousel owl-carousel owl-theme">
                      <# _.each(post.meta._product_image_gallery_links, function( image ) { #>
                          <a class="reactiveImagePopup" href={{postLink}}>
                          <# if(image) { #>
                            <img class="item" src={{ image }}>
                          <# } else {#>
                            <img class="item" src={{ data.gridPlaceHolder }} alt="Image">
                          <# } #>
                          </a>
                      <# }) #>
                  </div>
                    <# } else { #>

                  <div class="product-image-wrap">
                      <a class="reactiveImagePopup" href={{postLink}}>
                        <# if(post.thumb_url) { #>
                          <img class="item" src={{ post.thumb_url }}>
                        <# } else {#>
                          <img class="item" src={{ data.gridPlaceHolder }}>
                        <# } #>
                      </a>
                  </div>
                  <# } #>
                  <a href="#"
                     class="{{wishlist_class}}"
                     data-preview="icon"
                     data-text="Favorite"
                     data-icon="fa fa-heart" 
                     data-icon_alt="fa fa-heart-o" 
                     data-product_id="{{post.ID}}" 
                     already_added="{{wishlist_added}}" 
                     data-post_type="{{post.post_type}}"
                    >
                        <i class="{{icon_class}}"></i> 
                   </a> 
                 </div>

                 <div class="product-short-info">
                    <# if (post.meta.formattedAddress) { #>
                         <address>{{ post.meta.formattedAddress }}</address>
                    <# } #>

                    <h3 class="title">
                      <a href="{{postLink}}">{{post.post_title}}</a>
                    </h3>
                    <# if(post.meta._price) { #>
                      <p class="price">${{ post.meta._price }} USD</p>
                    <# } #>

                     <div class="listing-btn-area">
                       <a class="view-details-btn" href="{{post.post_link}}">View Details</a>
                     </div>
                 </div>
             </div>
          <# } #>
          <!-- Grid End -->
        <# } #>
      <# }) #>
    </div>
</div>

Again go to your home page and refresh it. Then click on settings bar of Top Rated Premium Cars.

Now click on save and go to the home page for the output of Top Rated Premium Cars.

If you want to have another product grid like our demo’s home page follow this same procedure.

If you want to customize product grid template based on your data or want to have a custom design you can follow our Reactive Grid Documentation. Here is the documentation link: https://s3.amazonaws.com/redqteam.com/documentation/reactive-pro-advance-searching-filtering.pdf

After reading our documentation you can check our Reactive Pro’s FAQ section for further customization related to Grid Template. Here is the FAQ link: https://redq.io/blog/reactive-pro-faqs/

Working With WPML

Configure RnB for WPML

Please Follow the bellow link

https://s3.amazonaws.com/redqteam.com/documentation/woocommerce-rental-and-bookings-reloaded.pdf

Configure Reactive Pro for WPML

Please follow the below link

https://s3.amazonaws.com/redqteam.com/documentation/reactive-pro-advance-searching-filtering.pdf