Welcome To Rango
Elegant Fashion WooCommerce WordPress Theme

Introduction

Thank you for purchasing Rango theme.

In this document, we provide all kinds of good information with all the details you need to use our theme. We hope you have fun and enjoy working with our theme. If you need more help, please feel free to open a ticket on our channel support https://themeftc.ticksy.com/ and follow it. Our technical support experts will help you asap.

Before Getting Started

If you are not familiar with WordPress, please get accustomed with it before proceeding to using our theme. Here are some links that will help you to become more confident with WordPress:

Theme Requirements

First of all, you need to make certain that your server and WordPress meet the theme’s requirements.

Most of the issues users may experience, such as demo content importing fails, menu partially not saving, page not rendered correctly and other oddity are related to server settings and excessively low PHP configuration limits.

You can contact your hosting provider and ask them to increase below values:

Theme Installation

Theme Package

To download, you need to log into your ThemeForest account and go to your http://themeforest.net/downloads page. Locate the theme that you purchased in your Downloads list and click on the Download button

If you download All files & documentation, you will unzip it. Then, you find the installable file inside.

You can also download only the Installable WordPress file.

WordPress Dashboard

  1. Navigate to Appearance > Themes > Add new
  2. Choose rango-theme.x.x.zip file. Click on Install Now button to upload and install the theme
  3. Once you activate Rango. Then you will get a notification about installing the required plugins
  4. You must install all the required plugins if you want to import the demo content
Please note that some hostings have a restriction on a size of a file that you are uploading. If you have any warning, you will contact your hosting provider. They should increase your maximum upload size.

FTP

  1. Log into your hosting space via an FTP software
  2. Unzip the rango-theme.x.x.zip file and ONLY use the extracted "rango" folder
  3. Upload the extracted "rango" folder into wp-content/themes folder
  4. Go to Appearance > Themes and activate Rango theme
  5. Then you will get a notification about installing the required plugins

Demo Content

One-Click Import

Importing the demo content through the 'One-Click Import' is the easiest and fatest way to setup your theme. It allows you to import data such as Content, Widgets, Revolution slider, Menu, Customize.

You will also need to import basic demo content before proceeding to the specific homepage import. In order to import demo content, following below steps:

  1. Login to your WordPress Dashboard.
  2. Navigate to FTC Importer
One Click Demo

In this area, there are few options:

  • Full Import: Import all section to make your site like our demo site.
  • Theme Options: Import theme options.
  • Mega Main Menu: Import setting file for mega main menu.
  • Widgets: Import all widgets of demo site.
  • Revolution Slider: Import back up file slider of demo site.
  • Demo Content: Import all pages, sample data of demo site.

Errors or Problems

1. Server Error 500

If you see 500 error while importing demo, this usually indicates a poor server configuration, usually on a cheap shared hosting (low values for PHP settings, missing PHP modules, and so on). You should contact your web host and ask them to increase those limits to fulfill theme requirements.

Then, you can reset your database using the WordPress Database Reset plugin. This plugin can be used to remove all existing content and install a new version from scratch.

2. Products or Categories are not showing on front-end

In order to fix errors not showing Categories, products after import demo content, you can go to edit page and select categories / products for each elements.

Select category to show

3. Mega Menu doesn't showing correctly

Go to Mega Main Menu > Resave Settings

Setting for mega main menu

If the problem still occurs, please submit ticket at https://themeftc.ticksy.com/ and we will help you.

Updating The Theme

Manual Update

  1. First, you download the new theme package from themeforest. You have to log into your themeforest account and navigate to Downloads tab. You find the Rango theme in your purchased themes list.
  2. You can delete the current theme. Don't worry about this. Your data won't be lost.
  3. You upload the new theme package via Wordpress or FTP software.
Please ensure that you only upload the installable wordpress file. If not, you may get an error message: The package could not be installed. The theme is missing the style.css stylesheet.

Automatic Update

You update the theme through the Envato Toolkit plugin. Follow the steps below to set up this plugin:

  1. Download and install the Envato Toolkit plugin
  2. You log into your Themeforest account. Under Settings > API Keys, you generate an API key. Get it.
  3. In WordPress admin panel, you find the section called Envato Toolkit. You input your envato username and API key.

Please read this tutorial http://www.wpexplorer.com/envato-wordpress-toolkit-guide/ to get more information.

Please note that:
  • If you translated the theme to another language, you should backup your translation files in the themes > Rango > languages folder before updating. You should also backup the translation files in the plugin folder.
  • After updating the theme, you should update the recommended plugins if there is a notification message about updating plugins. You go to Appearance > Install Plugins to update plugins. If you can not update the recommended plugins in wp admin, you should manually update them, you can delete plugins and re-install.
  • You can not update the WPBakery Page Builder (former Visual Composer) and Revolution Slider plugins in Appearance > Install Plugins. To update 2 these plugins, you need to delete them first. Then, you go to Appearance > Install Plugins and install them again.

Included Plugins

Here below are the plugins that included in theme:

Required plugins

Recommended plugins

In order to import demo content properly, we recommend you install the following plugins. After that, you can deactivate plugins that do not want to use.

Rango theme is compatible with included plugins. But, we cannot give a guarantee for full compatibility with all existing third-party plugins and customization is outside the scope of our basic support.

Elements and Widgets

Karo works with either WP Bakery builder or Elementor builder. ThemeFTC has developed an integrated set of elements and widgets expanding and improving WP Bakery builder or Elementor builder default chart to provide comprehensive tools to present WooCommerce products and functionality. Karo elements integrated into the WP bakery builder are presented in the ThemeFTC tab of the chart.

WPBakery Elements
  • FTC Feature: display your feature with icon
  • FTC Blogs: display your blogs in a grid layout, slider or masonry layout
  • FTC Button: display a button
  • FTC Single Image: display a single image
  • FTC Heading: display a heading
  • FTC Banner: display your banner. Allow you add content on your banner
  • FTC Testimonial: display testimonials in a slider. Go to Testimonials to add new testimonial
  • FTC Brands Slider: display your partner logos in a slider. Go to Logos to add new logo
  • FTC Google Map: just input your address to show your map. Please note that you have to input your API key in Appearance > Theme Options > General tab. Get the API key here
  • FTC Milestone: display your achievements
  • FTC Countdown: display a countdown timer
  • FTC Feedburner Subscription: display a Feedburner Subscription form. Go to the Feedburner page to create your Feedburner ID. This tutorial will help you setup Feedburner.
  • FTC Products: display your products in a grid layout
  • FTC Products Slider: display your products in a slider
  • FTC Products Widget: display your products as a product widget
  • FTC Product Deals Slider: display products on sale with a countdown timer
  • FTC Product Categories Slider: display product categories in a slider
  • FTC Products In Category Tabs: display products in tabs. Each tab is a category

Karo built-in widgets are provided in the Elementor. ThemeFTC Elements follow in the beginning of the widgets chart.

Elementor Widgets 1
Elementor Widgets 2
  • FTC Blogs: display your blogs in a grid layout
  • FTC Blogs Slider: display your blogs in a slider layout
  • FTC Blogs Timeline: display your blogs in a timeline layout
  • FTC Button: display a button
  • FTC Single Image: display a single image
  • FTC Product Deals Slider: display products on sale with a countdown timer
  • FTC Circle Countdown: display a countdown timer type circle
  • FTC Countdown Timer: display a countdown timer
  • FTC Products Tabs Grid: display products in tabs (grid layout)
  • FTC Portfolios: display portfolio in a masonry layout. Go to Portfolios to add new portfolio
  • FTC Testimonial: display testimonials in a slider. Go to Testimonials to add new testimonial
  • FTC Team Member: display members of team
  • FTC Brand: display brand in a slider. Go to Brands to add new brand
  • FTC Revolution Slider: display slider creat by Revolution
  • FTC Product Categories Slider: display product categories in a slider
  • FTC Products: display your products in a grid layout
  • FTC Products Widget: display your products as a product widget
  • FTC Products Slider: display your products in a slider
  • FTC Single Product: display a product
  • FTC Products Tabs Slider: display products in tabs (slider layout)
  • FTC List Product by Categories: display product categories in a slider
  • FTC Contact Forms 7: display contact form creat by contact form 7
  • FTC Mailchimp 4 WP Forms: display forms subscribe
  • FTC Instagram Feed: display image from Instagram Account
  • FTC Gallery Instagram: display image from user
  • FTC All Slider: display everything in a slider layout
  • FTC Nav Menu: display menu

Theme Options

Rango provides an ultra-effective and intuitive way to customize theme layout & settings. Here is a list of our main settings sections.

Theme Options
  • General: Contains all the general settings related to your website and some of its elements.
  • Cookie Notice: Help you comply with local privacy laws like GDPR.
  • Styling: You can set main website fonts settings and colors.
  • Ecommerce: Manage global setting for WooCommerce with extra options.
  • Blog: Manage your blog posts settings.
  • Import / Export: Here you can export theme options, download backup for import in future or on another website.

Widgets & Sidebars

Rango comes with widget areas you can activate to add your own content and functionality. You can also easily add a new sidebar.

You can enable Classic Widgets under Theme Options > General > Widget Classic Editor.

  1. Navigate to Appearance > Widgets. You will see a form at the bottom, put sidebar name and click on the Add Sidebar button
  2. Adding New Sidebar
  3. Drag and drop widgets into your new sidebar

Page Options

In the page editor, you will see the Page Options section at the bottom of editor. It will help you create many kinds of pages.

Page Options

Some options will override the options in Theme Options. Select Default if you want to use your global settings.

  • Layout Style: select Boxed or Wide layout
  • Page Layout: select Fullwidth, Left Sidebar, Right Sidebar or Left & Right Sidebar
  • Left Sidebar: select the sidebar to display on the left sidebar
  • Right Sidebar: select the sidebar to display on the right sidebar
  • Full Page: enable this option if you want to display each row in a page
  • Header Layout: select one of Header Layouts
  • Transparent Header: set the background of header to transparent
  • Header Text Color: allow you to change the color of text on the header
  • Primary Menu: select a different menu for this page
  • Show Page Title: show or hide the page title. The page title is hidden on the home page
  • Show Breadcrumb: show or hide the breadcrumb. It is also hidden on the home page
  • Breadcrumb Layout: set the layout for your breadcrumb
  • Breadcrumb Background Parallax: allow you to apply parallax in the breadcrumb background
  • Breadcrumb Background Image: change the breadcrumb background image for this page
  • Logo: allow you to display a different logo on this page
  • Sticky Logo: as the Logo, you can display a different sticky logo on this page
  • Page Slider: allow you to add a slider on your page
  • Page Slider Position: set Position for your slider (Before Header or Before Main Content)
  • Select Revolution Slider: if you set Page Slider to Revolution Slider, you will select a slider to display

Post Options

In the post editor, you will see the Post Options section at the bottom of editor. It will help you create different layouts for different posts. Also, if you set the post format to Video or Audio, you will input your Video or Audio URL here.

Post Options

Adding The Logo & Favicon

  1. Navigate to Appearance > Theme Options > General > Logo - Favicon
  2. Here you can upload Logo, Mobile Logo
Logo & Favicon

Sometimes you can't see the your logo, you can edit page and scroll down to Page Options. Here you can remove or update Logos.

Page Options

Setting Up Header

To set up your header, you go to Appearance > Theme Options > General > Header tab. In there, you can choose the Header Layout, configure your breadcrumb and other options.

Header Layout

Here you can select default header layout for your site.

Header Layout

Breadcrumb

Just choose one of our breadcrumb layouts for your site.

Header Breadcrumb

You can also choose the breadcrumb layout for individual pages via Page Options.

Page Options

Header Customization

If you want to customize the theme, you should create the child theme before making any changes.

Please note that you have to install the required plugins before activating the child theme. Otherwise, you will get an error if you install the plugins in Appearance > Install Plugins page.

You can find the sample child theme package (rango-child.zip file) in your downloaded file (you have to download All files & documentation).

Follow the steps below to override header template:

  1. Copy the template file from the parent theme folder to the child theme folder
  2. Edit the template file in the child theme folder

Blog Page

  1. Navigate to Pages > Add New. You can title this page as Blog
  2. You don't need to input the content
  3. Then go to Settings > Reading, choose A static page option. Below that, choose the page to be used as the front page, and the page for your blog posts
  4. Save your changes
Blog Template
  • If your Front page displays the latest posts (setup in Settings > Reading), you will configure your blog layout in Theme Options > Blog tab.
  • You use FTC Blogs widget to display your blogs in masonry layout.

WooCommerce

Rango theme is fully compatible with the latest version of WooCommerce plugin. We customized and added many features, shortcodes and widgets for this plugin. In the following sections, you will know how to install and set up WooCommerce plugin. You can also refer WooCommerce Documentation to get more information.

Adding WooCommerce Pages

There are 2 ways to add WooCommerce pages

  1. After activating WooCommerce plugin, you will get a notification as the screenshot below. Simply click the Install WooCommerce Pages button to create all WooCommerce pages
  2. Use the WooCommerce shortcodes. You can get them here
Adding WooCommerce Pages

Setting Up WooCommerce

To set up WooCommerce, navigate WooCommerce > Settings in admin panel.

Currency Options

  1. In WooCommerce Settings page, select the General tab
  2. You find Currency Options section and configure your currency
Currency Options
You can also add a custom currency symbol. Please refer this document

Product Image Sizes

In order to change the catalog and single product Image settings, go to Appearance > Customize > WooCommerce > Product Images.

To change product widget image size go to Settings > Media > Thumbnails Size. You can refer to WooCommerce Documentation. for more information.

Product Image Sizes

After these changes, you need to Regenerate Thumbnails to apply them! You can use Regenerate thumbnails plugin to do this.

Page Settings

In the WooCommerce settings menu, click on "Advanced".

Setting Pages

Enabling User Registration

In the WooCommerce settings menu, click on "Accounts & Privacy." Here you can control account creation and privacy settings.

Registration Options

Product Options

This section allows you to override some options in Theme Options. You can set layout for individual products. You can also override custom tab content

Product Options

Product Data

You should also read WooCommerce Documentation to get more details. We only have some notes that we think you need to know.

Product Data
  1. Adding a product on sale and a deal:
    • With the Simple Product, you select General tab. You add a Sale Price and click the Schedule button to set up date.
    • With the Variable Product, after setting up Product Attributes in the Attributes tab, you can go to the Variations tab and add New Variation. With each Variation Product, you also click the Schedule button next to the Sale Price field. Please note that product only displays the time of first Variation Product.
  2. Adding Additional Information: You go to the Shipping tab. You set value of Weight and Dimensions options. You can change the unit by going to WooCommerce > Settings > Products tab
  3. Enable/Disable Product Review: You go to the Advanced tab. You will see Enable reviews option. Just check/uncheck it.

Translations

Rango is ready to translate by using the po file. If you want to build a multilingual site, you need to use WPML plugin. Our theme does not include the WPML plugin. It only is compatible with the WPML plugin. You have to buy a license for this plugin.

Using Po File

There are 2 ways to create and edit the po file

  1. Use the Poedit software and refer this document
  2. Use the translation plugins, such as Loco Translate or Codestyling Localization plugins
  • You have to generate the mo file after translating
  • Please refer to our detailed article on using LocoTranslate plugin
  • You already set your language. Go to Settings > General and check Site Language option

Using WPML

In this section, you will know how to build a multilingual website by using the WPML plugin. All the information needs to get started and use it is on the WPML.org page.

Below are some reference links:

Installing and Setting Up the WPML plugin

You need to install a recent version of WPML, including the String Translation, Translation Management and CMS Navigation modules. After installing these plugins, you set up Languages from WPML > Languages and translate your content.

Translating Pages and Posts

Go to All Pages and pick a page for translation. Click on the plus icon. If the page is already translated, the plus icon will be replaced with a pen icon.

Translating pages

WPML actually creates a new WordPress page, linked to the original one. In this new page, you can add new content as you normally do. You can also keep the original content, just translate into the new language.

Translating Categories

To translate a category, click on the language which you want to translate it and then add a new category. Make sure the new category is linked to an original category.

Translating categories

Translating Menus

You go to Appearance > Menus. Just add a new menu. You select the language and the original menu which links to the new menu.

Translating menus

WPML can synchronize menus for you. This means that WPML can generate and keep in sync menus for other languages pointing to the translated versions of the pages, posts or categories.

Translating the theme and other texts

You go to WPML > String Translation. Find the text in the list and translate it. Please make sure you check the Translation is complete checkbox after translating.

Sometimes, some texts are not translated. First, you need to go to WPML > Theme and Plugins localization. You click on the Scan the theme for strings button. Then, you go back to the String Translation page and find those texts.