Responsive WooCommerce WordPress Theme

Version 1.0 Last Update : June 22, 2017

We thank you for purchasing our product. Hope our product will be of great help for you to succeed. We appreciate your decision to read the manual before request for our support.

VG Oregon - Responsive WooCommerce WordPress Theme

VG Oregon is responsive WooCommerce WordPress theme for digital, kitchen tools, furniture, food website with creative design and advanced features. Fully responsive, it looks suitable for browsing on any modern desktop computers or hand-held digital devices, providing premium visual experience for the customers.

VG Oregon Responsive WooCommerce WordPress theme included with 4 layouts for home page with good colors combination. Apart from multiple features and modules common for all WooCommerce WordPress themes, VG Oregon theme can boast the following ones that will surely sweeten the deal for online business owners. Here they are: MegaMenu, Slideshow, RTL ready, Product Category widget, Product Carousel, Category search, add to cart, product quickview / comparison , wishlist, daily deals, social integration and other elements, which are integrated to provide the users with the seamless online shopping experience. Besides, it is impressive by List Category Products module. With this extension, each category contains their image thumbnail and be split into 3 features (bestseller, featured, sale products). Moreover, Post Carousel widget is integrated to keep the audience updated on the latest company news.

Make your business with our theme, choose VG Oregon Responsive WooCommerce WordPress theme now! We are sure that it will satisfy all your needs!

It features deep integration with WooCommerce core plus several of the most popular plugins:

  • - Redux Framework
  • - Visual Composer
  • - Slider Revolution
  • - YITH WooCommerce Wishlist
  • - YITH WooCompare
  • - Dokan and YITH WooCommerce Multi Vendor

Feature List:

  • Fully Responsive WooCommerce WordPress theme
  • 4+ Pre-made layouts
  • 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 3.0+ 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=oregon
  • Supports Chrome, Safari, Firefox, IE
  • Child Theme included

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/

  • Wordpress 4.0 or higher
  • PHP 5.3.29 or higher
  • MySQL 5.0 or higher
  • Apache mod_rewrite module musts be enabled
  • This theme is tested under Mac, Windows and Linux.

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.

Please, follow the steps below to install Oregon 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-oregon.zip", you will have a folder "vg-oregon" 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-oregon.
  • Step 3 – Upload the vg-oregon folder to your server in path ROOT/wp-content/themes/.
  • Step 4 – The uploaded path should be like this: ROOT/wp-content/themes/vg-oregon/.
  • Step 5 – Login to your WordPress Dasrdoard and go to Appearance ► Themes and activate the VG Oregon 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 another plugin if you need: WooCommerce Variation Swatches, MailPoet Newsletters, YITH WooCommerce Compare, YITH WooCommerce Wishlist.

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.
    • pages.xml: This is exported file of the pages.
    • posts.xml: This is exported file of the posts.
    • products.xml: This is exported file of the products.
  • 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

    If 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.

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 Oregon work well, you need to create these menus below:

  • Main Menu (Primary Menu)

  • Customer Service
  • Extras
  • Infomation
  • Login
  • Menu Categories (Category Product Menu, Mobile Menu Category Product)
  • Top-wishlist-compare

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/

How to configure Mega Menu?

Please use class "mega-menu full-menu multi-columns column_3" for parent menu:



Change "column_3" by the number of columns you want.

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

To create widgets for this theme quickly, we use a tool to import all widgets from exported files in sample-data/exported_files folder.

Login to your WordPress dashboard, navigate to Tools - Widget Importer & Exporter

Click on "Browse..." or Choose File button then select oregon-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

Top Bar 02 for Layout 2,4,5

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.

For websites to act as images, you need to install the following plugin: WooCommerce Variation Swatches

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

In General tab, we can configure Demo Mode, Show Loading Page 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.
  • Website Width* : Set up the width of the Website.
  • Show Loading Page : Enable effect when loading page

In this tab, you can configure Your Logo, Logo Container Min Width, Logo Height...You can enable Customize CSS then configure Top Bar that you want.

  • Your Logo : Upload your logo image.
  • Customize CSS : Allow you change background, font-size, font-color of Header site. 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).
  • Header Bar Link Color* : Specify the Header Bar Link Color.
  • Header Bar Link Hover Color* : Specify the Header Bar Link Hover Color.
  • Header Bar Background : The Header Bar background with image, color, etc.

Top Bar

In this tab, you can configure Top Bar Background, Top Bar Text Color*, Customize CSS...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 Link Color* : Specify the Top Bar Link Color.
  • Top Bar Link Hover Color* : Specify the Top Bar Link Hover Color.

Menu Sticky

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

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.
  • Logo Footer : The Alternative Logo is used on the Footer.
  • Footer Background : Footer background with image, color, etc.
  • Footer Link Color : Specify the Footer Link Color.
  • Footer Link Hover Color* : Specify the Footer Link Hover Color.

Top Footer

In this tab, you can configure Customize CSS, Top Footer Background, Top Footer Link Color...You can enable Top Footer then configure Menu Sticky that you want.

  • Customize CSS : Allow you change background, font-size, font-color of Bottom Footer. If Disabled, the theme will use default values from preset color.
  • Top Footer Background : Footer background with image, color, etc.
  • Top Footer Link Color : Specify the Top Footer Link Color.

Bottom Footer

In this tab, you can configure Customize CSS, Bottom Footer Background, Bottom Footer Text*...You can enable Bottom Footer then configure Menu Sticky that you want.

  • Customize CSS : Allow you change background, font-size, font-color of Bottom Footer. If Disabled, the theme will use default values from preset color.
  • Bottom Footer Background : Footer background with image, color, etc.
  • Bottom Footer Link Color : Specify the Bottom Footer Link 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.
  • Number of Post per Column* : Drag the slider to set the number of post per column to be listed on the category post.

  • 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.
  • 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 oregon 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 oregon 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-oregon.zip file from your new ThemeForest download and extract the file to get the updated oregon theme folder.
  • Step 3 – After extracting the updated oregon theme folder, simply drag and drop the new oregon theme folder into wp-content > themes folder location. Choose to Replace the current one if you did not delete the old oregon 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 oregon theme located in the Appearance > Themes section by activating a different theme. Once you activate a different theme, you can delete the oregon theme. Dont worry, your content will not be lost.
  • Step 2 – Retrieve the new vg-oregon.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-oregon.zip file inside.
  • Step 3 – Upload the vg-oregon.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

We custom CSS to create icons in order

div.vg-oregon-category-treeview .treeview > li:nth-child(1):before {
  background-image: url(../images/icons/icon-category11.jpg);
}
div.vg-oregon-category-treeview .treeview > li:nth-child(2):before {
  background-image: url(../images/icons/icon-category21.jpg);
}
div.vg-oregon-category-treeview .treeview > li:nth-child(3):before {
  background-image: url(../images/icons/icon-category31.jpg);
}
div.vg-oregon-category-treeview .treeview > li:nth-child(4):before {
  background-image: url(../images/icons/icon-category41.jpg);
}
div.vg-oregon-category-treeview .treeview > li:nth-child(5):before {
  background-image: url(../images/icons/icon-category51.jpg);
}
div.vg-oregon-category-treeview .treeview > li:nth-child(6):before {
  background-image: url(../images/icons/icon-category61.jpg);
}

List classes and images that we used:

# Images
1 (icon-category11.jpg)
2 (icon-category21.jpg)
3 (icon-category31.jpg)
4 (icon-category41.jpg)
5 (icon-category51.jpg)
6 (icon-category61.jpg)

You can replace the image in the folder: ROOT/wp-content/themes/vg-oregon/assets/images/icons/

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-oregon-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-oregon-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 ):

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.0 (June 22, 2017)

- First Release!