Installation and Setup

You must have a copy of WordPress already installed on either another web server or hosted on OrderStorm’s servers to use the WordPress eCommerce shopping cart. WordPress is a free, open source CMS (content management system) commonly used for online blogs and excellent for building a search engine friendly website. You can download a free copy of WordPress from the main website: http://wordpress.org/

Install the Plugin

1. From your WordPress dashboard, under Plugins, select Add New. Search for OrderStorm. Click on Install Now.

or

2. Download the plugin from the WordPress.org repository.
3. Log in to your WordPress dashboard and click on the ‘Plugins’ tab and then ‘Add New.’
4. Click on ‘Upload’ near the top of the page.
5. Click the ‘Choose File’ button and find the OrderStorm e-Commerce plugin .zip file.   Click ‘Choose’ followed by the ‘Install Now’ button.  WordPress will now upload and install your plugin.
6. Once the installation of your plugin has finished click the ‘Activate Plugin’ link. You will now see OrderStorm e-Commerce in ‘Manage Plugins.’

Setup

1. The plugin creates 2 pages: Orderstorm-ecommerce-product-page and Orderstorm-ecommerce-category-page.  Set the Product page to not display in your menu – it has nothing on it but shortcode.  The Category page shows all of your root categories.  You can either use this page or set it to not display if you are using the Categories Menu widget in a sidebar.  Reminder:  These pages are necessary for the plugin to work.  You must not put them in either draft mode or the trash.  Just don’t display them if you don’t want them.
2. You should rename these pages to something that is SEO friendly for your particular site.
3. The Key you see is an example key.  To add your categories and products to the shopping cart, sign up for a subscription on the Plans and Pricing page. After you sign up and login through the OrderStorm.com home page, you will find the key under ‘Admin – WordPress/API keys’.   Replace the example key with your key.  Note that because this is SaaS software, even the free version requires a subscription and key.

Appearance

1. Two widgets are added to the Widgets page during the initial installation. One for the Categories Menu and another for the Shopping Cart View Status box. You can put them anywhere you want plus put them in multiple places on your site.
2. To display the Categories Menu, go to Appearance, Widgets. Drag the Categories to a sidebar wherever you want it. Note: Your Category page must be set up with the same sidebar in order for the categories menu to display.
3. To change the Categories Menu settings, click the arrow on the widget to open up the settings box.
4. Maximum menu level depth can be set as 0, which displays all menus or any other number to limit the number of menu levels that fly out before a customer has to click on something.
5. The Parent Category Key can be set if you want to display only a subset of the menu.  The Key is found on the edit category page.  Use {} around the key.
6. An individual category can be added as the content of a specific page using this shortcode:
   [orderstorm_ecommerce_display_product_category_page cat_link="your category SEO-friendly slug"]
7. To change the look of the categories and products, go to the Plugin page. Then go to OrderStorm e-Commerce, click on ‘Edit’.
8. You do not need to use the category menu widget if you have only a few products.  You can put a link to your products on any page of the site including the home page and in the header.
   • To add individual products to pages, first create the link.  The link is the product page URL/product_slug.
   • Example: http://www.orderstorm/orderstorm-ecommerce-product-page/product_seo_slug
   • Note that you create the SEO slug when you create the product.  The slug is right below the product name on the product detail page.
9. The .css files controlling the appearance of the categories, subcategories and products are here.  You can completely customize colors, fonts, product display, product box sizes, alignment etc. See CSS Help.
10. Exceptions – The font and layout of the product detail come from your theme’s css.  You will remove the page titles from the product and category pages using your theme as well.
11. Important! Backup your .css files correctly! After you have your .css files changed the way you want them, create a copy of your .css files in a separate folder so they can be restored after an update. OrderStorm will overwrite the main plugin .css files when we issue updates. Alternately, you can use the OrderStorm eCommerce Custom Files Manager plugin.  This plugin will create a second copy of the css files.  You can make all your changes in these css files instead of in the main e-Commerce plugin files so they are not overwritten in an update.
12. The OrderStorm View Cart Status widget draws a box that shows how many items are currently in the customer’s shopping cart and the total dollar amount. Customers will click on this box to check out. Drag the widget to a sidebar. The box will appear in the side bar as soon as a product is added to the shopping cart.
13. The View Cart Status box can be included in any part of a theme. This example shows the way to include it in PHP.<?php orderstorm_ecommerce_shopping_cart_status('topright'); ?>The ‘topright’ value you see is an argument for the function’s $idSuffix parameter, used to provide a unique ID for the DIV containing the status box. Each instance should be named differently, using this suffix, in order to allow for styling or coding for them separately. The resulting ID for the container DIV element will be something like:ostrm_shopping_cart_status_$idSuffix,which for the PHP code example above would translate into:ostrm_shopping_cart_status_topright.

More on the OrderStorm e-Commerce .css Files

Note on Borders and backgrounds: Each category and product item has a border and a background that you can change as you see fit. If you are not a fan of borders and backgrounds, you can make them white to disappear them (if your theme has a white background). We included default colors for the category pages so you can see where the borders and backgrounds are. The product detail page (where you add it to your cart) is already set to white but you can change the color of the background here also.

Visit CSS Help for information on where to change those items that affect the look and feel of the category and product pages. Be sure to pay careful attention to the instructions for backing up your .css files.

Go to WordPress eCommerce User Manual Table of Contents