Rozer Documentation

Rozer WooCommerce Responsive Theme Documentation

Rozer responsive theme documentation by RoadThemes

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Getting Started

WordPress Information

We would like to thank you for purchasing Rozer! We are very pleased that you have chosen Rozer for your website, you will not be disappointed!

To install this theme you must have a working version of WordPress already installed. You should ALWAYS be running the latest version of WordPress anyway; otherwise you put your whole site at risk for potential threats in case using an outdated version of WordPress.

If you need help installing WordPress, follow the instructions in WordPress Codex.

Below are all the useful links for WordPress information.

Recommended PHP Configuration Limits

Many issues that you may run into such as; white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

Theme Support

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Installation

How to install theme

Once you've downloaded the installation file on ThemeForest, extract it and locate a file called rozer.zip. You can install the theme by using one of two installation methods:

  1. WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
    1. Login to WordPress admin
    2. Go to Dashboard> Appearance > Themes > Add New > Upload Theme
    3. Click on "Choose File" and select rozer.zip
    4. Click on "Install Now"
  2. FTP upload - If you wish to install via FTP, here are the steps you need to take:
    1. Using FTP client, login to the server where your WordPress website is hosted
    2. Using FTP client, navigate to the /wp-content/themes/ directory under your WordPress website's root directory
    3. Using FTP client, upload the Theme directory to themes directory on remote server

Once installation is complete, your Theme theme will be ready to use. You should now see "rozer" appears in the WordPress themes manager panel.

Note: If you don't want to lose changes after a theme update, we recommend that you install and activate a child theme.

Demo Content

Import data demo

We can import content for pages, posts, menu, projects, contact form, testimonials... like our demo. To import our demo content follow the steps below:

  • Dashboard >> Rozer >> Import demo

  • Click Import to choose demo you want to import

  • Install child theme: We recommend you using child theme to edit theme.

  • Install plugins: Install neccessary plugins for theme

  • Import Data: Select content for importing >> click Start Import to import demo data.

  • Finish importing >> click View Website to view demo data.

Updates

1. How to update your theme

*** Manual Update via FTP

You can update your theme manually by performing the following steps:

  1. Before update, please backup your site
  2. Download the latest theme zip file from ThemeForest
  3. Extract rozer_updated.zip and open rozer folder
  4. Upload all files in rozer folder override to: wp-content\themes\your_theme

***Important note: Please note that all changes made directly within theme files (additional PHP coding and theme modifications) will be lost upon theme update. That is why we recommend using a child theme when making changes in theme files, in order to avoid losing these changes or having to re-do them each time you update your theme.


Theme General Settings

1. Wordpress General Settings

Go to Dashboard> Settings > General

If the url is not correct, Go to Dashboard > Settings > Permalink and Click Save

2. Change site title, tagline, site icon

To change site title, tagline, site icon, you need to do like steps below:

- Go to Dashboard - Appearance - Customize - Site Identity: Change title, tagline, icon of the site.

3. Set a page as home page and posts page (blogs)

To set a page as home page and posts page (blogs):

****Example: To set Home 01 to be your homepage:

Login Dashboard > Settings > Reading :

4. Setting Elementor after importing demo content

- After importing demo content, Default color and Font of Elementor will be enable. To disable them and make Elementor inherit the colors from your theme, please disable by steps below:

Login Dashboard > Elementor > Settings > General and check at Disable Default Colors and Disable Default Fonts :

Topbar

How to enable the top bar

Currently, the theme just includes top bar in case you choose Header 1, Header 2, Header 3

Go to Appearance > Customize > Header > Header Topbar > Enable Topbar to enable/disable your topbar.

Topbar position

Currently, the theme just includes top bar in case you choose Header 1, Header 2, Header 3

Go to Appearance > Customize > Header > Header Topbar > Layout > Left position/ Right position to drag and drop your blocks.

Edit topbar content

  1. Text

  2. Account

  3. Languages

  4. Currency

1. "Welcome you to Rozer Store!" text

Go to Appearance > Customize > Header > Element - HTML > HTML block 1 .

2. Account

Go to Appearance > Customize > Header > Element - Account .

3. Language

Go to Appearance > Customize > Header > Element - HTML > Language dropdown content .

4. Currency

Go to Appearance > Customize > Header > Element - HTML > Currency dropdown content .

Header

Header Layout

The theme includes 4 different Header layout and it is easy to switch your header layout.

- Go to Appearance > Customize > Header > Header Layout to select your header layout.

Header Elements

"Call Us: (+123) 888 9999" text

- Go to Appearance > Customize > Header > Element - Contact

Header Cart

- Go to Appearance > Customize > Header > Element - Cart

  • Select cart icon: Select icon for header cart.

  • Mini cart: Select type when show mini cart dropdown.

    - None : Don't show mini cart dropdown.

    - Dropdown :

    - Off-canvas sidebar :

Vertical Menu

How to create Vertical Menu:

1. Create a new menu

- Go to Dashboard > Appearance > Menus > click on create a new menu

2. Set up your menu

On the right, feel free to drag and drop menu items to organize them

Settings

- To change its setting, please go to Appearance > Customize > Header > Element - Menu > Vertical Menu

  • Active vertical menu: Enable/disable vertical menu.

  • Title: Title of vertical menu.

  • Title size: Font-size of vertical menu title .

  • Title width: The width of vertical menu title.

  • Title background: Background color of vertical menu title.

  • Title color: Background text of vertical menu title.

  • Show menu items by: Select type of menu items will be shown.

  • Items width: The width of menu items.

Horizontal Menu

How to create Horizontal Menu:

1. Create a new menu

- Go to Dashboard > Appearance > Menus > click on create a new menu

2. Set up your menu

On the right, feel free to drag and drop menu items to organize them

Settings

- To change its setting, please go to Appearance > Customize > Header > Element - Menu > Horizontal Menu

  • Menu Background : Background color of menu.

  • Item align: Choose alignment of menu item.

  • Color: Text color of menu item .

  • Active Color : Text color of menu items when active.

  • Background Color : Background color of menu items.

  • Active Background Color : Background color of menu item when active.

  • Font size: Font size of menu item.

  • Space between items

Header Styles

- Go to Appearance > Customize > Header > Header Styles to control this section.

  • Active header sticky : Show/don't show sticky header.

  • Background Color:Background color of header.

  • Background Image: Background image of header .

  • Text color : Text color of header.

  • Padding top & bottom (px)

WooCommerce

Theme comes with WooCommerce integration, which allows you to build an online shop. For more information on installing and configuring WooCommerce, please visit this page:

http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

In order to setup WooCommerce with our theme, please perform the following steps:

  1. Go to Plugins - Add New from the admin panel.
  2. Type WooCommerce in the search field.
  3. Locate WooCommerce - excelling eCommerce in the search results and click on Install Now
  4. Once installation is complete, click on Activate Plugin

 

Setting WooCommerce Pages

  • Login Dashboard > WooCommerce > Settings :

    • - Tab Products: setting Shop page.

    - Tab Advanced: setting other pages.

    - Setting Wishlist page: Go to Dashboard > YITH > Wishlist > WISHLIST PAGE OPTIONS :

Product Image Sizes

  • Go to Dashboard > Appearance > Customize > WooCommerce > Product Images.

    Main image width: Single product width (unit: px)

    Thumbnail width: The largest width of products (in shop and homepage layouts, not the thumbnail) (unit: px)

  • YITH Compare product sizes: Go to Dashboard - YITH - Compare

Important Note: After changing product sizes, you need to regenerate thumbnails. Read more: http://wordpress.org/plugins/regenerate-thumbnails/

Product Catalog

Go to Appearance > Customize > Product Catalog to set catalog layout, Category description & thumbnail, Subcategories, Product style :

Catalog layout :

  • Catalog layout: Choose layout for catalog page

  • Sidebar width (%): Width of sidebar (percent)

  • Shop page display: Choose what to display on the main shop page.

  • Default product sorting: How should products be sorted in the catalog by default?

  • Products per page: Set number of products will be shown in each category page.

  • Items per row - Tablet: Set number of products will be shown per row on tablet.

  • Items per row - Phone: Set number of products will be shown per row on Phone.

  • Pagination type: Select type of pagination.

Category description & thumbnail :

  • Category description: Select show description or not, show full, show apart.

  • Category thumbnail: Hide/show category thumbnail

Subcategories:

  • Show subcategories: Select if you want to show subcategories in shop/category page.

  • Number subcategories on screen: Set number sub will be shown on screen.

  • Subcategories design

Product style:

  • Product grid style: Select style for products at grid type. Choose show hover image, quickview, category, rating, countdown according to you.

  • Sale label: Select sale label : text or percent discount.

  • Sale label design: Choose label design for product.

  • Sale label background

Product page

- Go to Appearance > Customize > WooCommerce > Product page to set product page layout, Image block width, additional tab content, show upsell products, related products in product page .

Select product page layout :

  • Select product page layout: Choose layout for product page

  • Image block width: Width of image block.

  • Active zoom: Enable/disable zoom.

  • Tab design: Choose design of additional tab.

  • Additional tab title: Set title of additional tab.

  • Additional tab content: Set content of additional tab.

Upsell Products Block :

  • Status: Enable/disable upsell products block.

  • Title: Title of upsell products block.

  • Product on screen: Number of products will be shown on screen.

Related Products Block:

  • Status: Enable/disable related products block.

  • Title: Title of related products block.

  • Product on screen: Number of products will be shown on screen.

Variant swatches

- Go to Appearance > Customize > WooCommerce > Variant swatches to customize .

Menus

1. Create new menu

Following these steps to create a menu.

  1. Go to Dashboard > Appearance > Menus

  2. Click on Create a new menu -> Enter a name for your menu, and then click on Create Menu

  3. Select items from the left meta boxes and click Add to Menu

  4. On the right, feel free to drag and drop menu items to organize them

  5. When you’re done moving menu items, check a menu location at the bottom of the page

  6. Click Save Menu

2. Config locations of menus

- To config locations of menus like demo, please follow these steps:

Go to Appearance > Menus > Manage Locations and choose location for each menu:

3. Config Horizontal Menu and Vertical Menu

  1. Go to Dashboard > Appearance > Menus

  2. Select Edit Menus : At Select a menu to edit : Select horiontal menu/vertical menu to edit

  3. At menu item : Select Settings to config this menu item.

    • Item Config :

      • Use icon: Choose it to set icon which display above menu item.

      • Custom Class: Add a specific class for custom CSS.

      • Subtitle: Set subtitle for the item.

      • Subtitle background: Set background color for subtitle.

    • Submenu config :

      • Submenu Type: Support 2 type of submenu: Mega menu & Flyout menu .

        • Mega menu :

        • Flyout menu :

      • SubMenu Width Type: Select Full Width / Fixed .

        • Full Width :

        • Fixed : Set width of submenu.

    • Responsive :

      • Hide item on desktop: Hide menu item and children item of it on desktop

      • Hide item on mobile: Hide menu item and children item of it on mobile

  4. Click Done when finish configuration.

  5. Click Save Menu to save changes.


4. Types of menu support on Horizontal Menu and Vertical Menu and configuration

4.1. Mega Menu

***Example :

***Configuration:

4.2. Flyout Menu

***Example :

***Configuration:

4.3. Full Width

***Example :

***Configuration:

4.4. Basic

***Example :

***Configuration:

4.4. Item has label

***Example :

***Configuration:

Blog

Blog Page Setup

The theme includes support for a blog which displays your latest posts. You need to create your blog page using the default template and set your blog page under Settings > Reading.

Blog Customize

Archive page

Go to Appearance > Customize > Blog > Archive page to choose layout, design, blog items columns, navigation type for blog page. And set posts excerpt, excerpt length,.. for each post in blog page.

Single page

Go to Appearance > Customize > Blog > Single page to choose layout, design, show featured page or not, title align, show related posts or not, set max number of related posts will be shown.

Elementor Elements

- To edit content of pages:

- Go to Pages > All Pages

- Choose page you want to edit:

- Choose Edit with Elementor to edit page with Elementor WordPress Builder plugin

- Hover mouse to content you want to customize, you will see elementor element like this and you can start edit.

Site Settings

- If you are at each element, please click to back elementor

- If you are at elementor , please click Site Settings to set up site:

Design System:

  • Global Colors : Set predefined global colors (Primary, Secondary, Text, and Accent colors), inline custom colors, or create new global colors from Elementor’s Global Settings.

  • Global Fonts : Set and edit 4 predefined global typography styles (Primary, Secondary, Text, and Accent) or add new global text styles from Elementor’s Site Settings.

Theme Style:

- Theme Style settings are global settings that allow you to set default styling options for various elements, such as Backgrounds, Headings, Buttons, Images, and Form Fields.

- You can view at Theme Style – Global Settings to understand more.

Settings:

- Site Identity : Control your site’s identity, including its Site Name, Site Description, Site Logo, and Favicon right from Elementor’s Site Settings.

- Background : Control the site’s background, including its mobile background.

- Layout : Control global layout settings from Elementor’s Global Settings.

- Lightbox : The Elementor Lightbox opens images, galleries, carousels, and videos in a 100% mobile responsive lightbox popup window. You can also turn the lightbox on or off globally and customize the lightbox design.

- Custom CSS : With Elementor Pro, you can set custom CSS globally. This allows you to add custom CSS rules which will apply to your entire site.

RT Slideshow

- Alls you to add banner slideshow on your homepage.

Settings:

RT Banner

- Alls you to add banner on your homepage.

Settings:

RT Title

- Alls you to add title on your homepage.

Settings:

RT Categories

- Alls you to show categories on your homepage.

Settings:

RT Products

- Alls you to show product types on your homepage.

Settings:

RT Sale Products

- Alls you to show sale products on your homepage.

Settings:

RT Tab Products

- Alls you to show type of product in each tab on your homepage.

Settings:

Icon Box

Allows you to add Icon Box block on your page.

Settings:

Elementor Website Builder

- Understand more at : https://elementor.com/help/

Translation

Translate theme

We will guide 2 ways to translate theme: Using Loco translate and PoEdit. We only guide translate text strings of our theme.

Important: Before, you need check you can switch language

  • Dashboard -> Settings -> General. Changing this will set a new default language for all site visitors. Example, we're going to set the language to French at Available : Choose Français

    If you don't see your language in the dropdown list you may have to install the core language packs manually.

    You can set your site back to English now if you like. We'll be switching to French later on to check our custom translations are working, but the language setting isn't required while we add them.

1. Translate theme with Loco translate:

* Install Loco Translate plugin

  • Go to Dashboard > Plugins > Add New

  • Enter Loco Translate at search field

  • Locate Loco Translate in the search results and click on Install Now

  • Once installation is complete, click on Activate

=> You can read this guide to translate theme with Loco translate : https://localise.biz/wordpress/plugin/beginners


2. Translate theme with Poedit:

You need install Poedit software on your computer. Poedit is available on OS X and Windows and can be downloaded from here.

Before using Poedit to translate,

  • Open Poedit and select Create new translation

  • A new window will pop up, select WordPress theme you want to translate. A Theme’s default translation template is located in wp-content\themes\your_theme\languages\rozer.pot

  • Next, from a dropdown menu select a language you want to translate your theme to:

  • Highlight any string you want to translate. Or you can press Ctrl+F to find string you want to translate.

  • In the Translation section enter a desired translation of the source string

  • Once you have translated your theme, save the file with format : language-code_country-code.po("fr_FR.po" in this example) in wp-content\themes\your_theme\languages

    - Explanation: fr_FR - with "fr": language-code and "FR": country-code

    - You can find language code and country code at Get language codes , Get country codes

Translate plugins

The easiest way to translate the plugin is by using the Loco Translate WordPress plugin. To use loco translate plugin, please see the steps below.

1. Install Loco Translate plugin

  • Go to Dashboard > Plugins > Add New

  • Enter Loco Translate at search field

  • Locate Loco Translate in the search results and click on Install Now

  • Once installation is complete, click on Activate

2. Translate plugin with Loco translate

  • Go to Loco Translate > Plugins and click a plugin theme. Example: Slider Revolution

  • Click New Language

    - If after you click New Language, you see Template missing the warning. You only click Skip template

  • Choose your language and choose a location is in languages/plugins/, then click Start Translating

  • Click Source Text and enter the text you want to translate in French translation

  • Click Save button

  • Note: To update your language file when you updated the theme, you only click Sync button.

Additional Notes

Regenerate Thumbnails

If you change the image size settings, you must resize all images that you have uploaded. You can use plugin Regenerate Thumbnails, read more: https://wordpress.org/plugins/regenerate-thumbnails/.

We use bootstrap in our Theme .

Read more: https://getbootstrap.com/docs/4.2/getting-started/introduction/

Child theme

If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.

Read more: https://codex.wordpress.org/Child_Themes.

FAQ where to get help, support and additional information

We hope this manual was useful for you and helped you to install, to edit the template and to resolve your issues.

1. Why can't I save my menu?

Cause of this problem is small value of the "max_input_vars" option in the configuration of your server (host). You must increase value of the "max_input_vars". You must to set a value that is twice as large of the current value.

  • Most hosts have the opportunity to change this value in the "Host Admin Area".
    Example:
    If currently you have max_input_vars = 1000
    You need to set max_input_vars = 2000 (or more)

  • You can try to change this value using ".htaccess" file in root directory of the your site, adding this lines in ".htaccess". 
    php_value max_input_vars 3000  
    php_value suhosin.post.max_vars 3000  
    php_value suhosin.request.max_vars 3000

  • You can try to change this value using "php.ini". Add this line if you don't find max_input_vars 
    max_input_vars = 3000

  • If that does not help you, ask your host support "How can I increase the value of the max_input_vars for my site?".

2. Why website loads slowly?

In some cases, you uses large images on your page, server run slowly because it's a VPS. Try these methods:

- Reduce images size

- Install cache plugin like W3 Total Cache

- Turn off less compiler in Theme Options=>Less compiler after finished changing colors & fonts.

- Test website with GTMetrix and see its suggestions https://gtmetrix.com/

Credits & sources

I have included these sources with this theme:

jQuery: http://jquery.com/

FlexSlider: http://flexslider.woothemes.com/

Slick: http://plugins.jquery.com/slick/

jQuery Gmap: http://labs.mario.ec/jquery-gmap/

FancyBox: http://fancyapps.com/fancybox/

jQuery Parallax:http://www.ianlunn.co.uk/plugins/jquery-parallax/

jQuery Shuffle: http://vestride.github.io/Shuffle/

Font Awesome: http://fortawesome.github.io/Font-Awesome/

lessphp: http://leafo.net/lessphp

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.