WordPress Shopping Cart Tutorial
In my search to create a fully functional shopping cart application I found the WP-eCommerce Plugin for WordPress. This plugin handles orders, works with most every payment service, handles shipping, inventory, etc!
The only thing people don’t like is that it isn’t easy to make a custom shopping cart with WP-eCommerce. So, in this tutorial I’ll show you how to make a Custom WordPress Shopping Cart.
I’ll build the shopping cart directly into the WordPress Theme I made in my How to Design a Website Tutorial.
You can get the theme used in this tutorial here Zipped Archive. Below this video, you’ll find all of the code changes I made to the original theme.
I also show you how to edit buttons using CSS, query the products in the database, use numerous WP e-Commerce functions and more.
If you like tutorials like these, share them
Code Changed in this Tutorial
INDEX.PHP
<?php get_header(); ?>
<div class="art-content-layout">
<div class="art-content-layout-row">
<div class="art-layout-cell art-sidebar1">
<?php get_sidebar('default'); ?>
<div class="cleared"></div>
</div>
<div class="art-layout-cell art-content">
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
<p><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/Zurn-FCs.png" /></p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
<p><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/Legend-Valve-FCs.png" /></p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 3</h2>
<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
<p><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/Sloan-FCs.png" /></p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 4</h2>
<div style="height:310px;"><!-- Extra div helps us set the correct height when image panel is cross-linked -->
<p><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/TandS-FCs.png" /></p>
</div>
</div>
</div>
<div class="nav-thumbs">
<a class="xtrig current-thumb" href="#1" rel="coda-slider-1"><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/ntt_fc_thumb.png" height="10px" width="10px"/></a>
<a class="xtrig" href="#2" rel="coda-slider-1"><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/ntt_fc_thumb.png" height="10px" width="10px"/></a>
<a class="xtrig" href="#3" rel="coda-slider-1"><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/ntt_fc_thumb.png" height="10px" width="10px"/></a>
<a class="xtrig" href="#4" rel="coda-slider-1"><img src="<?php bloginfo('template_url'); ?>/coda-slider-2/images/ntt_fc_thumb.png" height="10px" width="10px"/></a>
</div> <!-- End of nav-thumbs -->
</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
<div class="cleared"></div>
<div class="demo">
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
<div class="scroll-content">
<?php $my_query = new WP_Query( array( 'post_type' => 'wpsc-product', 'posts_per_page' => 11, 'wpsc_product_category'=>'Featured') );
while( $my_query->have_posts() ) : $my_query->the_post();?>
<div class="scroll-content-item ui-widget-header">
<div class="prodImage">
<img src="<?php echo wpsc_the_product_thumbnail(125,125,'','single'); ?>" class="theProduct" alt="<?php the_title();?>" />
</div>
<div class="prodName">
<a href="<?php echo get_permalink( $product->ID ); ?>" title="<?php echo get_the_title( $product->ID ); ?>"><?php $ntt_the_title = get_the_title($id); echo substr($ntt_the_title, 0, 43);?></a>
</div>
<div class="prodMoreInfoBut">
<input type="button" value="More Info" class="nttSubmitBut"
onClick="window.location.href='<?php echo get_permalink( $product->ID ); ?>';" />
</div>
<div class="prodAddToCartBut">
<?php echo wpsc_add_to_cart_button($id); ?>
</div>
</div> <!-- END OF scroll-content-item -->
<?php endwhile; ?>
</div> <!-- End of scroll-content -->
<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
<div class="scroll-bar"></div>
</div> <!-- End of scroll-bar-wrap -->
</div> <!-- End of scroll-pane -->
</div><!-- End of demo -->
<div class="cleared"></div>
</div>
<div class="art-layout-cell art-sidebar2">
<?php get_sidebar('secondary'); ?>
<div class="cleared"></div>
</div>
</div>
</div>
<div class="cleared"></div>
<?php get_footer(); ?>
JQSLIDER2/CSS/JQUERYPRODSLIDER.CSS
.demo {
width: 485px;
}
#demo-frame > div.demo { padding: 10px !important; }
.scroll-pane { overflow: auto; width: 99%; float:left; }
.scroll-content { width: 1930px; float: left; background-color: #FFF;}
.scroll-content-item { width: 150px; height: 215px; float: left; margin: 10px; margin-right: 0px; font: bold 11px 'PT Sans',arial,sans-serif; text-align: center; background: #FFF; border: 0px;}
* html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
.prodImage {
border: 1px solid #666;
height: 135px;
width: 135px;
}
.theProduct {
height: 125px;
width: 125px;
padding: 5px;
}
.prodName {
position: relative;
left: -6px;
top: 15px;
height: 30px;
}
.prodName a {
text-decoration: none;
}
.prodMoreInfoBut {
/* background-color: #535353; */
height: 17px;
width: 62px;
padding-top: 4px;
position: relative;
top: 25px;
}
/*
div.prodMoreInfoBut a{
text-decoration: none;
color: #fff;
font-size: 10px;
}
.prodMoreInfoBut:hover {
background-color: #666;
}
*/
.nttSubmitBut {
background-color: #535353;
font-size: 60%;
font-weight: bold;
color: #fff;
}
.nttSubmitBut {
background-color: #535353;
font-size: 60%;
font-weight: bold;
color: #fff;
}
.prodAddToCartBut {
/* background-color: #3c89b5; */
height: 17px;
width: 76px;
padding-top: 4px;
position: relative;
top: 4px;
left: 65px;
font-size: 10px;
}
/*
div.prodAddToCartBut a{
text-decoration: none;
color: #fff;
}
.prodAddToCartBut:hover {
background-color: #666;
}
*/
Hi derek,
it’s my amro, how asked you about this tutorials .
i like just to say thank you .
You’re very welcome. Many more tutorials are coming on this topic. I hope you like them
hi derek
a my best teacher
i learnd from you a lot
i am sure that your daughter will be proud of you when she grow up. you’re the best international teacher
thank you very mutch
Thank you very much. I don’t know any other languages though. I used to know German and how to read Chinese, but I have since forgotten them 🙁
What was the video called before this video.
Where is the link to the next video? And How do I register.
The video series that started this was called How to Design a Website. In it I made the theme used in the shopping cart.
hi derek,
i have a problem that i think there is nobody in this world , who can teach me. actually since my childhood i learned everything by myself.
but after watching your tutorials. i think finally i got a teacher. you r simply superb.
long live my teacher
-maker14
Thank you for the kind words 🙂 I also learned everything from books. I guess what makes me different is that I don’t care about views or money. If I think it would be worth while to make a series of tutorials on a topic I just do it. I’m happy that you are enjoying them. Always feel free to ask questions
On your code here on the page. You say all changes Made? It doesn’t seem to have your new while loop. Do you have the new code so I don’t have to type in all the code from scratch? I’m making a featured products widget
Never mind it’s there. Sorry
I’m glad it is fixed 🙂
I’m in my widget but the while loop doesn’t seem to be working correctly. Do I have to include some file from e-Commerce plug in
Yes you need the Wp E-Commerce plugin for this to work. It is free
Yes I have the plugin going . For some reason the while loop Just skips out. I used your social link widget plug in as a starter for my widget. Then I just Copied in your while loop . I also left comment On youtube. By the way I love the way you do your videos. You exude confidence to me that I can do it too
You can do it. I’d make sure there aren’t any conflicting plugins. There shouldn’t be. Are you getting any errors?
No errors. Can I get my code to you somehow. Probably tomorrow? Just not sure if I should post it here or not?
I’ll see if I can get you the updated theme. I’ll try to put a link to it in this tutorial because it is way to big to email
It didn’t all fit
I just install your theme and the your prescribed plugin is my site complete as a shoping cart or i else need something…
Please guide as i am new to wordpress.
I just install your theme and the your prescribed plugin is my site complete as a shoping cart or i else need something…
Please guide as i am new to wordpress
Everything you need is covered in this tutorial http://www.newthinktank.com/2012/02/create-an-online-store/
Feel free to ask any questions you have
hi derek ; you ve been the best guide to my becomming a programmer. i learnt alot from you n wished i knew this site along time ago. do you mind if i start downloadin all thes files n videos ? God loves man… i never knew.
Hi, Thank you 🙂 I’m very happy that you like them. I don’t care what anyone downloads. The only thing i request is that nobody re-uploads the videos to YouTube. That happened once and YouTube started blocking my videos, which was a mess. Other then that do what ever you’d like.