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.
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
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 ourRnB
plugin 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
- Select
product
andinventory
post types fromSelect post types
select box - 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
,deposite
When you build your search page in front-end then you’ll only these taxonomies available here. - 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->page
directory, 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.
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