Ecommerce Templates > WordPress > Getting started with WordPress and Ecommerce Templates

Getting started with WordPress and Ecommerce Templates

Wordpress shopping cart software

Once you have purchased the Ecommerce Templates shopping cart software for WordPress you will receive a zip file with all the files and folders that make up the store. The zip file is available for download on the receipt page following purchase and via email in the confirmation mail you receive from Ecommerce Templates. We strongly recommend making a back up of the zip file in case files are lost or you need to go back to the original files. The integration here assumes you already have a copy of WordPress installed on your server.

Ecommerce Templates files and folders

Unzip the file and you should see a bunch of files and folders, we'll outline their use below

  • Images - this folder contains the default images used on the store. They will typically be things like shipping carrier logos, product review icons etc.
  • Prodimages - this is the default location for the product images. If you look inside you'll see some sample small and large photos which correspond to the ones shown on the products page and product detail pages respectively.
  • Vsadmin - this folder contains all the admin files and the core code behind the shopping cart software. Your login for the control panel will be something like yourstoreurl.com/vsadmin/login.php. The vsadmin directory contains two important editable files; db_conn_open.php which is where the database connection details are added and includes.php which you'll use to add your personalized store settings.
  • affiliate.php - this allows you to run an affiliate program on your store. If you don't plan on using an affiliate program, there's no need to upload this file.
    Affiliate demo page
  • cart.php - this is an essential page as it's the page customers will see when adding items to cart and checking out.
    Cart demo page
  • categories.php - all products on the store are divided into categories. This page will display the categories and sub-categories.
    Categories demo page
  • clientlogin.php - this is an optional page and is used if you want to use the customer account feature. Client login can be made obligatory, voluntary or turned off completely. Details of the client login set up are available here.
  • Client login demo page
  • createdb.php - this file should be opened in your browser once you have set your database connection in vsadmin/db_conn_open.php as it will create the store database tables for you. Once you have run this file it should be removed from the server so it's not accidentally run again, overwriting your own products and settings.
  • emailfriend.php - this file contains the contents of the email a friend and ask a question feature. These are optional settings with links appearing on the product detail page if switched on through the file vsadmin/includes.php
  • giftcertificate.php - this file is optional and is used if you plan to offer gift certificates for sale on your store. Details of the gift certificate program are available here.
    Gift certificate demo page
  • orderstatus.php - this page allows customers to check on the status of their order by entering their order id and email address. It is an optional file. The order status is updated through the admin orders page.
    Order status demo page
  • proddetail.php - this page is used to show full details on a particular product, typically it will include the larger product image and long product description.
    Product detail demo page
  • products.php - this page displays all the products on your store, the number of products per page and the order are both completely configurable.
    Product demo page
  • search.php - this page displays the search form and search results. It is also possible to have a mini search field on each page.
    Search demo page
  • sorry.php - this is the page the customer will arrive at if there was a problem with their purchase and were declined by the payment provider
  • thanks.php - this is the confirmation page following a successful order. It will show a summary of the order.
  • tracking.php - this will allow customers to track their orders via UPS, USPS, FedEx or Canada Post.
    Tracking demo page

Step #1 - Upload the store files

Ecommerce Templates file list

The first thing you'll probably want to do is upload all the files from Ecommerce Templates shopping cart to your server. All the files in the download should be uploaded to the root of your WordPress site. It is important they keep the same hierarchy as in the download and they will need to go in the root of the site, NOT inside any of the WordPress directories - see the sample file listing here to the left. This assumes you already have WordPress installed on your server of course.

You will need an FTP program to be able to upload all the files. If you don't have one, we recommend using Filezilla, which is free and available for PC and Mac.

If you don't already have WordPress installed it can be download from the official WordPress site. Many hosts also offer a WordPress integration wizard that you can use to have WordPress installed on the server for you.

 

Step #2 - Make the database connection

The Ecommerce Templates shopping cart runs off its own mySQLi database so the next step is to make the database connection. It is imperative that you don't use the same user and password as you entered for your WordPress database. As the database is different from the WordPress database a different name will also be required. To set the database connection, open the file vsadmin/db_conn_open.php in a text editor. You need to fill in the details in the spaces provided. The 4 pieces of information that you need to provide are the username and password for database access, the name of the database and the address of the database. If you are in any doubt about these, please ask your host who will provide you with the information. Then fill in the gaps between the quotes as shown.

$db_username = "loginname"; // Your database login username
$db_password = "loginpassword"; // Your database login password
$db_name = "databasename"; // The name of the database you wish to use
$db_host = "localhost";

The last parameter $db_host is normally "localhost". However, it can also be a URL like
$db_host = "db.myhost.com";

Once this information has been correctly entered, you can install the database tables and data. To do this, just open the file createdb.php in a browser by entering the address for instance

http://www.yourstoreurl.com/createdb.php

Obviously replacing "www.yourstoreurl.com" with whatever is the URL of your site. Then click on the button to "Install Ecommerce Plus" and your database will be created. Please remember to delete this file from your web after running it, as otherwise others could use it to destroy your information.

Step #3 - Log into your store control panel

Once you have run createdb.php in your browser and removed that file from the server, you can log into your store control panel located at

http://www.yourstoreurl.com/vsadmin/login.php
User: mystore
Password: changeme

You will be prompted to change the user name and password. Make sure it is completely different from the combination you have used for your WordPress admin. You may want to get familiar with the store control panel and our admin help pages will explain the functions and features.

Step #4 - Configuring the store pages

The first thing you will need to do to set up the store pages is to add the PHP include lines that call the shopping cart software. This is done by editing the header.php file through the WordPress admin - open the Appearance > Editor page and choose Header (header.php). The very first line will probably be

<?php

immediately after that add

session_cache_limiter('none');
session_start();
ob_start();
include "vsadmin/db_conn_open.php";
include "vsadmin/inc/languagefile.php";
include "vsadmin/includes.php";
include "vsadmin/inc/incfunctions.php";
include "vsadmin/inc/metainfo.php";

so the page now begins like this

<?php
session_cache_limiter('none');
session_start();
ob_start();
include "vsadmin/db_conn_open.php";
include "vsadmin/inc/languagefile.php";
include "vsadmin/includes.php";
include "vsadmin/inc/incfunctions.php";
include "vsadmin/inc/metainfo.php";

It may be the header.php begins with a doctype declaration like this

<!DOCTYPE html>

...if that is the case add the lines above so the beginning of header.php now looks like this

<?php
session_cache_limiter('none');
session_start();
ob_start();
include "vsadmin/db_conn_open.php";
include "vsadmin/inc/languagefile.php";
include "vsadmin/includes.php";
include "vsadmin/inc/incfunctions.php";
include "vsadmin/inc/metainfo.php"; ?><!DOCTYPE html>

Save that page and move onto the next step.

Step #5 - Setting up the store pages

As noted above the download comes with the publicly viewable store files that make up the ecommerce site. We have set these up with the most typical configuration but depending on the theme you are using you may need to make some minor edits

A typical WordPress site uses a header, main content, sidebar and footer as in our demo site. If you open the file products.php in a text editor you will see the following code...

<?php
$GLOBALS['ectcartpage']='products';
require('./wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals();
get_header();
?>
<div>
<?php
include "vsadmin/inc/incproducts.php";
?>
</div>
<?php
get_sidebar();
get_footer();
?>

...where you can see those four elements defined. The main content shows the PHP include line which will change depending on the page. The example above is for products.php, if you open cart.php you'll see the PHP include line changes to

<?php
include "vsadmin/inc/inccart.php";
?>

..and the ectcartpage which identifies the page for title and meta description tags changes to

$GLOBALS['ectcartpage']='cart';

You'll find similar include lines in all of the store pages.

The code above assumes your theme uses a right hand side bar, defined in the line

get_sidebar();

If you are not using a sidebar you can remove that line from each of the store pages. If your theme uses left hand sidebar, you would probably want to edit the store files to something like this

<?php
$GLOBALS['ectcartpage']='products';
require('./wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals();
get_header();
?>
<?php
get_sidebar();
?>
<div>
<?php
include "vsadmin/inc/incproducts.php";
?>
</div>
<?php
get_footer();
?>

It's likely that the content div in your theme has a css class and/or id applied to it. To check this go into your WordPress admin and open the Appearance > Editor page and choose a page like Main Index Template (index.php) or (page.php) and after the get_header(); function you should see the main div defined which will look something like this

<div id="content" class="grid">

Copy that and paste it in place of the opening <div> tag on all the store pages so you have a products page like this for example...

<?php
$GLOBALS['ectcartpage']='products';
require('./wp-config.php');
$wp->init();
$wp->parse_request();
$wp->query_posts();
$wp->register_globals();
get_header();
?>
<?php
get_sidebar();
?>
<div id="content class="grid">
<?php
include "vsadmin/inc/incproducts.php";
?>
</div>
<?php
get_footer();
?>

If everything has gone to plan you should now be able to open products.php, cart.php etc in your browser and see the shopping cart content. If you get an error message or are not seeing what you should on those pages, check out our troubleshooting guide and / or get in touch with the developers via the support forum.

You should now be able to browse your store and see how the pages fit together. The last thing to do would be to add your new store pages to your site menus and configure store features in the sidebar. That is covered in the sidebar widgets and menus page.

An overview of the WordPress installation

  • Ecommerce Templates shopping cart software WordPress integration.