Buy Now

Styler - Modern WooCommerce WordPress Theme

For a faster solution, open a ticket here.

Documentation Menu

First Steps

Server ConfigurationTheme InstallationDemo ImportUpdating The Theme

Logo Options Menu Options Main OptionsSite Identity OptionsBlog Page Options Single Page OptionsArchive Page Options404 Page OptionsSearch Page OptionsFooter Options
Header General Options Header Layout Manager Header Buttons Manager Header Bottom Manager Header Template Options Mobile Header Layouts Manager Sidebar Menu Layouts Manager Header Video Tutorial – All Features
Layouts Options Hero Options Content Options Elementor Template Options Post Style Options Account-Checkout Page Options
Layout Options Summary Options Single Hero Options Upsells Posts Options Share Buttons Options
Adding Video to Products
Very soon
Editing Homepage with Elementor Mega Menu Builder with Elementor Build Custom Footer with Elementor
Infinite Scrolling Load More Button Wishlist Feature Compare Feature Quick View Feature Discount Feature on Single Page and Products Label Percentage Discount Feature Composite Products Feature Frequently Bought Together Feature Single Product Video SupportSingle Product Extra Tabs Variation Swatches
Page Setup Account & PrivacyCart – Checkout and My Account Page Setup Adding a Variable Product Change Currency Symbol Registration Form Setup
How to Add Attributes for Product Items? How to Edit Shop Page Content Padding and Product Image Size? How To Translate Styler WordPress Theme Using Loco Translate? How to add a favicon to my website? How do I change my frontpage? Why Demo Data not installed properly? How to update the paid plugins ? Why the WPML plugin doesn’t come with your theme? You said you have a WPML-support ? How to Fix “the theme is missing the style.css stylesheet” issue in WordPress? Why a WordPress theme is slow and how to speed up? Why is Security important in WordPress themes?

Visit Our Support Desk

See The Changelog

First of all, thank you for choosing our theme. This documentation is meant to created to help you get started creating your site with our theme. In case you run into any kind of issue that you could find on the documentation, please feel free to get in touch with our dedicated support team on our support desk.

First Steps

To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex. Below are some useful links for WordPress information.

Choosing a hosting provider is a matter of choice based on their location, pricing and services. This is an important decision at the start and we strongly suggest you choose a WordPress friendly hosting provider for using our themes.

Latest technologies are always the best so stick to hosting companies that provide flexibility in your online presence.Often asked by our clients, we try to determine most appropriate hosting providers for them but it is always your choice based on your goals, so here is the list of hosting companies we recommend (referral link):

Get Hosting

For Beginners - WordPress installation Steps - Video Courses

If you don’t have enough experience to install WordPress on a server, we have compiled some videos for you. However, if your server and WordPress installation are already installed and ready to be used, then you can skip those videos.

Watch Videos

Download Theme files from ThemeForest by going to the Downloads tab and finding the Purchased Theme. Click on the Download button. The “All files & Documentation” archive contains everything and the Installable WordPress file only is just the installable WordPress theme file

The contents of the theme package downloaded from ThemeForest:
  • Licensing –  this folder contains the terms and conditions of the license under which Ohio is distributed and some information on licensing of various parts of the theme in a separate file
  • Plugins – this folder contains plugins required to work with our theme in case you cannot install them with the prompt or just need a local copy of
  • Theme.zip – this is the archive you need to upload to WordPress.
  • Demodata – this folder contains the xml file of the demo data of this theme

Requirements and Compatibility

You need to make sure that your web host has the minimum WordPress requirements to run our themes-based sites:

  • PHP version 7.2 and above
  • MySQL version 5.6 and above
  • The mod_rewrite Apache module
  • The iconv extension with UTF-8 encoding
  • HTTPS support
  • PHP time limit should be set to 300
  • Upload max filesize should be set to 512M to run all plugins without issues.
  • PHP post max size should be set to 521M
  • Max input time should be set to -1

Plugins Compatibility

The plugins listed below are tested and officially compatible with our themes
  • Elementor Page Builder
  • Slider Revolution
  • WooCommerce
  • WPML
  • Gravity Forms
  • Contact Form 7
  • ACF Advanced Custom Fields
  • Custom Post Type UI
  • The Events Calendar
  • All-in-One WP Migration
  • Autoptimize
  • Yoast SEO
  • WP Super Cache
  • Metabox

Browsers Compatibility

  • Chrome
  • Safari 
  • Firefox
  • Internet Explorer 11
  • Edge
  • UC Browser
  • Opera Mini

Theme Installation

After you purchase the elementor theme on ThemeForest, you can download the theme. : You should keep in mind that can download 2 archives from ThemeForest:

  • First is a product archive with documentation links and some additional files like changelog, lisense etc.
  • Second is the archive theme-name.zip with the theme itself — this file you need to install

Installation via WordPress

  • Step 1: Navigate to Appearance > Themes.
  • Step 2: Click Add New and then press the Upload Theme button.
  • Step 3: Find the archive theme.zip on your computer and click Install Now button.
  • Step 4: After the installation, the theme must appear at Appearance > Themes page, where you can activate it

Installation via FTP

  • Step 1: Connect to your hosting via FTP software
  • Step 2: Unzip the archive theme.zip on your computer
  • Step 3: Upload the extracted theme folder into wp-content/themes in your WordPress installation

Import Demo Content

Updating the Theme

There are two methods to update your elementor theme: the easiest way is the  Envato Market Plugin which requires you to register your purchase and the second way is to update / install the theme through your server, where the theme files are being stored.

Watch the following video for Envato Market Plugin method.

Play Video

Watch the following video for Manual Update method. ( FTP )

Play Video

Main Settings Tab

  • Typography and Color: You can control the general color of your website. Also this option makes you able to controll all of your titles ( h1,h2..h6 ) and paragraphes ( p ) in your websites.
  • Breadcrumb: You can enable / disable the breadcrumb of your single pages, such as single blog pages, single product page, single portfolio pages etc.
  • Preloader: There are 12 types and a custom gif preloader options and you can use any of them depending on your website design.
  • Back To Top: It gives you some options such as on /off, background color and the offset to control it.
  • Pagination: Pagination allows your user to page back and forth through multiple pages of content.
  • Popup Newsletter: You can use Popup to show something to users every time your site opens.

Pagination and Back to Top Button Settings

Add a Newsletter Popup

Site Identity

  • Site Identity Settings: Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps

Blog Page Tab

  • Blog Hero: On this tab, you can have the control over your blog page hero area. You can select blog page hero text alignment, changing the blog page title, subtitle and description and also can add a background image for the blog page hero area. You can also use a background color instead of adding a background image as you wish.
  • Blog Layout: Choose the blog index page layout. You can use elementor templates instead of default sidebar if you want.Select a template from elementor templates.
  • Elementor Templates: You can select a template from elementor templates instead of default template.

Single Blog Page Tab

  • Single Hero: On this tab, you can have the control over your single blog page hero area. You can select single blog page’s hero text alignment, changing the single page’s hero title, subtitle and description and also can add a background image for the single blog page hero area. You can also use a background color instead of adding a background image as you wish.
  • Single Content: Here, you can also hide the Single Post Authorbox, Single Post Pagination Display, Single Post Tags Display etc on your post items.
  • Single Related Posts: You can enable or disable the site single page related post with switch option. You can select a template from elementor templates instead of default related post template.
  • Elementor Templates: You can select a template from elementor templates instead of default template.

Archive Tab

  • Archive Hero: On this tab, you can have the control over your archive page hero area. You can select  archive page’s hero text alignment, changing the archive page’s hero Slogan and description and also can add a background image for the archive page hero area. You can also use a background color instead of adding a background image as you wish.

404 Page Tab

  • 404 Hero:  There are six different 404 page types in this theme. These are Default, Cover 1, Cover 2, Split, Video BG and Custom type from page. You can select any of them as you wish.
  • Default 404 Hero: On this tab, you can have the control over your default 404 page hero area. You can select  adefault 404 page s hero content alignment, changing the default 404 page’s hero Title, Slogan and description and also can add a background image for the default 404 page  hero area. You can also use a background color instead of adding a background image as you wish.
  • 404 Content: Here, you can add your own contents in the 404 hero area. Lets say, you can easly change the tite, add a slogan or a description.

Header Tab

  • From the dashboard go to Dashboard → NineTheme → Theme Options → Header
  • Header General Options : With Header Layout Manager and Header Button Manager, which is one of the important features in this theme, you can position the entire header as you wish. Also you can enable / disable the sticky menu, enable / disable the sticky menu transition. You can set the typography for your menu items.
  • Header Layout Manager: Organize how you want the layout to appear on the theme header. You can hide any widget you want by dropping it into ” hide.”
  • Header Buttons Manager: Organize how you want the layout to appear on the theme header for buttons. You can hide any widget you want by dropping it into ” hide.”
  • Header Bottom: If you want the shop filter to appear in the menu or in the sticky menu, you must activate this feature. This way you have the option to filter all over the page.
  • Header Template:  There are two types of header in this template, which are Default Site Header and  Elementor Templates. If you select the Default Site Header, you’ll get the default header that you see on the live demo. However, if you select the Elementor Templates type, you can create your own header and then display instead of the default site header.
  • Sidebar Menu: All the changes you will make for the sidebar menu in this section will be applied for both desktop and mobile versions. Here too, you can easily drag and drop the header widgets to edit the header as you wish.
  • Mobile Top Header Options: With Mobile Header Layout Manager and Mobile Header Button Manager, which is one of the important features in this theme, you can position the entire header as you wish. Also you can enable / disable the sticky menu, enable / disable the sticky menu transition. You can set the typography for your menu items.

Header Video Tutorials

Header Layout Manager

Mobile Top Header Manager

Sidebar Menu Layout Manager

Sidebar Icons, Copyright, Language Button

Shop Page Manager (Layout)

  • Ajax Shop Options: You can enable or disable the site shop page hero section with switch option.
  • Shop Layouts Options: Organize how you want the layout to appear on the theme shop page sidebar area.
  • Shop Filter Area Layouts Manager: Organize how you want the layout to appear on the theme shop page filter area.
  • Perpage Select Options: Separate each number with a comma.For example: 12,24,36
  • Pagination Type Option: You can use one of the Default Pagination, Ajax Pagination, Ajax Load More, Ajax Infinite Scroll options.

Shop Page Layout Video Tutorials

Shop Filter Area Layouts Manager

Ajax Filter Positioning

Ajax on Shop Page Feature

Pagination Type Settings

Per-Page Select Options

Shop Page Manager ( Hero )

  • Default – Shop Hero Type Options: If you want it to remain as default, the current settings will be working.
  • Elementor – Shop Hero Type optinos: You can select template from elementor templates.If you want to show the theme default hero template you can leave a blank.

Shop Page Hero Video Tutorial

Shop Page Manager (Content )

  • Product Box Pre – Layouts: With this feature, we offer you 7 different product box types. You can easily select and save what you want.
  • Add To Cart Type Options: You can choose either just add to cart or add to cart + quantity type.
  • Post Column Options: You can set the responsive properties of the post. You can set how many columns should be in tablet, phone, desktop versions as you want.

Shop Page Content Video Tutorial

Product Box Type and Custom Type Settings

Product Box Custom Type Button Settings

Shop Page Elementor Template Options

  • Before Shop Content Elementor Templates:Select a template from elementor templates, If you want to show any content after hero section.
  • Before Loop Elementor Templates: Select a template from elementor templates, If you want to show any content before products loop.
  • After Loop Elementor Templates:Select a template from elementor templates, If you want to show any content after products loop.
  • After Shop Content Elementor Templates: Select a template from elementor templates, If you want to show any content after products.

Before & After Loop Elementor Templates Video Tutorial

Shop Page Post Style Options

You can change the color of many parts of the products here. You can also make padding, border settings.

Shop Account - Checkout Page Options

  • My Account Page Type: Organize how you want the layout to appear on the theme shop account page. (Default or Multi Steps)
  • Checkout Page Type: Organize how you want the layout to appear on the theme shop checkout page. (Default or Multi Steps)

Shop Single Page Manager (Layout)

  • Layout Options: Here you can choose the general layout of your page.

Shop Single Page Layout Video Tutorials

Sidebar Layout, Thumbs and Other Settings

Product Detail Background Settings

Review Section and Bottom Popup

Showcase Style Coverflow Features - Usage

Shop Single Page Manager (Summary)

  • Summary Options: You can find many important settings here. For example, you can set the Size Guide, Delivery Return templates here.

Shop Single Page Summary Video Tutorials

Delivery Return and Size Guide Adding

Sticky Summary Feature

Adding Stock Progress Bar, Countdown, Estimated Delivery, Fake Visitor Count Features

Shop Single Page Manager (Hero)

  • Shop Single Hero: You can enable or disable the site single product page hero section with switch option.

Shop Single Hero Video Tutorial (Products Navigaiton)

Shop Single Page Manager (Upsells Posts)

  • Upsells Posts: Organize how you want the layout to appear on the theme shop product page upsells.

Upsells Posts Video Tutorial

Shop Single Page Manager (Share Buttons)

  • Share Buttons: You can set this button to follow or share.

Share Buttons Video Tutorial

Editing a WordPress Theme with Elementor Page Builder

You can easily edit all your pages with elementor. We edited the slider with elementor to be an example video for you. Watch our video to learn how to edit a WordPress theme with elementor.

Mega Menu Builder with Elementor

How to create mega menu? How to create mega menu with Elementor? The answers to these questions and more are in our video. You can easily learn how to create a mega menu by watching our video.

Build Custom Footer With Elementor

You can easily create a footer with elementor by watching this video

Shop Page Features

  • Infinite Scroll Feature: Infinite scroll, meaning ‘infinite scroll’, is a popular design pattern. Thanks to this technique, which is frequently used in corporate web pages and blogs, when internet users scroll down a page, the next content or page is automatically shown to the user.
  • Load More Button Feature: Load more buttons offer a middle ground between infinite scrolling and classic pagination. It consists of a button at the bottom of the page that will feed more content when clicked, giving the user the simple decision to see more results or to reach the page end.
  • Wishlist Feature: It’s a feature that saves your favorite products so you can quickly and easily find and buy them later.
  • Compare Feature: WooCommerce Products Compare allows customers to compare products within your store. With this tool, your customers can make better buying decisions on products they want and need.
  • Quick View Feature: The quick view feature makes it easier for your customers to view the key product information such as features, images, and variants by displaying a brief overview without heading to the product details page.
  • Discount Feature on Single Page and Products: Thanks to this feature, you can apply a discount to the product and page you want with a timer.
  • Label Percentage Discount Feature: Calculate percentage and discount. label percentage discount visible on the category page and on the product page. Example : Slae 38% The plug in subtracts the regular price with the discounted price. Dividing it by the regular price and multiplying the result by 100, providing the discount percentage,
  • Composite Products Feature: WooCommerce Composite Products lets you create complex, configurable product kits and allows your customers to build their own, personalized versions.
  • Frequently Bought Together Feature: Your customers usually don’t need a single product, they need inspiration that other products can match with the product they buy/purchase. For example: When he buys a smartphone, he can buy a charger or a case with it. This feature offers this option with the product it bought.
  • Single Product Video Support Feature: With this feature, you can add the promotional video of the product to the product in the single shop section.
  • Variation Swatches: If you are selling your products in different sizes or colors, you can easily do this with this plugin. You can sell your products at different prices by defining both color and size.

How to Create a Shop Page

Once you activate WooCommerce plugin for the first time, you are invited to set up your shop using the WooCommerce setup wizard. It is pretty intuitive and allows you to get your shop running in no time. Nothing can describe getting started with WooCommerce better than its original documentation. Here are links to help you get started:

wordrpess-elementor

However, if you want to get started manually, or skipped the setup wizard, then you need to get a set of shop pages, here is what you need to do:

  • From the dashboard go to WooCommerce → Status → Tools;
  • Find the Create default WooCommerce pages option;
  • Hint the Create pages button on the right.

Account & Privacy

You can find checkout, account creation and privacy policy options;

  • From the dashboard go to WooCommerce → Settings → Account & Privacy;
  • Check out the image below.

How to set Cart - Checkout and My Account Page?

Setting up shop pages is very easy. You can easily set up your store pages by watching our video.

  • From the dashboard go to WooCommerce → Settings → Advanced → Select Pages
  • Check out the image below.

How to adding a variable product?

Variable products are a product type in WooCommerce that lets you offer a set of variations on a product, with control over prices, stock, image and more for each variation. They can be used for a product like a shirt, where you can offer a large, medium and small and in different colors. Please click for detailed information.

How to change the currency symbol?

  • From the dashboard go to WooCommerce → Settings → General
  • Check out the image below.

How to enable registration form?

Follow the steps below to activate the registration form.

  • From the dashboard go to WooCommerce → Settings → Account & Privacy
  • Check out the image below.

How to Add Attributes for Product Items?

How to Edit Shop Page Content Padding and Product Image Size?

How To Translate Styler WordPress Theme Using Loco Translate?

How to Add a Favicon ?

You can add a favicon through your WordPress panel here: Appearance > Customize > Site Identity ( Select site icon )

How to change my website frontpage ?

Incase you have more than demo pages, you can easly select any of the demo pages as your frontpage through your WordPress panel. You can see the steps below:

  • From The dashboard, go to Settings > Reading ;
  • Choose a Static page in the Front Page Display sections to set the front page to display a static page ;
  • Use the Front Page drop-menu to choose from existing pages;
  • Use the Post Page drop menu to choose the blog page for your website;
  • Hint the ” Save Changes ” button to save and publish your changes.

Why demo data not imported properly ?

Before importing the demo data, you have to make sure that your server configuration is set to as we described here

Why the WPML plugin doesn't come with your theme? You said you have a WPML-support.

WPML–support means that this theme is fully compatible with the plugin, but you need to buy the plugin license separatly to be able to use it.

How to Fix ” The theme is missing the style.css stylesheet” issue in WordPress ?

A common issue that can occur when installing a WordPress themes is “The package could not be installed. The theme is missing the style. css stylesheet.” error message being displayed when uploading or activating the theme. One of the reasons you may receive this error is if you have uploaded the incorrect file. Please read this article, in which we’ve covered this issue in details.

Why a WordPress theme is slow and how to speed up ?

If you are not happy with your website speed,  there might be many reasons behind it.  We’ve covered this topic in this detailed article. We hope hese tips might be helpful in making your website faster.

Why is Security important in WordPress themes ?

No matter you’re using a WordPess based theme or another, everly website is potentially vulnerable to attacks. So, in this article, We’ve explained this issue in details. you may want to check it if you like to be knowledgeable about this topic.

2012-2023 Ninetheme. All Rights Reserved. Theme is Cursornt