WordPress Shopping Cart Tutorial

Wordpress Shopping Cart TutorialIn 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;
	}
	*/

24 Responses to “WordPress Shopping Cart Tutorial”

  1. amro says:

    Hi derek,

    it’s my amro, how asked you about this tutorials .
    i like just to say thank you .

  2. supprof1 says:

    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

    • admin says:

      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 ๐Ÿ™

  3. Anonymous says:

    What was the video called before this video.

  4. TimCarey says:

    Where is the link to the next video? And How do I register.

  5. mamun says:

    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

    • admin says:

      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

  6. TimCarey says:

    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

  7. TimCarey says:

    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

  8. TimCarey says:

    It didn’t all fit

  9. ahmad says:

    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.

  10. ahmad says:

    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

  11. saladin says:

    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.

    • Derek Banas says:

      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.

Leave a Reply

Your email address will not be published.

Google+