How to Build a Custom WP e-Commerce Theme (Part 1)

Posted in WordPress4 years ago • Written by 28 Comments

If you have ever tried to create an E-Commerce shop with WordPress, I am sure you know WP e-Commerce. If you are  a beginner and don’t know that much about it, I will suggest you to read this tutorial so that we are good to start the complex development. In this article I will show the process of how my latest custom WP e-Commerce theme was built from design concept through to completed theme.

You can preview the theme here or download djavu-shop work in progress theme here.

Tutorial Requirements

This tutorial assumes you are fairly comfortable using the following languages

  • Html
  • CSS
  • jQuery
  • PHP
  • WordPress

What will we learn in this tutorial?

  • Creating a WP e-Commerce Theme
  • Brief introduction to Wp e-Commerce file relationship
  • A dynamic accordion slider (using jQuery Kwicks) that uses the company categories as content
  • Playing with CSS3 to add a nice touch

Preview of our WP e-Commerce Theme

The theme I’m working on is named Djavu-shop. The main feature of this theme is it’s accordion slide on top of the products. This accordion displays the available categories and/or brands. Sliding over the accordion will bring a brief description of the category. A click on the link will display all the products of this category or brand.

A few fancy effects such as the buttons and shadows are made with CSS3.This tutorial is the first part of a suite of tutorials. For the first part we will only focus on the product page (see picture above).

Anatomy of a WP e-Commerce theme

Before getting stuck into the build process, it’s important to know how WP e-Commerce themes work. Open the default theme (wordpress-directory)/wp-content/plugins/ wp-e-commerce/themes/default), you’ll notice that it’s all contained in a folder, and there’s around 9 core files. Note the default theme is always loaded! Your theme only overrides the default theme behavior. In our theme we will include more files which allow extra customization.

Here’s an overview of the main files you’ll be working with:
cart_widget.php // Cart widget to be displayed on the sidebar for example
category_widget.php // Displays a widget with the categories and brands given in WP e-Commerce
default.css // Stylesheet of WP e-commerce. Original file is always loaded!
functions.php //
grid_view.php //
images/ // Folder containing WP e-Commerce related images
list_view.php //
products_page.php // Page where all products are displayed, per category, brand, etc…
shopping_cart_page.php // It’s the checkout page. Where the client puts his name, address etc…
single_product.php // Description of a product

Each of these files then contains a series of PHP template tags. These tags tell WP e-Commerce where to insert the dynamic content. A good example is the <?php  echo wpsc_the_product_title (); ?> tag, which will display your product title (or name if it is more understandable).A catalog of all available template tags are here . Probably you will find a tag that will do exactly what you want or if it is WordPress related try the WordPress Codex.

Create a new theme out of the default

The best way to start creating your own theme is to make a copy of the original theme. The default theme is in (wordpress-directory)/wp-content/plugins/ wp-e-commerce/themes/default. Duplicate the “default” folder and call it “djavu-shop”. After this open the new created theme folder and rename the default.css file to djavu-shop.css. Delete everything inside your css file (!) and put the following code inside of it.

<code>/*Theme Name: Djavu-Shop Theme
Theme URI: http://www.djavupixel.com
Description: Just another WP-e-commerce theme
Version: 0.2
Author: Leonel Hilario
Author URI: http://www.djavupixel.com*/</code>

Login to your wp-admin section and browse to Store>Settings>Presentation page, click on the drop-down list and djavu-shop theme should be in the list. Select it and save changes.
Create a “js” folder inside our theme. We will put some JavaScript inside. Download jQuery kwicks and put “jquery.kwicks-1.5.1.pack.js” on the js folder created before.
In this tutorial we will only work with djavu-shop.css and products_page.php. The next tutorials will focus on other files.

Reminder

Inside the “djavu-shop” folder you should have the following files:
cart_widget.php
category_widget.php
djavu-shop.css
functions.php
grid_view.php
images/
js/
list_view.php
products_page.php
shopping_cart_page.php
single_product.php

Preparing WP e-Commerce for our theme

Add 4 categories in WP e-Commerce

Login into your WordPress account and then click on Store>Categories. For this example we will create 4 categories “MacBook Pro”, “iMac”, “iPod Touch” and “iPhone”.  Add a small description and a picture to all categories! In our example we need 4 pictures of at least 320 pixel width and 320 pixel height (for this tutorial I used 4 pictures of 576×320).  Here below is an example screenshot and here you can download the pictures.

For the lazy one like me here are the products descriptions:

  • MacBook Pro: The fastest, most powerful MacBook Pro ever. Three Times.
  • iMac: The ultimate all-in-one. Turbocharged.
  • iPod Touch: A great portable game player.
  • iPhone 4: This changes everything. Again.

Configure presentation settings

Just copy the same settings as in the picture below. Please note that this picture is tall. Click on the image to open the full size

Let’s start building our theme!

Open products_page.php and go to line 35 it you be “<ul class=’wpsc_categories’>“. Delete line 35 to 48, just before the endif. Here we will add Kwicks for jQuery which is an accordion slider.

Here is the PHP/HTML code:

<code><ul class='kwicks'>
<?php wpsc_start_category_query(array('category_group'=>get_option('wpsc_default_category'), 'show_thumbnails'=> get_option('show_category_thumbnails'))); ?>
<li>
<div class="kwicks_inner">
<div class="image"><?php wpsc_print_category_image(); ?></div>
<div class="caption-title transparent_class">
<?php wpsc_print_category_name();?>
</div>
<div class="caption transparent_class">
<a href="<?php wpsc_print_category_url();?>" class="wpsc_category_link"><?php wpsc_print_category_name();?></a>
<?php if(get_option('wpsc_category_description')) :?>
<?php wpsc_print_category_description("<div class='wpsc_subcategory'>", "</div>"); ?>
<?php endif;?>
</div>
</div>
</li>
<?php wpsc_end_category_query(); ?>
</ul></code>

We created an unordered list and inside of it we put we kwicks_inner class. Inside we put the picture as we think it is more flexible than putting it on the CSS. In class caption-title we put the title of the category. On mouse over the class caption will be displayed which contains the title and the small description that we entered before (see Preparing WP e-Commerce for our theme). Now open djavu-shop.css and paste this CSS code:

  • wpsc_print_category_image() prints the category image unscaled
  • wpsc_print_category_name() prints the title of the category
  • wpsc_print_category_description is the description we gave before to this category
  • wpsc_print_category_url() link to the category content

<code>/* Product Page - The accordion (kwicks) effect on top of page */</code>

<code> </code>

<code>.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
border: 1px solid #ddd;
box-shadow: 2px 2px 5px #ddd;
-moz-box-shadow: 2px 2px 5px #ddd;
-webkit-box-shadow: 2px 2px 5px #ddd;
}</code>

<code> </code>

<code>#content #products_page_container ul{
margin: 0;
padding: 0;
}

.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
}

.kwicks li{
float: left;
width: 160px;
height: 320px;
margin-right: 5px;
}

.kwicks li a {
color: #fff;
}

.kwicks .kwicks_inner {
width: 320px;
}

.kwicks .image {
width: 90px;
height: 240px;
float: left;
}

.kwicks .caption-title {
background-color:#333333;
color:#CCCCCC;
float:left;
font-size:16px;
margin:40px 0 0 16px;
padding:3px 0 3px 16px;
text-align:left;
width:100%;
}

.kwicks .caption {
display: none;
text-align: center;
width: 320px;
height: 80px;
color: #ccc;
font-size: 16px;
float: right;
/* Playing with CSS - Adding some transparency */
background-color: #333;
}

.kwicks li.active .caption {
display: block;
}

.kwicks li.active .caption-title {
display: none;
}

</code>

<code>.transparent_class {
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}</code>

So this was a bit of code. As you may read we added a few CSS shadows. The .kicks li.active class is fired when a mouse passes over the accordion. Here we hide the .caption-title to show the .caption which contains the title and description of this category. For more information about Kwicks please read the well documented page or if you want to try other nice effects.

Now we hase the HTML and CSS code and here is the JavaScript code that will create all the magic:

<code><script src="<?php echo $djavu_theme_url ?>/js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.kwicks').kwicks({
max : 320,
spacing : 0
});
});
</script></code>

Note that you can put this at the top oder bottom of the page. I would recommend at the bottom of the page so that the layout loads faster.

Conclusion

This may look a bit difficult at first sight, but it’s not and it is the first part of a series of tutorials. Make a temporary install of WP e-Commerce and fill it with dummy content this will really help understanding how WP e-Commerce works and will also help to find errors. In our next tutorial we will focus on more general parts of the design as I am working on it ;-)

Download files

Further Discussion

Have some thoughts of this theme? Give them to me, I’d love to hear them. This is as much a proof of concept as it is a tutorial. It introduces basic html, css, jQuery, PHP and the WP e-Commerce plugin. I’m sure there will be people out there who will feel that a perfect e-commerce start page is something else. If so, what would you do?

4 Written ArticlesWebsite

Leonel Hilario is a young old man living in Luxembourg. In his free time he adores to drink George Clooney's coffee, traveling, going out and more :) After years of being a professional web designer and developer, he decided to start blogging and tweeting.

28 Comments Best Comments First
  • Krishna

    Wednesday, August 25th, 2010 12:11

    1

    This is something I really need to get my head around..esp for a possible project I have coming up!
    Bookmarked for sure!!
    thanks!! :)

    0
  • wetwetwafu

    Wednesday, September 1st, 2010 08:07

    9

    nice post, but it seems so basic.

    how about posting your latest products in the theme file where we can control the design and not using a widget or short codes?

    im hoping that the part two is more advance.. nice post sir.

    0
  • Huw Rowlands

    Thursday, September 2nd, 2010 19:04

    10

    I recently built a wp commerce theme and could have done with this tut! i will be trying again soon!

    0
  • Theo

    Sunday, September 5th, 2010 21:19

    11

    Great Tut, looking forward to the next step in the process.

    0
  • Anonymous

    Thursday, January 13th, 2011 20:29

    13

    I cannot figure out how to get my theme on the select theme menú… i tried everything, i also modificate the shopping_cart_page.php and the changes are not viewable… I’m furstrated, anyone? any clues?

    0
    • bslugnut

      Monday, February 7th, 2011 03:30

      15

      Verify that you uploaded the dejavu folder to the “\YOURBLOG\wp-content\uploads\wpsc\themes\” and not the “\YOURBLOG\wp-content\plugins\wp-e-commerce\themes\” directory. Let us know if this works for you!

      0
  • Jasmine

    Tuesday, October 5th, 2010 09:39

    12

    Nice short tutorial. I am still researching how to build a custom WP ecommerce theme. :)

    0
  • SiewShuen

    Friday, August 27th, 2010 10:55

    8

    I’m putting this page to my bookmarks.Will “steal” this to benefit my own projects. thanks for your effort !

    0
  • Goran

    Friday, August 27th, 2010 14:34

    7

    I am looking forward to the rest of the series, somehow i always found an excuse to not use WP as eCommerce, but with a write up like this i could be tempted to do it next time.

    0
  • Steffen

    Wednesday, August 25th, 2010 14:31

    2

    Great tutorial, I really appreciate that you shared that.

    I am trying to create my own theme too and I was wondering if in your next tutorial you could explain how to activate grid view manually?

    Cheers!

    0
  • DJaVuPixel

    Wednesday, August 25th, 2010 14:32

    3

    Glad you like it. This tutorial is the first out of a serie. At the end you will have a whole theme. I’m also thinking of making a WordPress theme “around” it…
    I would be glad if I get suggestions!

    0
  • David Costales

    Wednesday, August 25th, 2010 21:06

    4

    Nice tutorial Leonel, i’m already waiting for next chapters.

    0
  • DJaVuPixel

    Friday, August 27th, 2010 13:25

    6

    Hi Steffen,
    the official grid view is a premium feature. I will make a grid view but I am still thinking of making it even better… Such as a grid view with jQuery Quicksand which allows to filter content. In our example we could filter to only show macbooks. This could be useful if we have a few macbooks and also not too much products…

    0
  • Alicia Skkag

    Thursday, August 26th, 2010 11:29

    5

    when i was wp-e-commerce-them all the time it showz Error ….did you tell me what i do ?

    0
  • bslugnut

    Monday, February 7th, 2011 03:27

    14

    This is a great tutorial, although slightly advanced for this newbie. I have a few questions to confirm with you:

    Do you remove the text from the begining and end of your examples?
    Which page exactly do you input the 3rd set of code? Is it the djavu-shop.css?

    0
  • Carren

    Wednesday, October 19th, 2011 20:38

    22

    Good sharing of concept here in whatever way many thanks for posting valueble information..before I really could thank allowed coment on your blog, I buy a lot of information within you, If only I could be much more information within you .

    0
  • Brad

    Tuesday, November 29th, 2011 12:56

    24

    Hi, when i have completed this tutorial, the result is not what i expected, the javascript seems to expand well outside of the intended frame and the images which i have used (576 x 320) have been resized. Any suggestions?

    0
  • mark shirley

    Monday, February 20th, 2012 15:05

    25

    Is there a need to duplicate the theme folder and default css if I have moved the wp-ecommerce theme files from within wordpress.

    0
  • miguel

    Tuesday, April 24th, 2012 13:00

    27

    Download/Demo links are broken, so all this is useless :(

    0
    • Dainis Graveris

      Wednesday, April 25th, 2012 04:15

      28

      Thank you Miguel, for pointing that out, I wrote to past writer we had and I hope I will get back those links and even get back Leonel to writing some more e-commerce articles. Apologies for now.

      -1
  • Ryan

    Friday, March 2nd, 2012 06:02

    26

    Is there updated tutorial for latest version of WP Ecommerce plugin? unfortunately I can’t find “theme” folder under wp-e-commerce directory, I can see there is “wpsc-theme” is that what you’re talking for? but I can’t find default folder under that directory :(

    So I tried a bit experimenting my own
    1. copy “wpsc-theme” and create my own changing .css file (no luck)
    2. create theme file under “wpsc-theme” and still no luck :(

    Any reply is appreciated

    Thanks

    0
  • George

    Sunday, August 28th, 2011 01:51

    21

    Just a heads up for anyone new reading this, WP eCommerce has updated their plugin to use custom post types and a completely different templating structure. So don’t feel bad if you can’t get it to work after going through this tutorial. The big change came in version 3.8 and if you want, check out StorefrontThemes.com for pretty good themes for the plugin.

    0
  • bslugnut

    Monday, February 7th, 2011 22:42

    16

    When I completed these tasks, I receive the following error message when accessing the store via IE8 or FireFox:

    Parse error: syntax error, unexpected $end in /homepages/0/d267896428/htdocs/wbBlog/wp-content/uploads/wpsc/themes/djavu-shop/products_page.php on line 312

    Any assistance would be greatly appreciated.

    0
  • Dave

    Monday, April 4th, 2011 08:40

    17

    Well, a wordpress newbie like me just can’t seem to find the wpsc_query.php without which I’m completely helpless. A lil help here, please.

    0
    • roy

      Wednesday, April 6th, 2011 12:38

      18

      you need to install the wp-e-commerce plug in
      you can find it in wordpress.org plugins section

      0
  • biliop

    Monday, July 4th, 2011 15:36

    20

    With your help I found the file and everything is set right to me

    0
  • arya

    Saturday, April 16th, 2011 10:05

    19

    Hi.. great tutorial… but i got this error…

    Fatal error: Call to undefined function wpsc_display_categories() in C:\xampplite\htdocs\bcrs\wp-content\plugins\wp-e-commerce\themes\djavu-shop\products_page.php on line 62

    need some help her…

    0
  • miguel

    Tuesday, April 24th, 2012 13:00

    27

    Download/Demo links are broken, so all this is useless :(

    0
    • Dainis Graveris

      Wednesday, April 25th, 2012 04:15

      28

      Thank you Miguel, for pointing that out, I wrote to past writer we had and I hope I will get back those links and even get back Leonel to writing some more e-commerce articles. Apologies for now.

      -1
  • Ryan

    Friday, March 2nd, 2012 06:02

    26

    Is there updated tutorial for latest version of WP Ecommerce plugin? unfortunately I can’t find “theme” folder under wp-e-commerce directory, I can see there is “wpsc-theme” is that what you’re talking for? but I can’t find default folder under that directory :(

    So I tried a bit experimenting my own
    1. copy “wpsc-theme” and create my own changing .css file (no luck)
    2. create theme file under “wpsc-theme” and still no luck :(

    Any reply is appreciated

    Thanks

    0
  • mark shirley

    Monday, February 20th, 2012 15:05

    25

    Is there a need to duplicate the theme folder and default css if I have moved the wp-ecommerce theme files from within wordpress.

    0
  • Brad

    Tuesday, November 29th, 2011 12:56

    24

    Hi, when i have completed this tutorial, the result is not what i expected, the javascript seems to expand well outside of the intended frame and the images which i have used (576 x 320) have been resized. Any suggestions?

    0
  • Carren

    Wednesday, October 19th, 2011 20:38

    22

    Good sharing of concept here in whatever way many thanks for posting valueble information..before I really could thank allowed coment on your blog, I buy a lot of information within you, If only I could be much more information within you .

    0
  • George

    Sunday, August 28th, 2011 01:51

    21

    Just a heads up for anyone new reading this, WP eCommerce has updated their plugin to use custom post types and a completely different templating structure. So don’t feel bad if you can’t get it to work after going through this tutorial. The big change came in version 3.8 and if you want, check out StorefrontThemes.com for pretty good themes for the plugin.

    0
  • biliop

    Monday, July 4th, 2011 15:36

    20

    With your help I found the file and everything is set right to me

    0
  • arya

    Saturday, April 16th, 2011 10:05

    19

    Hi.. great tutorial… but i got this error…

    Fatal error: Call to undefined function wpsc_display_categories() in C:\xampplite\htdocs\bcrs\wp-content\plugins\wp-e-commerce\themes\djavu-shop\products_page.php on line 62

    need some help her…

    0
  • Dave

    Monday, April 4th, 2011 08:40

    17

    Well, a wordpress newbie like me just can’t seem to find the wpsc_query.php without which I’m completely helpless. A lil help here, please.

    0
    • roy

      Wednesday, April 6th, 2011 12:38

      18

      you need to install the wp-e-commerce plug in
      you can find it in wordpress.org plugins section

      0
  • bslugnut

    Monday, February 7th, 2011 22:42

    16

    When I completed these tasks, I receive the following error message when accessing the store via IE8 or FireFox:

    Parse error: syntax error, unexpected $end in /homepages/0/d267896428/htdocs/wbBlog/wp-content/uploads/wpsc/themes/djavu-shop/products_page.php on line 312

    Any assistance would be greatly appreciated.

    0
  • bslugnut

    Monday, February 7th, 2011 03:27

    14

    This is a great tutorial, although slightly advanced for this newbie. I have a few questions to confirm with you:

    Do you remove the text from the begining and end of your examples?
    Which page exactly do you input the 3rd set of code? Is it the djavu-shop.css?

    0
  • Anonymous

    Thursday, January 13th, 2011 20:29

    13

    I cannot figure out how to get my theme on the select theme menú… i tried everything, i also modificate the shopping_cart_page.php and the changes are not viewable… I’m furstrated, anyone? any clues?

    0
    • bslugnut

      Monday, February 7th, 2011 03:30

      15

      Verify that you uploaded the dejavu folder to the “\YOURBLOG\wp-content\uploads\wpsc\themes\” and not the “\YOURBLOG\wp-content\plugins\wp-e-commerce\themes\” directory. Let us know if this works for you!

      0
  • Jasmine

    Tuesday, October 5th, 2010 09:39

    12

    Nice short tutorial. I am still researching how to build a custom WP ecommerce theme. :)

    0
  • Theo

    Sunday, September 5th, 2010 21:19

    11

    Great Tut, looking forward to the next step in the process.

    0
  • Huw Rowlands

    Thursday, September 2nd, 2010 19:04

    10

    I recently built a wp commerce theme and could have done with this tut! i will be trying again soon!

    0
  • wetwetwafu

    Wednesday, September 1st, 2010 08:07

    9

    nice post, but it seems so basic.

    how about posting your latest products in the theme file where we can control the design and not using a widget or short codes?

    im hoping that the part two is more advance.. nice post sir.

    0
  • SiewShuen

    Friday, August 27th, 2010 10:55

    8

    I’m putting this page to my bookmarks.Will “steal” this to benefit my own projects. thanks for your effort !

    0
  • Goran

    Friday, August 27th, 2010 14:34

    7

    I am looking forward to the rest of the series, somehow i always found an excuse to not use WP as eCommerce, but with a write up like this i could be tempted to do it next time.

    0
  • DJaVuPixel

    Friday, August 27th, 2010 13:25

    6

    Hi Steffen,
    the official grid view is a premium feature. I will make a grid view but I am still thinking of making it even better… Such as a grid view with jQuery Quicksand which allows to filter content. In our example we could filter to only show macbooks. This could be useful if we have a few macbooks and also not too much products…

    0
  • Alicia Skkag

    Thursday, August 26th, 2010 11:29

    5

    when i was wp-e-commerce-them all the time it showz Error ….did you tell me what i do ?

    0
  • David Costales

    Wednesday, August 25th, 2010 21:06

    4

    Nice tutorial Leonel, i’m already waiting for next chapters.

    0
  • DJaVuPixel

    Wednesday, August 25th, 2010 14:32

    3

    Glad you like it. This tutorial is the first out of a serie. At the end you will have a whole theme. I’m also thinking of making a WordPress theme “around” it…
    I would be glad if I get suggestions!

    0
  • Steffen

    Wednesday, August 25th, 2010 14:31

    2

    Great tutorial, I really appreciate that you shared that.

    I am trying to create my own theme too and I was wondering if in your next tutorial you could explain how to activate grid view manually?

    Cheers!

    0
  • Krishna

    Wednesday, August 25th, 2010 12:11

    1

    This is something I really need to get my head around..esp for a possible project I have coming up!
    Bookmarked for sure!!
    thanks!! :)

    0

Comments are closed.

54.211.164.132 - unknown - unknown - US