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

Few common issues when installing the theme

a. The “Broken theme and/or stylesheets missing” error is most common when you install or activate a new theme.

Solution: If you get an error saying that the stylesheet is missing, then you have uploaded the wrong zip folder. Please check that you are uploading the turbo.zip. You have to unzip the package file that you download from Themeforest to find this.

b. Problems with uploading via WP admin panel due Upload limit.

**Solution: **You may check your file upload limit on Your Media Uploader page in WordPress. Depending upon the web hosting company and the conditions of the service they provide it may vary. The most common is about 8 MB which is more or less enough. But uploading some media files like audio and video may become a problem with for example 2 MB upload limit.

We decided to share some tips about how to extend your maximum file upload size in WordPress

  • Through functions.php file:

You may add the below mentioned code in the functions.php file of your theme
@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'max_execution_time', '300' );

  • Through PHP.INI file:

If you cannot see the php.ini file in your directory create the new one with below mentioned code and upload it to your root folder on your web server.

If you can see the php.ini file then change parameters or add :
upload_max_filesize = 64M
post_max_size = 64M
max_execution_time = 300
In case that tip does not work with 64MB, try it with 10MB.

  • Through .htaccess method

You may try modifying the existing .htaccess file in the root directory or creating a new one.

Add the following code in the existing or new .htacess file:
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300
If you still face any issues please don’t forget to open a ticket in our ticket forum

https://redqsupport.ticksy.com/

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.

Helper PluginsBegin installing the plugin and activate them.

 

Install Required Plugin

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.

Importing Demo

Demo Imported Successfully

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.

Adding Inventory to a Product 1

Adding Inventory to a Product 2

Adding Inventory to a Product 3

Shortcodes

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

Use Classic Mode

Intro

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

TURBO Shortcode

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:

Top Rated Products Backend

Frontend:

Top Rated Products Frontend

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

Isotope Car Grid

Backend:

Isotope Car Grid Backend

Frontend:

Isotope Car Grid Frontend

Content Blocks

Backend:

Content Blocks Backend

Content Blocks Backend Settings

Content Blocks Backend Settings 2

Frontend:

Content Blocks Frontend

Backend:

Featured Blocks Backend

Layout 3

Featured Blocks Backend Settings Layout 3

Layout 4

Featured Blocks Backend Settings Layout 4

Featured Blocks Backend Settings Layout 4 snap 2

Frontend:

Featured Blocks Frontend Layout 3

Layout 4

Featured Blocks Frontend Layout 4

Recent Products

Backend:

Recent Products Backend

Frontend:

Recent Products Frontend

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

Car Tabs

For Layout Two

Backend:

Car Tabs Layout Two Backend

Frontend:

Car Tabs Layout Two Frontend

Testimonial

Backend:

Testimonial Backend Snap 1

Testimonial Backend Snap 2

Testimonial Backend Snap 3

Testimonial Backend Snap 5

Frontend:

Testimonial Frontend

Tips & Tricks

Backend:

Tips & Tricks Backend Snap 1

Tips & Tricks Backend Snap 2

Frontend:

Tips & Tricks Frontend

Help Line

Backend:

Help Line Backend

Frontend:

Help Line Frontend

Our Mission

Backend:

Our Mission Backend

Frontend:

Our Mission Frontend

Our Partner

Backend:

Our Partner Backend

Frontend:

Our Partner Frontend

Horizontal Search Form

Backend:

Horizontal Search Form Backend

Layout 3

Horizontal Search Form Backend Layout 3 Snap 1

Horizontal Search Form Backend Layout 3 Snap 2

Layout 4

Horizontal Search Form Backend Layout 4 Snap 1

Horizontal Search Form Backend Layout 4 Snap 2

Frontend:

Layout 3

Horizontal Search Form Frontend Layout 3

Layout 4

Horizontal Search Form Frontend Layout 4

Vertical Search Form

Backend:

Vertical Search Form Backend

Frontend:

Vertical Search Form Frontend

About Contact Info

Backend:

About Contact Info Backend

Frontend:

About Contact Info Frontend

Our Team

Backend:

Our Team Backend

Frontend:

Our Team Frontend

The Brand

Backend:

The Brand Backend

Frontend:

About Contact Info Frontend

Contact Us Page Address Bar

Contact details will look like this:

Contact details Snap 1

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

Contact details Snap 2

Backend:

Popular Cars Backend

Frontend:

Popular Cars Frontend

Feature Block Holder

Backend:

Feature Block Holder Backend

Frontend:

Feature Block Holder Frontend

Download App

Backend:

Download App Backend

Frontend:

Download App Frontend

Single Content Block

Backend:

Single Content Block Backend Snap 1

Single Content Block Backend Snap 2

Frontend:

Single Content Block Frontend

News Letter

Backend:

News Letter Backend

Frontend:

News Letter Frontend

Buttons

Backend:

Buttons Backend

Frontend:

Buttons Frontend

Fact Boxes

Backend:

Fact Boxes Backend

Frontend:

Fact Boxes Frontend

Countdown

Backend:

Countdown Backend

Frontend:

Countdown Frontend

Progress Bar

Backend:

Progress Bar Backend

Frontend:

Progress Bar Frontend

Circular Progress Bar

Backend:

Circular Progress Bar Backend

Frontend:

Circular Progress Bar Frontend

Accordions

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:

Accordions Backend

Google Map

Backend:

Google Map Backend

Frontend:

Google Map Frontend

Fancy Title

Backend:

Fancy Title Backend

Frontend:

Fancy Title Frontend

Backend:

Featured Product Backend Snap 1

Featured Product Backend Snap 2

Frontend:

Featured Product 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_categoriesresourcepersonpickup_locationdropoff_locationattributesfeaturesdepositeWhen 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:

Configure Reactive Pro with RnB (Edit Reactive Builder)

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

Configure Reactive Pro with RnB (Shortcode)

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.

Turbowp Option General Settings

Custom CSS/Scripts

Turbowp Option General Settings Custom CSS or Scripts

Header Options

  • Transparent Header

Header Options - Transparent Header

  • Listing Header

Header Options - Listing Header Snap 1

Header Options - Listing Header Snap 2

Car Settings

Car Settings

Blog Settings

Blog Settings

Banner Options

WooCommerce

  • Product Settings

WooCommerce Product Settings

  • Product Banner

WooCommerce Product Banner

  • Social Share Settings

WooCommerce Social Share Settings

Login/Registration

Login or Registration

Google Map

Google Map

Social Profile

Social Profile

Footer Options

Copyright Options

Background Options

Background Options

Typography Options

Typography Options

Import/Export

Import and 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.

Turbo Listing First Step

Then click on Save Changes.

Second Step

Go to home page settings via edit page.

1.Layout Options:

Turbo Listing Second Step Layout Options

2.Header Options:

Turbo Listing Second Step Header Options

3.Banner Options:

Turbo Listing Second Step Banner Options

4.Footer Options:

Turbo Listing Second Step Footer Options

Finally click on Update.

5.Final output of home page:

Turbo Listing Second Step Final output of home page

Third Step

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

Turbo Listing Third Step Edit Reactive Builder

Copy the reactive key.

Turbo Listing Third Step Copy Reactive Key

Let’s see the home page again.

Turbo Listing Third Step View Home Page

Click on Add Block.

Turbo Listing Third Step Click on Add Block

Select Map and Search Block

Turbo Listing Third Step Select Map and Search Block

Let’s see the home page again.

Turbo Listing Third Step see the home page again

Fourth Step

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

Turbo Listing Fourth Step Map API key

Click on settings icon of Map

Turbo Listing Fourth Step Click on settings icon of Map

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

Turbo Listing Fourth Step Adding MAP Class

Fifth Step

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

Turbo Listing Fifth Step Add Search Fields

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.

Turbo Listing Fifth Step Edit Search Block

Now you will have this output on your home page.

Turbo Listing Fifth Step View Output of home page

Sixth Step

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

Turbo Listing Sixth Step Geobox

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

Turbo Listing Sixth Step 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.

Turbo Listing Sixth Step Add Location Data

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

Turbo Listing Sixth Step View product location on home page in map

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.

Turbo Listing Sixth Step Map Marker Template 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.

Turbo Listing Sixth Step Choose Map Marker Template

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

Turbo Listing Sixth Step 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.

Turbo Listing Sixth Step Map Info Template Code

<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.

Turbo Listing Sixth Step Choose Turbo Info Window Template

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

Turbo Listing Sixth Step Map Info Window in home page

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.

Turbo Listing Seventh Step Edit Turbo Category Menu 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.

Turbo Listing Seventh Step Copy Paste Turbo Category Menu Shortcode key

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

Turbo Listing Seventh Step View home page

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.

Turbo Listing Seventh Step Category Template Code

<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.

Turbo Listing Seventh Step click on settings bar

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

Turbo Listing Seventh Step 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.

Turbo Listing Seventh Step choose Category Layout

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

Turbo Listing Seventh Step View Final Output

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.

Turbo Listing Eighth Step Turbo Grid Product 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.

Turbo Listing Eighth Step Copy paste Turbo Grid Product Shortcode key

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.

Turbo Listing Eighth Step View home page

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

Turbo Listing Eighth Step External Grid Settings

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.

Turbo Listing Eighth Step Airbnb Grid Template Code

<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.

Turbo Listing Eighth Step click on settings bar

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.

Turbo Listing Eighth Step External Grid Settings

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

Turbo Listing Eighth Step Final Home page View

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.

Turbo Listing Ninth Step Top Rated Product Grid 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.

Turbo Listing Ninth Step Top Rated Product Grid Shortcode

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

Turbo Listing Ninth Step Top Rated Product Grid Shortcode Template code

<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.

Turbo Listing Ninth Step click on settings bar

Turbo Listing Ninth Step External Grid Settings 1

Turbo Listing Ninth Step External Grid Settings 2

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

Turbo Listing Ninth Step View Final Output

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.