Create WooCommerce Custom Cart Widget


About The Author
Cabe Nolan is the founder of WP Cover where he shares his insight into WordPress, development, & entrepreneurship. Outside of WPCover, Cabe continues to run a successful WordPress development firm, Bold City Design as well as a few high profile websites, Arrivala, Two Way Resume, Dock Skipper, and a successful outdoors brand, DolfinPack.







Create WooCommerce Custom Cart Widget

There are some great and very easy to implement widgets that allow you to display the WooCommerce shopping cart contents on any page of your WordPress site.  While those widgets are prefect for 90% of implementations, sometimes you have to go custom.  The below code outlines a basic procedure for creating a custom WooCommerce cart widget. This widget could be customized in many different ways to mesh with your website’s style.

The below code is basically plug and play.  Add it anywhere within your active theme pages to display the widget.

 

<?php if ( WC()->cart->get_cart_contents_count() !== 0 ) { ?>
	<div class="custom-cart-items">
		<h3>Your Cart</h3>
		<?php $i=0; foreach ( WC()->cart->get_cart() as $cart_item ) { $i++; ?>
			<?php if($i < 4) { ?>
				<div class="custom-cart-item">
					<h5><a href="<?php echo $cart_item['data']->get_permalink(); ?>" target="_blank"><?php echo $cart_item['data']->get_title(); ?></a></h5>
					<p>x<?php echo $cart_item['quantity']; ?> @ <?php echo money_format('$%i', $cart_item['data']->get_price()); ?> each</p>
				</div>
			<?php } elseif($i == 4) { ?>
				<div class="custom-cart-item">
					<h5><a href="<?php echo esc_url( home_url('/cart') ); ?>" target="_blank">... more ></a></h5>
				</div>
			<?php } else { break; } ?>
		<?php } ?>
	</div>
	<div class="custom-cart-checkout">
		<a class="btn-checkout-green" href="<?php echo esc_url( home_url('/checkout') ); ?>">Checkout</a>
	</div>
<?php } else { ?>
	<div class="custom-cart-items">
		<h3>Your Cart</h3>
		<p class="empty-cart">... is still empty at the moment</p>
	</div>
	<div class="custom-cart-checkout">
		<a class="btn-checkout-disabled">Checkout</a>
	</div>
<?php } ?>

Share Your Thoughts

Leave a Reply

Your email address will not be published.


Related Stuff You Might Like







WordPress News, Tips, & Code Snippets

Join the WP Cover mailing list and get wordpress news, tips, code snippets, security warnings, and more delivered right to your inbox.  We won't flood your inbox, newsletters typically go out every 1-2 weeks unless it involves an important security release.

You have Successfully Subscribed!