VG Genius - Multipurpose WooCommerce WordPress Theme

VG Genius is a modern, clean and professional multi-purpose WooCommerce WordPress theme. Moreover, responsive feature makes it work perfect on all kind of resolutions as well for mobile, tablet, desktop having medium and large screen. This theme is crafted for online fashion shop, digital shop, games shop, food shop, devices shop, household appliances shop or any online store.

Packed with every premium WordPress plugin you will ever need: Visual Composer, Revolution Slider, Product Carousel, Post Carousel ..., you will have your eCommerce website up and running within days.

Fully supported with detailed documentation, email, ticket and premium forum support you will never be left wondering how to create your perfect eCommerce WordPress theme.

• Fully Responsive: This theme is responsive to give a perfect user experience on all devices.
• 4+ Pre-make layouts with 3 preset color for each layout. It's powerful design tool!
• Boxed or Fullwidth layout: This can be set globally or even per page!
• Built on Twitter Bootstrap: VG iFoody uses Twitter Bootstrap. This means that a range of shortcodes are automatically supported. For ease of use you can use the Visual Composer, Easy Bootstrap Shortcode or any other plugin to easily add visuals to your website.
• Slider Revolution plugin included: This theme includes the Slider Revolution plugin, saving you $19
• Visual Composer plugin included: This theme includes the Visual Composer plugin, saving you $30
• Contact Form 7 plugin support: This theme includes styling for the Contact Form 7 plugin!
• Translation Ready: With added support for the WPML plugin
• WooCommerce 2.6+ Ready: Start selling online
• Demo content included! (quickstart package)
• Unlimited Color Options
• Moveable & Unlimited Sidebars: Move the sidebar to the left, the right, or hide it entirely for a fullwidth page or post!
• Designed with HTML5 and CSS3
• Customizable Design & Code
• Product Quick View, Product Compare and Ajax Wishlist ready!
• Online Documentation – http://wordpress.vinagecko.com/docs/?theme=genius
• Supports Chrome, Safari, Firefox, IE
• Child Theme included

We include additional plugins from other developers to our theme.

IMPORTANT NOTE:

These plugins will be updated only when our theme will be updated. To get plugin updates earlier than our theme update will be released, go to Download plugins page to find the latest versions or buy plugin from developer. Also we don't provide support for these third-party plugins if problem is not related with compatibility of our theme. If you need help, you may contact with plugin authors, but should purchase license before.

To install this theme you must have a working version of WordPress. Please refer to WordPress documentation for further instructions. You can download the latest version of WordPress here https://wordpress.org/download/

Compatible Browsers: IE9+, Firefox, Safari, Chrome, Opera

All of our items come with free support, and we have an advanced ticket system to handle your requests. Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme, we suggest enlisting the help of a developer.

How To Receive Free Support

• Step 1 – Go to Ticket System (http://tickets.vinagecko.com/) and Click Submit a ticket.
• Step 2 – Provide all requires information: Product Name, Purchase Code, your username on Themeforest.net and URL to your page to verify your license.
• Step 3 – Provide more details about the problem, descibe, screenshot ...
• Step 4 – Submit ticket and wait our response (within 14-24 hours)

How to find your ThemeForest Item Purchase Code

To find your licence key/purchase code you need to log into your ThemeForest account and go to your Downloads page.
Locate some of the Themes Kingdom themes you purchased in your Downloads list and click on the Download and next on the License Certificate & purchase code link in drop-down menu.
After you have downloaded the certificate you can open it in a text editor such as Notepad and copy the Item Purchase Code.

After purchased our theme, you need to go your download area, click on button Download and select download All files & documentation.

After download completed, you need to unzip the package and select the way you want to install the theme.

[VG Theme] VG Genius installation guidance: Full Video

Please, follow the steps below to install Genius Theme (Make sure you had extract files).

• Step 1 – Login to your WordPress Dasrdoard.
• Step 2 – Navigate to Appearance ► Themes.

• Step 3 – Click Add New button on top of the page.

  

• Step 4 – Then click Upload Theme.
• Step 5 – Next, Browse to the zip file and click Install now for the theme to be uploaded and installed.
• Step 6 – After done installing, click Activate the theme

IMPORTANT NOTE

You need install all required plugins after install parent theme. You should only install Child theme after complete install all required plugin. Click here to see how to install child theme

You can follow this video:

Using an FTP software like File Zilla or CuteFTP to upload the theme files to your WordPress site.

The first, extract the theme file "vg-genius.zip", you will have a folder "vg-genius" include all theme files and folders (css, images, fonts...).

Please, follow the steps below to install the theme via FTP:

• Step 1 – Log into your hosting space (server) via FTP client.
• Step 2 – In extracted archive folder, find vg-genius.
• Step 3 – Upload the vg-genius folder to your server in path ROOT/wp-content/themes/.
• Step 4 – The uploaded path should be like this: ROOT/wp-content/themes/vg-genius/.
• Step 5 – Login to your WordPress Dasrdoard and go to Appearance ► Themes and activate the VG Genius theme.

Please, follow the steps below to install required plugins:

• Step 1 - After activating the theme, you will be asked to installed the required and recommended plugins, you can proceed by clicking on Begin installing plugins

  

• Step 2 – In the next page, check all the plugins that you want to install then on the drop down Bulk Actions, choose Install then click Install, the plugin installation process will start.

  

  

• Step 3 – Check all the plugins that you want to activate then on the drop down Bulk Actions, choose Activate and click Apply, the plugin installation process will start. Wait for all the plugin activated then you can start customizing your website as you wish

• Step 4 – Install the plugin "Widget CSS Classes".

  

• Step 5 – Install another plugin if you need: MailPoet Newsletters, YITH WooCommerce Compare, YITH WooCommerce Wishlist,Widget CSS Classes.

You can follow this video:

• Step 1 - Log into your WordPress Dasrdoard.
• Step 2 - Go to Tools > Import. Then click on WordPress ( bottom of the list ).
• Step 3 - A window should appear click the Install now button which is on bottom right.

• Step 4 - Click Run Importer

  

• Step 5 - Click "Choose File" button and select XML files in "sample-data/exported_files" folder. :

  

  • all-content.xml: This is exported of many content, includes posts, pages, products, contact form, menus. You can ignore this file if you website has already content.
  • contact-form.xml: This is exported file of Contact Form 7 plugin.
  • ...

• Step 6 - Click on Upload file and import button

  

  On the next interface, select existing user on dropdown, check on Download and import file attachments to download sample images.

• Step 7 - Click on Submit button to import.

• Step 8 - Done! But you still need to set the Menu, Widget, Homepage.

You can follow this video:

The importer should be run only once. If something went wrong and you need to import the content again, you may need to reset your WordPress.
Use this plugin to reset the WordPress database : http://wordpress.org/plugins/wordpress-database-reset/

Error or Problem with Import of the Demo

f you have problems importing the demo ( example : infinite loading, error 505 with when using wordpress importer ) then you may have a problem with the server settings.Please check these:

If the import stalls and fails to respond after a few minutes, or it fails with a simple error message like “Import failed,” You are suffering from PHP configuration limits that are set too low to complete the process. You should contact your web host and ask them to increase those limits to a minimum as follows:

• max_execution_time 3600
• max_input_time 3600
• memory_limit 256M
• post_max_size 64M
• upload_max_filesize 64M
• max_input_vars 3000

You can verify your PHP configuration limits by installing a simple plugin found here. And you can also check your PHP error logs to see the exact error being returned.

Also if possible update your PHP version to 5.5

After doing this you can reset your database using the WordPress Database Reset Plugin and try to re-import the demo data ( WARNING : Reset the database will make you lost all the data of your current wordpress )

If you still have problem your web host may uses process watching software that prevents bulk processing on their web servers.

If you have problem please submit a ticket and we will help you to import the demo.

Helpful when you going to build new website and don't need install requires plugins, import sample data but require server

Requirements

The installation required :

Install a Quickstart Pack in localhost

If you install the quickstart in your localhost, copy the extracted folder to: ...\wamp\www (if you are using WAMP) and ...\xampp\htdocs (if you are using XAMPP)

Start installation procedure:

After uploading is completed, open the browser and type your URL in the address bar: link/installer.php

STEP 1 : Files & Database

+ Make must Test Connection, if Success click on Run Deployment

+ This will take a few minutes

STEP 2 : Update

+ Click on Run Deployment

STEP 3 : Test Site

+ Click on Security Cleanup : Validate installer files are removed (requires login)

+ Login admin with password : 123456

+ Click each buttons:

STEP 4 : Change Password

+ You must change password after install.

STEP 5 : Replace Image Url’s

Slider not working after migrating site to new domain

If you like to build your site locally or have moved your site to a new domain, chances are your slider’s image url’s need to be updated.

Replace From : http://192.168.1.123/wordpress/blank/genius/
Replace To : yourdomain

Note

Demo images are not included in the quickstart package and have been replaced with placeholder images.

Result

Install a Quickstart Pack from hosting

If you want to install the quickstart from your hosting, please upload all folders in the folder that you just extracted to the FTP Base folder (normally it is public_html)

Important

After uploading is completed, open the browser and type your URL in the address bar: http://domain/installer.php
And installed as the steps above

You can follow this video:

Go to Posts > Add New to add new post

Under Post Format, you can add various types of item to your post :

• Video
• Audio
• Gallery
• Quote

For more detailed information on how to work with posts, categories, tags, please go to http://codex.wordpress.org/Writing_Posts

In this guide, we will create some of pages for your store like home page, blog page, shop page, about us page, contact page...

Go to Pages - Add New, enter page title and select template is Home Shop 1 Template

For the page content, open "sample-date/pages" folder in this package, open a "home-[page name].txt" and copy content. Click on "CLASSIC MODE" and click on "Text" tab to switch to HTML mode, paste content there and click Publish to save page.

Go to Settings - Reading, select "A static page" in "front page displays" then select your page in dropdown.

Go to Apperances -> Settings -> Reading

You can choose Home Shop 1 or 2,3,4 to Front Page as Demo Themes

Config in Front page

In order to VG Genius work well, you need to create these menus below:

• Main Menu (Primary Menu) (!Important)

  

• Category Menu
• Customer Service
• Infomation Menu
• My Account Menu
• Top Menu
• Wishlist Menu

For more detailed information on how to work with menus, please go to http://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/

You must install the plugin "Widget Importer & Exporter" to be able to import our data widgets

Click on "Browse..." or Choose File button then select genius-widgets.wie, click on Import Widgets to finish.

After importing widgets, we need go to update some widgets like menu, slider. Go to Apperances - Widgets

You can follow this video:

After importing widgets, we need go to configure some widgets like menu, slider. Go to Apperances - Widgets

Top Bar 01 Widget on Left Top Bar

Top Bar 02 Widget on Right Top Bar

Cart Widget Widget Mini Cart in WooCommerce

You must install the "Widget CSS Classes" plugin, then use the CLASS as image above. Link to plugin: https://wordpress.org/plugins/widget-css-classes/

Top Search Widget for Search

Category Menu Widget Left Main Menu

Brand Logo Widget for Brand Logo

Bottom Widget

Footer Widget

We includes the popular Revolution Slider Created By ThemePunch. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we outline how to setup a slider and how to add slides to it. We also include a video tutorial walk through.

View Documentation From ThemePunch

Please watch this video to know how to import sample sliders.

Or you can use the "Customize", it is easy to use

In General tab, we can configure Demo Mode, Default Layout*, Default Preset Color* and Website Width* for the website.

Demo Mode

When enabled, some config from Theme Options will not implement.

Disabled Demo Mode

You should disable Demo Mode then configure Theme Options that you want.

• Default Layout* : Select the default layout for your website.
• Default Preset Color* : Select the default preset color for your website.
• Website Width* : Set up the width of the Website.

In Header tab, we can configure Top Bar, Middle Bar and Menu Bar for the website.

Top Bar

In this tab, you can configure Top Bar, Customize CSS, Top Bar Background, ...You can enable Customize CSS then configure Top Bar that you want.

• Top Bar* : Enable / Disable the Top Bar
• Customize CSS : You can change background, font-size, font-color of Top Bar if enabled this option.
• Top Bar Background : Top Bar Background with image, color, etc.
• Top Bar Text : Top Bar Text with color, font size, font weight...
• Top Bar Link Color : Specify the Top Bar Link Color.
• Top Bar Link Hover Color* : Specify the Top Bar Link Hover Color.

Middle Bar

In this tab, you can configure Sticky Menu*, Logo, Customize CSS...You can enable Customize CSS then configure Middle Bar that you want.

• Your Logo : Upload your logo image.
• Alternative Logo : The Alternative Logo is used on the Mobile Devices.
• Customize CSS : Allow you change background, font-size, font-color of Middle Bar. If Disabled, the theme will use default values from preset color.
• Logo Container Min Width* : Drag the slider to set the logo container min width.
• Logo Height* : Drag the slider to set the logo height (ignored if there's no uploaded logo).
• Middle Bar Background : The Middle Bar background with image, color, etc.
• Middle Bar Text : Middle Bar Text with color, font size, font weight...
• Middle Bar Link Color : Specify the Middle Bar Link Color.
• Middle Bar Link Hover Color : Specify the Middle Bar Link Hover Color.

Menu Bar

In this tab, you can configure Menu Bar Background, Menu Bar Text Color*, Customize CSS...You can enable Customize CSS then configure Menu Bar that you want.

• Sticky Menu : Enable / Disable the Sticky Menu Bar.
• Sticky Logo : The Alternative Logo is used on the Sticky Menu.
• Customize CSS : Allow you change background, font-size, font-color of Menu Bar. If Disabled, the theme will use default values from preset color.
• Sticky Background Color* : The Sticky Menu Bar background Color.
• Sticky Menu Bar Color : The Sticky Color.
• Menu Bar Background : The Menu Bar background with image, color, etc.
• Menu Bar Text : Menu Bar Text with color, font size, font weight...
• Menu Bar Text Hover Color : Specify the Menu Bar Text Hover Color.

In Footer tab, we can configure Footer for the website.

Footer

You can enable Customize CSS then configure Footer that you want.

• Customize CSS : Allow you change background, font-size, font-color of Footer. If Disabled, the theme will use default values from preset color.
• Footer Background : Footer background with image, color, etc.
• Footer Text* : Specify the Footer Text Color.
• Footer Links(Hover)* : Specify the Footer Links Color.

In General tab, we can configure Default Sidebar* and Number of Post per Column* for the blog page.

• Default Sidebar* : Select the default blog sidebar for your website.

• Hover Effect* : Select default product hover effect.

• Quick View* : Enable / Disable the quick view modal.

• Second Image on Catalog Page(Hover)* : Change to display second image when hover on product image.

• Default Sidebar* : Select the default blog sidebar for your website.
• Category View Mode* : Display products in Grid or List layout.
• Number of Products per Column* : Drag the slider to set the number of products per column to be listed on the shop page and catalog pages.
• Number of Products per Page* : Drag the slider to set the number of products per page to be listed on the shop page and catalog pages.
• Featured Label* : Out of Stock label text.
• Sale Label* : Sale label text.

• Column of Thumbnail Images* : Drag the slider to set the number of Thumbnail Images will visible in carousel.
• Related Products* : Related Products*Enable / Disable Related Products.
• Total Related Products* : Drag the slider to set the Total Related Products will display in carousel.
• Column of Related Products* : Drag the slider to set the number of Product will visible in carousel.
• Sharing Options* : Enable / Disable Sharing Options.

You can enable Customize CSS then configure Styling that you want.

• Images Banner* : Hover Effect Images Banner
• Customize Styling : Allow you customize the Styling of the theme. If Disabled, the theme will use default values from preset color.
• Body Texts Color* : Body Texts Color of the site.
• Headings Color* : Headings Color of the site.
• Main Theme Color* : The main color of the site.
• Price Color* : The color of Price.
• Mini Cart Color* : The color of Mini Cart.
• Body Background : Body background with image, color, etc.

You can enable Customize CSS then configure Typography that you want.

In Owl Carousel tab, we can adjust the parameters for the carousel

• Custom CSS : Paste your custom CSS code here.
• Header JavaScript Code : Paste your custom JS code here. The code will be added to the header of your site.
• Footer JavaScript Code : Here is the place to paste your Google Analytics code or any other JS code you might want to add to be loaded in the footer of your website.

Here you can copy/download your current option settings. Keep this safe as you can use it as a backup should anything go wrong, or you can use it to restore your settings on this site(or any other site).

This method requires more steps and manual work. First, you need to manually download the new theme package from your ThemeForest account. Once you have the new theme package, you can choose to upload the theme via WordPress or via FTP. Please see the information below for how to download new files, and install it via WordPress or via FTP.

How To Receive Free Support

• Step 1 – Log into your ThemeForest account and navigate to your Downloads tab. Find the genius theme purchase.
• Step 2 – Click the Download button next to it and either choose to download the Installable WordPress Theme, which is just the WordPress file, or choose to download the Main Files which is the entire package that contains everything.
• Step 3 – After downloading the files, you need to decide if you want to install the update via FTP or via WordPress. For directions on both methods, please continue reading below.

How To Update Your Theme Via FTP

• Step 1 – Go to wp-content > themes folder location and backup your genius theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.
• Step 2 – Retrieve the vg-genius.zip file from your new ThemeForest download and extract the file to get the updated genius theme folder.
• Step 3 – After extracting the updated genius theme folder, simply drag and drop the new genius theme folder into wp-content > themes folder location. Choose to Replace the current one if you did not delete the old genius theme folder
• Step 4 – Lastly, update the included plugins. You will see a notification message letting you know a new version of the plugins are available and need to be updated. Follow the onscreen prompts to update the plugins

IMPORTANT NOTE

If you upgrade through FTP, please visit your WP-admin so any new theme options can be registered. If you do not do this and also have wp-debug turned on, you may see php notices on the front end. They will disappear once you visit the WP admin.

How To Update Your Theme Via WordPress

• Step 1 – You need to deactivate the current genius theme located in the Appearance > Themes section by activating a different theme. Once you activate a different theme, you can delete the genius theme. Dont worry, your content will not be lost.
• Step 2 – Retrieve the new vg-genius.zip file from your ThemeForest download. If you downloaded the Main Files from ThemeForest, you need to unzip the archive file you received to get the vg-genius.zip file inside.
• Step 3 – Upload the vg-genius.zip file to the Appearance > Themes section by clicking on the “Install Themes” tab at the top and then choosing to upload the zip file.
• Step 4 – Once it finishes uploading, choose to activate the theme.
• Step 5 – Lastly, update the included plugins. You will see a notification message letting you know a new version of the plugins are available and need to be updated. Follow the onscreen prompts to update the plugins

You can override css by 3 ways below :

1. Use Custom Css in ThemeOptions

2. Install Child theme and override css in file: /wp-content/themes/vg-genius-child/style.css

3. Use "Additional CSS" in Customize

See my video

Use Child Themes to Modify Theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

There are a few reasons why you would want to use a 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.
• Using a child theme can speed up development time.
• Using a child theme is a great way to learn about WordPress theme development.

How to use a Child Theme?

In this theme, we offer you a sample Child Theme (vg-genius-child.zip). You install it like normal theme.

But you can create your own Child Theme form by following the instructions below

Link instructions How to Create a Child Theme

You can follow this video:

You can follow this video:

To Speed Up Your WordPress Theme , you must perform the following steps ( and configure as my video ):

• 1. Install WP Smush - Image Optimization plugin : https://wordpress.org/plugins/wp-smushit/

  (Reduce image file sizes, improve performance and boost your SEO using the free WPMU DEV WordPress Smush API.)

• 2. Install WP-Optimize plugin : https://vi.wordpress.org/plugins/wp-optimize/

  (Simple but effective plugin allows you to extensively clean up your WordPress database and optimize it without doing manual queries.)

• 3. Install W3 Total Cache plugin : https://wordpress.org/plugins/w3-total-cache/

  (Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and content delivery network support.)

  Link file Import configuration : http://wordpress.vinagecko.net/l/speed-w3total-cache.zip

  If after config, your website fails , please configure as image : http://nimb.ws/7pMQgd

• 4. Add code into file .htaccess : http://wordpress.vinagecko.net/l/htaccess.txt

In addition to the above, you can speed up by the following ways :

• 1. Use CloudFlare

  This is similar to the section above on using CDN’s, but I’ve become so fond of CloudFlare since I discussed it in my best web analytics post that I’ve decided to include it separately here.

  To put it bluntly, CloudFlare, along with the W3 Total Cache plugin discussed above, are a really potent combination (they integrate with each other) that will greatly improve not only the speed, but the security of your site.

• 2. Choose a good host

  When starting out, a shared host might seem like a bargain (“Unlimited page views!”). It comes at another cost: incredibly slow site speed and frequent down time during high traffic periods.

  If you plan on publishing popular stuff, you’re killing yourself by running your WordPress site on shared hosting.

  The stress of your site going down after getting a big feature is enough to create a few early gray hairs: don’t be a victim, invest in proper hosting.

  The only WordPress host I continually recommend is…

  ✓ WP Engine managed WordPress hosting

  My sites are always blazingly fast, never have downtime when I get huge features (like when I was featured on the Discovery Channel blog!), and the back-end is very easy to use.

  Last but not least, support is top notch, which is a must when it comes to hosting. Take it from someone who’s learned that the hard way.

  Head on over to the WP Engine homepage and check out their offerings, you’ll be happy you did.

• 3. Use a content delivery network (CDN)

  All of your favorite big blogs are making use of this, and if you are into online marketing using WordPress (as I’m sure many of my readers are) you won’t be surprised to here that some of your favorite blogs like Copyblogger are making use of CDN’s.

  Essentially, a CDN, or content delivery network, takes all your static files you’ve got on your site (CSS, Javascript and images etc) and lets visitors download them as fast as possible by serving the files on servers as close to them as possible.

  I pernewyorklly use the Max CDN Content Delivery Network on my WordPress sites, as I’ve found that they have the most reanewyorkble prices and their dashboard is very simple to use (and comes with video tutorials for setting it up, takes only a few minutes).

  There is a plugin called Free-CDN that promises to do the same, although I haven’t tested it.

Version 1.00 (March 28, 2017)

- First Release!