OYE Woocommerce Theme Documentation

Thanks for using OYE theme, please contact us if you need more feature or your feedback. oye@najeebmedia.com
Thanks so much!

Installation

You'll want to install this theme just like any other WordPress theme, either by uploading the main theme folder via FTP (unzipped) or the zipped file via the Wordpress theme upload section. Make sure you located the main theme folder from the downloaded zip file and that you are not uploading the entire zip with all the documentation, sample data, etc. Watch the

1. Uploading The Theme

 

a. FTP Method

  • Log into your site via FTP
  • Browse to your folder located at wp-content/themes
  • Unzip the oye.zip folder and upload only the extracted oye folder to your server
  • Log Into Wordpress and go to Appearance → Themes
  • Find the theme and click to activate
ftp

b. WordPress Method

  • Log into ThemeForest and click on the "Downloads" tab
  • Locate the oye theme and click the download button next to it
  • Select the "Installable WordPress Theme" link from the dropdown.
  • You should now have a file called oye.zip
  • Log into WordPress
  • Browse to Appearance →Themes
  • Click to "add new" and then follow the instructions on the screen
  • When it asks to select a file find the zipped oye.zip file you downloaded previously

3. Recommended Plugins

OYE theme has 8 Premium plugin included. These all plugins will automatically installed and you can see these all plugin under Plugins Menu. But we recommend following three plugins which should be install after theme activation.

  • WooCommerce
  • Revolution Slider
  • Visual Composer
  • Wordpress OYE Theme Plugin

4. Activate & Save Permalinks - Important!

After installing and activating the recommended plugins go to your Settings → Permalink settings and hit the save button. To prevent any 404 errors on custom post type pages.

Demo Data

  • This theme has one click demo import option like Screenshot below. Just go to Oye -> Demo Importer menu. In future we will add more Demo Import Data for different purpose websites.

Visual Composer

This theme includes support for the Visual Composer plugin plus VC add-ons which are located inside VC Setting tab 'OYE'. The Visual Composer plugin and Add-ons has ton of drag and drop modules to your dashboard for quickly and easily building your site.

Make Sure Visual Composer Is Active

Make sure you have activated the Visual Composer plugin. This plugin is NOT built-into the theme (for good reasons) so it must be installed and activated. After installing the theme you should have been prompted to install the recommended plugins. If you chose not to install the Visual Composer then now is the time to do so.

Visual composer

Visual Composer Settings

Go to Visual Composer > General Settings to setup the plugin. The most important part is to enable the composer for the post types you want to use it on.

Using The Visual Composer

The Visual Composer is very easy and doesn’t really need much explanation, have a look at the screenshots below for a quick guide (you can also view this more comprehensive Visual Composer guide).

First, decide if you would like to use the Backend or Frontend editor and click the related button.

Visual Composer Backend Editor

The backend editor includes easy to use options to add page elements or select page templates.

If you click on the + symbol the Visual Composer will open a window to add elements. Here you will find all of the Visual Composer and oye page building modules. To add a page element simply click on it.

VC Add-ons

Following screenshot showing all VC Add-ons developed for OYE theme.

Use the page element options to customize your page. Each element has different options for customizations like colors, fonts, margin, images and more. Below is a map of the backend editor with helpful pointers for the editor options. After adding elements make sure to save your page.

Creating Full-Width Background Areas

The Visual Composer is very easy to use and pretty much the only thing that might confuse people is on how to create a full-background area. But don’t worry it’s simple!

Step 1: Set your page or post to have the full screen layout

Step 2: Edit the Row you want to give a background to.

Step 3: Go to the Background tab to choose a color with the built-in color picker, or upload an image to use as your background.

Step 4: Go to the General option tab. Select the row option to center inner content. Be sure to check this box to center your content if you want to add modules within your full-width background area.

Theme Options

The Oye WordPress theme includes tons of easy to use options to customize the design of your site. Most of your theme options can be found in the live WordPress theme customizer. Oye uses only native WordPress functions, as you should be familiar with the way the Customizer looks and works.

Simply navigate to Appearance > Customize to make changes to the design of your website.

There are more theme options under Dashboard > Oye options. This is where you will find Global settings control site Colors, Typography, Sidebar & WooCommmerce etc

General Options

Oye Theme has General panel that containing different General settings.

It includes:

  • Primary Color
  • Social Sharing
  • Page & Animations
  • Search Result
  • Scroll to top Button
  • Links
  • Layout
  • Visual Composer

General Settings








  • Primary Color

    It will be apply whole site.

  • Social Sharing

    In Social Sharing there are 3 settings:

    • Setting 1: Enable/disable the social networks on selected page and posts.
    • Setting 2: If you provide the Social icon Title it will be displayed with Social networks
    • Setting 3: Select pages for Social Sharing Networks
  • Page & Animation

    In Page & Animation there are 6 settings.

    • Setting 1: Set the Page layout of site.
    • Setting 2: Enable/disable page comments.
    • Setting 3: On/Off Page Animation when entering and leaving the page.
    • Setting 4: Page loading Animation type.
    • Setting 5: Page leaving Animation control
    • Setting 6: Pre-loader text (While loading a page)
  • Search Results Page

    It control Search page layout.

  • Scroll to Top Button

    In Scroll to top Button (STTB) there are 6 settings.

    • Setting 1: Set the Arrow Style for STTB.
    • Setting 2: Set the style for STTB.(Flat/Rounded)
    • Setting 3: Set the color for STTB
    • Setting 4: Set the hover color for STTB.
    • Setting 5: Set the background color for STTB.
    • Setting 6: Set the hover background color for STTB.
  • Links

    In Links there are two settings.

    • Setting 1: Set color for links
    • Setting 2: Set hover color for links
  • Layout

    If layout is set to "BOXED" then following 4 settings can be used and "FULL Width" does not require any settings.

    • Setting 1: Layout = Full Width or Boxed
    • Setting 2: Enable/disable layout drop shadow.
    • Setting 3: Set inner background.
    • Setting 4: Set outer background.
  • Visual Composer

    Set Visual Composer row margin.it will set all VC rows.

Top Header

Oye theme Top Header panel has following settings:


  • Top Header

    In Top Header there are 10 Settings if Top Header is Enable.

    • Setting 1: Enable/disable Top Header.
    • Setting 2: Either show Phone & Email or show Social Profiles
    • Setting 3: Set visibility of Top Header in different devices.
    • Setting 4: Enter Phone Number, if selected above.
    • Setting 5: Enter E-mail if selected above.
    • Setting 6: Set background color.
    • Setting 7: Set border color.
    • Setting 8: Set text color.
    • Setting 9: Set links color.
    • Setting 10: Set links hover color.
  • Social Profiles

    These Social Profiles will displayed on Top Header if Enabled. Non-empty profiles will be shown.

    • Setting 1: Enter Facebook Profile URL.
    • Setting 2: Enter Twitter Profile URL.
    • Setting 3: Enter Instagram Profile URL.
    • Setting 4: Enter GooglePlus Profile URL.
    • Setting 5: Enter Pinterest Profile URL.
    • Setting 6: Enter LinkedIn Profile URL.
    • Setting 7: Enter Rss Profile URL.
    • Setting 8: Enter Youtube Profile URL.
    • Setting 9: Enter Vimeo Profile URL.
    • Setting 10: Enter Xing Profile URL.
    • Setting 11: Enter Skype Profile URL.

Typography








  • General

    • Setting 1: Set Site Body Typography.
    • Setting 2: Set Heading 1(h1) Typography.
    • Setting 3: Set Heading 2(h2) Typography.
    • Setting 4: Set Heading 3(h3) Typography.
    • Setting 5: Set Heading 4(h4) Typography.
    • Setting 6: Set Heading 5(h5) Typography.
    • Setting 7: Set Heading 6(h6) Typography.
  • Logo

    Control Typography for Logo area.

  • Topbar (Top Header)

    Control Typography for Topbar.

  • Main Menu

    Control Typography for Main Menu.

  • Page title

    Control Typography for Page Title.

  • Blog Post Title

    Control Typography for Post Title.

  • Breadcrumbs

    Control Typography for Breadcrumbs.

  • WooCommerce Product Title

    Control Typography for WooCommerce Product Title.

  • Footer

    Setting 1 control Typography for Footer Text and Setting 2 about Footer Title.

Blog Option


  • Single (Post)

    • Setting 1: Enable/disable Next/Previous Link on single Post.
    • Setting 2: Set Post Meta.
    • Setting 3: Set related Posts title.
    • Setting 4: Set related Posts count.
    • Setting 5: Set related Posts Columns.
    • Setting 6: Enable/disable Excerpt for related Posts.
    • Setting 7: Set/Upload Placeholder Image.
  • Categories & Archives

    • Setting 1: Hide/show category description under title.
    • Setting 2: Set Layout.
    • Setting 3: Set different style for Archive/categories posts.
    • Setting 4: Set Number of columns for GRID style
    • Setting 5: Enable/disable Excerpt.
    • Setting 6: Set Read more text.
    • Setting 7: Set Posts Meta.

WooCommerce Options





  • General

    • Setting 1: Show a cart icon with product count badge, below settings will be ignored when its enabled.
    • Setting 2: Enable/disable the Cart Icon in Main Menu
    • Setting 3: Label for the cart count.
    • Setting 4: Label style for checkout button in main menu.
  • Archive

    • Setting 1: Enable/disable Title for the Archive/Shop page.
    • Setting 2: Enter shop page title.
    • Setting 3: Control number of products to be shown on shop page.
    • Setting 4: Shop/Category Page layout.
    • Setting 5: Select the Sidebar.
    • Setting 6: Control Number of Columns for Shop/Category Page.
    • Setting 7: Enable/disable Sorting on Shop Page
    • Setting 8: Shop Page Style(these are custom templates)
  • Product Page

    • Setting 1: Enable/disable Title Area on Product Page
    • Setting 2: Product Page Layout.
    • Setting 3: Select sidebar for product page.
    • Setting 4: Up sell Products title.It will be shown below the product page description.
    • Setting 5: Control Number of Up Sell Products to be shown on Single Page
    • Setting 6: Number of Columns for Up-Sells Products
    • Setting 7: Control Number of Related Products.
    • Setting 8: Number of Columns for the Related Products.
    • Setting 9: Product Page tab style.
  • Cart & Checkout

    • Setting 1: Allow User to Empty Cart for Cart Page
    • Setting 2: Allow User to enable or disable fancy checkout.
    • Setting 3: Enter number of cross-sell products to be shown on cart page.
    • Setting 4: Select the number of columns for cross-sells products.
  • Quick View

    • Setting 1: Quick View Button Position
    • Setting 2: Enable/disable Quick View Button Icon
    • Setting 3: Quick View button text
    • Setting 4: Control Quick View button text styles.
    • Setting 5: Control Quick View button background color
    • Setting 6: Control Quick View button border radius(edges roundness).
    • Setting 7: PopUp Transition Style.Transition when product popUp.
    • Setting 8: PopUp Transition Speed of in ms
    • Setting 9: Background Color of page when PopUp is Active
    • Setting 10: Enable/disable Tabs of Product in PopUp
    • Setting 11: Enable/disable Related Products in PopUp

WooCommerce Plus Options




  • Customize Labels

    • Setting 1: Customize label for "Add To Cart" button in shop.
    • Setting 2: Customize label for "View Products" buttons for Grouped Products on shop page..
    • Setting 3: Customize label for "Select Options" buttons for Variable Products on shop page.
    • Setting 4: Customize button label for external products in shop.
    • Setting 5: "Sale" text on shop.
    • Setting 6: Customize "Add to Cart" button label for single product page(For individual products it will be added in meta).
    • Setting 7: Customize "Out of Stock" text on single product page.
    • Setting 8: Customize "Place Order" button label on checkout page.
  • Customize Content

    • Product Page
    • Cart Page
    • CheckOut Page
    • My Account
    • Order Details
    • Email

    • Product Page

      • Setting 1: Text before add to cart button.
      • Setting 2: Text after add to cart button
      • Setting 3: Text before add to cart form.
      • Setting 4: Text before price on grouped product list.
      • Setting 5: Text after add to cart form.
      • Setting 6: Text on the start of product meta.
      • Setting 7: Text at the end of product meta.
      • Setting 8: Text under featured image.
    • Cart Page

      • Setting 1: Text before cart TABLE on cart page.
      • Setting 2: Text before cart CONTENTS on cart page.
      • Setting 3: Text after cart ITEMS on cart page.
      • Setting 4: Text below PROCEED TO CHECKOUT button on cart page.
      • Setting 5: Text after cart TABLE on cart page.
      • Setting 6: Text at the bottom on cart page.
      • Setting 7: Text after PROCEED TO CHECKOUT button on cart page.
      • Setting 8: Text after COUPON button on cart page.
      • Setting 9: Text before CART TOTALS on cart page.
      • Setting 10: Text after CART TOTALS on cart page
      • Setting 11: Text when cart is empty.
      • Setting 12: Text before MINI CART
      • Setting 13: Text before button of widget shopping cart.
      • Setting 14: Text after mini cart.
      • Setting 15: Text before shipping cart totals.
      • Setting 16: Text after shipping cart totals.
      • Setting 17: Text before order totals.
      • Setting 18: Text after order totals.
      • Setting 19: Text before shipping calculator.
      • Setting 20: Text after shipping calculator.
    • CheckOut Page

      In CheckOut Page sub-section there are settings.

      • Setting 1: Text before checkout billing form.
      • Setting 2: Text after checkout billing form.
      • Setting 3: Text before checkout registration form.
      • Setting 4: Text after checkout registration form.
      • Setting 5: Text before checkout form.
      • Setting 6: Text before customer details.
      • Setting 7: Text on the top of checkout billing.
      • Setting 8: Text on the top of checkout shipping.
      • Setting 9: Text after customer details.
      • Setting 10: Text after checkout form.
      • Setting 11: Text before shipping form.
      • Setting 12: Text after shipping form.
      • Setting 13: Text before order notes.
      • Setting 14: Text after order notes.
      • Setting 15: Text before shipping.
      • Setting 16: Text after shipping.
      • Setting 17: Text before order total.
      • Setting 18: Text after order total.
      • Setting 19: Text before order contents in review order.
      • Setting 20: Text after order contents in review order.
      • Setting 21: Text before payment.
      • Setting 22: Text before submit button.
      • Setting 23: Text after submit button.
      • Setting 24: Text after payment.
    • My Account

      In My Account sub-section there are settings.

      • Setting 1: Text before customer login form.
      • Setting 2: Text on the start of login form.
      • Setting 3: Text after password field of login form.
      • Setting 4: Text in the end of login form.
      • Setting 5: Text in the end of login form.
      • Setting 6: Text in the register form.
      • Setting 7: Text in the end of register form.
      • Setting 8: Text after customer login form.
      • Setting 9: Text before my account when logged in.
      • Setting 10: Text after my account when logged in.
      • Setting 11: change default recent orders text.
    • Order Details and Email

      In Order Details and Email sub-section there are settings.

      • Setting 1: Text in items table.
      • Setting 2: Text after orders table.
      • Setting 3: Text after customer details.
      • Setting 4: Text in the start of email in email template.
      • Setting 5: Text before order table in email template.
      • Setting 6: Text after order table in email template.
      • Setting 7: Text after order meta in email template.
      • Setting 8: Text in the end of email template.
  • Product Tabs

    • Setting 1: Insert Product Tab 1 Title and Description.
    • Setting 2: Insert Product Tab 2 Title and Description.
    • Setting 3: Insert Product Tab 3 Title and Description.
    • Setting 4: Insert Product Tab 4 Title and Description.
    • Setting 5: Insert Product Tab 5 Title and Description.
  • Product Enquiry Form

    • Setting 1: Enable/disable Product Inquiry.
    • Setting 2: Inquiry Tab Title.
    • Setting 3: Email Addresses for Receivers(separated by commas).
    • Setting 4: Success Message when enquiry form submitted.

BuddyPress

  • Groups

    • Header Section
    • Navbar Section
    • Sub Nav Section

    • Header Section

      Group header section settings

      • Setting 1: Background Color for header banner area.
      • Setting 2: Choose text Color for user Nice name.
      • Setting 2: Choose text Color for header buttons eg: Message.
      • Setting 2: Choose background color for header buttons eg: Message.
      • Setting 2: Choose text Color on hover for header buttons eg: Message.
      • Setting 2: Choose hover background color for header buttons eg: Message.
      • Setting 2: choose header button border color on hover.
     
    • Navbar Section

      BuddyPress Groups Navbar section settings.

      • Setting 1: Choose Navbar background color for header eg: Activity.
      • Setting 2: Choose link color for navigation.
      • Setting 2: Choose active link color for navigation bar eg: Activity.
      • Setting 2: Choose active link background color for navigation bar eg: Activity.
      • Setting 2: Choose color for counts.
      • Setting 2: Choose background color for counts.
     
    • Sub Nav Section

      BuddyPress Groups sub navigation section settings.

      • Setting 1: Choose active link background color for sub navigation eg: Rss.
      • Setting 2: Choose active link Color for sub navigation bar eg: Rss.
      • Setting 2: Choose active link background color for sub navigation bar eg: Activity.

    Activity

    • Activity

      BuddyPress Activity section settings.

      • Setting 1: .
      • Setting 2: .
      • Setting 2: .

Call-Out

Call-outs are a special area just above the Footer which can be set with following settings. And each Post/Pages can also have same settings in meta box.

  • Setting 1: Enable/disable Call-out.
  • Setting 2: Set Call-out text
  • Setting 3: Set Call-out button title
  • Setting 4: Set Call-out but URL
  • Setting 5: Button link target, (same window, new tab etc)
  • Setting 6: Button URL link relation (Follow, Nofollow)
  • Setting 7: Call-out background settings
  • Setting 8: Call-out text color
  • Setting 9: Call-out button title color
  • Setting 10: Call-out button color
  • Setting 11: Call-out button hover color

Custom CSS JS

  • Custom CSS

    You can use custom css for theme.

  • Custom JavaScript

    You can use custom JavaScript for theme.

Demo Importer

  • Demo Importer

    Works best to import on a new install of WordPress.

Manual Import

Sample Data


    • Importing A Total Theme Demo
    • Manual Method:

    Importing A Total Theme Demo

     

    Manual Method

    If you want to import the Sample Data manually step by step this is also possible. See the guide below:

    Step 1: Download Sample Data

    The first step is to download the sample data which we have hosted on Github not only for easy/quick access but also so if you want you can follow the repository and get notified when changes are made to the Sample Data. Click the link below to access the repository and then click on the “Download Zip” link to download the sample data.

    • For some people importing the sample data file can be helpful to see how the theme works as well as speed up the development of their own or their client’s website by simply replacing the content and images with their own.

      ALert

      No demos found errors:

      • If you are getting an error and you don’t see any demos please contact your webhost and make sure that curl is enabled on the server and your server allows outgoing connections.
    • Download Sample Data

      Step 2: Understanding The Sample Data Files

      When you extract the Sample Data you will find folders with every demo:

      1. Base: This folder contains the “Base demo” which is a large demo showing all the main functions of the theme with the default skin and settings. A lot of servers may not be able to handle this large sample data so please check out Base Lite.

      2. Base Lite: A slimmed down version of the “Base demo” with only the essential content to help get you started. Should import very quickly and is highly recommended over the Base demo.

      Step 3: Import Sample Data

      Once you have located the xml file you wish to import, log into your WordPress website and navigate to Tools > Import to begin the import process.

      Click on the WordPress option If you haven’t already, you will be prompted to install the WordPress Importer free WordPress plugin. Just install it like you would any other plugin, and after you activate it return to this screen.

      Then click the Browse button to select the xml sample data file you would like to upload, and click Upload file and import. Next Your should see the following
      Important: Some of the demos are very large, if your server can’t handle it or you don’t want to fill your server with a bunch of image files, do NOT check the box to download and import the file attachments. You’ll still get a good sense on how the demo works and you will be adding your own featured images so there really isn’t any point in downloading them.

      The importer will give you the option to either import our demo users, or to assign the posts to an existing user on your WordPress site. For each option we recommend that you assign the posts to an existing user(ideally your user account, since you are the one working on the website).

      You’ll also see an option to import file attachments. Check this box only if you want to import all of the image and media files included in our Total demo.
      If you see a 502 bad gateway error when importing the sample data please contact your hosting company since this is a server side error.
      Click submit to import the sample data. Once complete you should see a successful import message.

      If you are importing the full sample data from our main demo site and you did not activate all of the recommended plugins, you might see a failed import message. In the example below we did not have WooCommerce installed and active on our testing site, so all of the WooCommerce products that we attempted to import failed.

      This is completely fine, since you are not using the related plugin it makes perfect sense that the sample data related to that cannot be imported.

      Step 4: Import Theme Options

      Most of the demos have specific options defined for the demo. So be sure to import the theme options as well. These are of course located in the “Theme-Options” folder for the specified demo in the sample data files – example. If you aren’t sure how to import the theme options please have a look at the link below:

      Step 5: Import Sliders

      Sliders can’t be included with the default WordPress export because they are created using plugins. Check out the link below for the guide on importing the sliders:

      Step 6: Post-Import Steps

      There are certain things a WordPress import cannot do for you during an import, so after uploading sample data:

      • Go to Appearance >Menu to set your menu locations
      • Go to Appearance >Widgets to add your widgets (widgets aren’t included in a WordPress export)
      • Set your homepage at Settings > Reading using the “Home” page as a static pages
      • Go to the Customizer setup your main options

Widgets & Sidebars

This theme has 6 sidebars areas.

  • Woocommerce Side Bar -Used for Woocommerce Pages.
  • Main Side Bar -Used for Every page of Site.
  • Footer Area 1 - Used for the footer areas First 3 Columns.
  • Footer Area 2 - Used for the footer areas 2nd 3 Columns.
  • Footer Area 3 - Used for the footer areas 3rd 3 Columns.
  • Footer Area 4 - Used for the footer areas last 3 Columns.