Total Followers 132,503
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
What will we learn in this tutorial?
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).
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.
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
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:
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
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:
<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.
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 ;-)
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?
Get The Only Freelancer crash course you will ever need to read!
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.
Tuesday, April 24th, 2012 13:00
Download/Demo links are broken, so all this is useless :(
Wednesday, April 25th, 2012 04:15
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.
Friday, March 2nd, 2012 06:02
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
Monday, February 20th, 2012 15:05
Is there a need to duplicate the theme folder and default css if I have moved the wp-ecommerce theme files from within wordpress.
Tuesday, November 29th, 2011 12:56
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?
Wednesday, October 19th, 2011 20:38
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 .
Sunday, August 28th, 2011 01:51
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.
Monday, July 4th, 2011 15:36
With your help I found the file and everything is set right to me
Saturday, April 16th, 2011 10:05
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…
Monday, April 4th, 2011 08:40
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.
Wednesday, April 6th, 2011 12:38
you need to install the wp-e-commerce plug in
you can find it in wordpress.org plugins section
Monday, February 7th, 2011 22:42
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.
Monday, February 7th, 2011 03:27
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?
Thursday, January 13th, 2011 20:29
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?
Monday, February 7th, 2011 03:30
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!
Tuesday, October 5th, 2010 09:39
Nice short tutorial. I am still researching how to build a custom WP ecommerce theme. :)
Sunday, September 5th, 2010 21:19
Great Tut, looking forward to the next step in the process.
Thursday, September 2nd, 2010 19:04
I recently built a wp commerce theme and could have done with this tut! i will be trying again soon!
Wednesday, September 1st, 2010 08:07
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.
Friday, August 27th, 2010 10:55
I’m putting this page to my bookmarks.Will “steal” this to benefit my own projects. thanks for your effort !
Friday, August 27th, 2010 14:34
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.
Friday, August 27th, 2010 13:25
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…
Thursday, August 26th, 2010 11:29
when i was wp-e-commerce-them all the time it showz Error ….did you tell me what i do ?
Wednesday, August 25th, 2010 21:06
Nice tutorial Leonel, i’m already waiting for next chapters.
Wednesday, August 25th, 2010 14:32
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!
Wednesday, August 25th, 2010 14:31
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!
Wednesday, August 25th, 2010 12:11
This is something I really need to get my head around..esp for a possible project I have coming up!
Bookmarked for sure!!
thanks!! :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Krishna
Wednesday, August 25th, 2010 12:11
This is something I really need to get my head around..esp for a possible project I have coming up!
Bookmarked for sure!!
thanks!! :)
wetwetwafu
Wednesday, September 1st, 2010 08:07
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.
Huw Rowlands
Thursday, September 2nd, 2010 19:04
I recently built a wp commerce theme and could have done with this tut! i will be trying again soon!
Theo
Sunday, September 5th, 2010 21:19
Great Tut, looking forward to the next step in the process.
Anonymous
Thursday, January 13th, 2011 20:29
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?
bslugnut
Monday, February 7th, 2011 03:30
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!
Jasmine
Tuesday, October 5th, 2010 09:39
Nice short tutorial. I am still researching how to build a custom WP ecommerce theme. :)
SiewShuen
Friday, August 27th, 2010 10:55
I’m putting this page to my bookmarks.Will “steal” this to benefit my own projects. thanks for your effort !
Goran
Friday, August 27th, 2010 14:34
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.
Steffen
Wednesday, August 25th, 2010 14:31
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!
DJaVuPixel
Wednesday, August 25th, 2010 14:32
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!
David Costales
Wednesday, August 25th, 2010 21:06
Nice tutorial Leonel, i’m already waiting for next chapters.
DJaVuPixel
Friday, August 27th, 2010 13:25
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…
Alicia Skkag
Thursday, August 26th, 2010 11:29
when i was wp-e-commerce-them all the time it showz Error ….did you tell me what i do ?
bslugnut
Monday, February 7th, 2011 03:27
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?
Brad
Tuesday, November 29th, 2011 12:56
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?
mark shirley
Monday, February 20th, 2012 15:05
Is there a need to duplicate the theme folder and default css if I have moved the wp-ecommerce theme files from within wordpress.
Ryan
Friday, March 2nd, 2012 06:02
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
miguel
Tuesday, April 24th, 2012 13:00
Download/Demo links are broken, so all this is useless :(
Dainis Graveris
Wednesday, April 25th, 2012 04:15
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.
Carren
Wednesday, October 19th, 2011 20:38
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 .
Dave
Monday, April 4th, 2011 08:40
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.
roy
Wednesday, April 6th, 2011 12:38
you need to install the wp-e-commerce plug in
you can find it in wordpress.org plugins section
bslugnut
Monday, February 7th, 2011 22:42
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.
arya
Saturday, April 16th, 2011 10:05
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…
George
Sunday, August 28th, 2011 01:51
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.
biliop
Monday, July 4th, 2011 15:36
With your help I found the file and everything is set right to me