How to Add eCommerce Functionality to an Existing WordPress Site via the use of WooCommerce and Multiple Installations of WordPress on the Same Domain Name
As much as possible, we try to make WordPress tutorials that answer specific questions our readers have posted via Comments. This tutorial addresses a number of questions that have come up more than a few times since launching our WooCommerce instructional series back in July 2012. Specifically, in this Upload WP tutorial we'll attempt to answer John's questions which are as follows…
“My questions are similar to Alexa’s. In fact, I may be asking the same questions, but since I, too, am a novice I want to make sure I am understanding correctly. I built a site (thebaukegroup.com) using WooThemes Canvas theme. Now I want to add WooCommerce to it (specifically, to the thebaukegroup.com/foryou sub-site). I want to use the WooStore theme for my eCommerce portion of the site.
My questions are:
- Do I need to set up a sub-domain for my store and use WooStore on that?
- Or, can I simply add the WooStore theme to my existing site, then have a page that only uses that theme? Specifically, someone would select the, say, “Shop” page then be able to use the entire WooCommerce/WooStore Shop theme from there?
The answer to John's questions are that both methods work well. However, simply adding the WooStore theme to his existing Canvas theme business site as a sub-directory is the method we'll show you how to accomplish in this tutorial. Specifically, we'll show you how to install a second version of WordPress (on a sub-directory of the main domain name) and add a fully functional WooCommerce powered store to any existing WP site.
If you have a classic Blog, a Business style site, Magazine style site or any other type of website that is built on WordPress you can easily add an eCommerce store. This method allows you to display two completely unique WordPress themes on the same domain name while maximizing the functionality of WooCommerce. Keep your existing WP Blog or Business site intact while displaying the store on a theme that's built specifically for WooCommerce.
This is a win-win solution that offers the best of both worlds. A simple analogy to physical construction would be that it's like adding a retail store to your existing place of business without disrupting your daily operations. No one would be effected by the contractors and construction zone because it's being built in a way that keeps your existing business model completely intact. In other words, this method will not cause issues with your main site because the WooCommerce shop won't be linked up to your main site until its ready. You can take your time and build the eCommerce addition the right way.
How to Add a WooCommerce Powered Store to an Existing WordPress Site
In the tutorial video below we use an Elegant Themes theme (the Trim theme) for the main demo site. The URL to view the demo site is; MaKnits.com. For our WooCommerce shop demo site we use the WooStore theme. However, it's very important to stress that this process will work regardless of the WordPress themes you use for your main website and store. If you'd rather test this process out before investing in a premium theme then check out the Mystile theme. Mystile is an excellent free WooCommerce specific theme that will get you started.
OK… Now that we've laid out the groundwork, it's finally time to explain how to add eCommerce functionality to any existing WordPress site via the use of WooCommerce and multiple installations of WP on the same domain name so let's get started…
Step 1: Install WordPress on a Sub-Directory of the Main Domain Name
To install a second version of WordPress on the same domain name start by logging into your Hosting account. In the tutorial video our hosting provider is BlueHost. However, it's important to stress that this process will work with just about any hosting provider that makes it easy to install WordPress.
IF the URL to your existing WordPress site is something like: YourMainWPSite.com
You would install the second version of WordPress on the sub-directory: YourMainWPSite.com**/Shop
** The URL to you WooCommerce shop will be: YourMainWPSite.com/Shop (you could also use “Store”)
The WordPress simple script will take over and install the second version of WordPress as the sub-directory YourMainWPSite.com/Shop. When the installation is complete, make sure to save the log-in credentials because you'll need them to manage your WooCommerce shop going forward.
The URL to access the WordPress admin for your eCommerce site will look like the following: https://www.YourMainWPSite.com/shop/wp-admin
Step 2: Install the WooCommerce Plugin in the Store WordPress admin
Log into your newly created eCommerce WordPress admin and install the WooCommerce Plugin. To install WooCommerce go to Plugins > Add New > search for WooCommerce > Install and Activate the Plugin. After the plugin has been successfully installed and activated create the WooCommerce Pages.
Step 3: Upload and Activate your WooCommerce Specific Theme
The next step in the process is to upload your WooCommerce specific theme. Once the theme has been uploaded go ahead and activate it. We use the WooStore theme in this example but any other eCommerce theme will work just as well.
Step 4: Setup the WooCommerce Store
Obviously, you'll want to have your eCommerce site completely setup before linking your main site to it. By setup I mean that products have been added, the site has been customized and tested. The WooStore theme (and all of the WooCommerce specific themes) are highly customizable so making the store look like it matches the color scheme / font scheme of your main site should be relatively easy to do. It's a good idea to try and make your main site and store as uniform as possible.
Note: Refer to our WooStore tutorials for guidance on setting up your WooCommerce shop.
Step 5: Link your Main WordPress Site to Your WooCommerce Shop
After your eCommerce site has been setup, the final step in the process is to link up your main WordPress site to the WooCommerce shop. There are many methods in which to link to the eCommerce portion of your site. In my opinion, the best way is by adding a “Shop” link to your top navigation via the use of Custom Menus. Most WordPress themes support custom menus in regards to controlling the main navigation of the site. If your theme does not, then you could always add a link to the side-bar of your main site via the Widgets section in the WP admin.
That's it! So if you're looking to start selling your own products, then follow the steps above to add professional eCommerce functionality without disrupting your existing WordPress site. As always, please feel free to ask questions via the Comments section below.