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