Mini Cart (with item count) for MarketPress – done!

Hey All!

I really needed to have a little shopping cart icon integrated into the header / menu of one of my projects… and I absolutely needed it to update instantly with the quantity of items in the cart, just like does it.

I really wanted to update the mp_items_count_in_cart() via ajax… but I ran into a bunch of issues accessing the cart cookie and all that mess. @Aaron, I wish there were some hooks like “mp_add_to_cart” and “mp_empty_cart” added to accommodate this via ajax – but I couldn’t find them if they exist or figure out exactly how to make it fly…

However, I was able to accomplish the task with some jQuery – a little “hacky”, but atleast it’s a working solution that doesn’t hack marketpress and should be able to work on anyone theme. The jquery simply totals the “qty” column of the table rows of marketpress’ cart widget DOM elements.

So below you will see my solution:

1. html & javascript:

<div id=”mini-cart-menu”>

<div class=”items-in-cart-menu”><?php echo mp_items_count_in_cart(); ?></div>

<div class=”mini-cart-container”>

<div class=”mini_cart”><!–div that we want to hide–>

[catalyst_widget_area name=”cart”]



<script type=”text/javascript”>


jQuery(‘.mini-cart-container’:wink:.css(‘cursor’, ‘pointer’:wink:;;


jQuery(‘#mini-cart-menu’:wink:.on(‘hover’,function() {

var $this = jQuery(‘.mini-cart-container’:wink:;

if ($this.hasClass(“cart_hidden”:wink:) {


} else {





jQuery(document).ready(function() {

(function ($) { //now you can use ‘$’ in place of ‘jQuery’

$(document).ajaxComplete(function(e, xhr, settings) {

var tot = 0;


var qty = $(this).html() – 0;


tot += qty;








2. CSS:


display: none;



display: block;



background: url(/modonmain/wp-content/themes/dynamik/css/images/cart_over.jpg) no-repeat;

height: 64px;

width: 80px;

float: right;

color: #000;



background: url(/modonmain/wp-content/themes/dynamik/css/images/cart.jpg) no-repeat;

height: 64px;

width: 80px;

float: right;

color: #FF9300;


#mini-cart-menu .items-in-cart-menu{

font-size: 24px;

padding-top: 14px;

padding-left: 4px;

text-align: center;

width: 100%;



width: 300px;

background: black;

color: white;

float: right;

position: relative;

margin-top: 28px;

margin-right: 220px;

padding: 15px;

z-index: 99999;

border: 1px solid white;


.mini_cart h4{

color: white !important;



height: auto;

width: 300px;


.mini-cart-container .widget-wrap, .mini-cart-container .widget{

background-color: transparent !important;


.mp_cart_contents_widget th {

background: #333;


.mp_cart_contents_widget tr, .mp_cart_contents_widget td, .mp_cart_contents_widget tbody {

border: 1px solid #333;


.mini-cart-container .mp_cart_contents_widget{


color: white;



overflow: hidden;

color: #ccc;


you can see this in action temporarily at:

and after Feb. 1, 2013 @

Now, for all of you wondering about that [catalyst_widget_area name=”cart”] shortcode – This is a custom widget area that I created with my theme framework “catalyst” – I just added the marketpress cart widget there. Catalyst allows me to create custom widget areas anywhere I want – to learn more about catalyst check out my article here:

If you don’t have a theme framework like catalyst (that supports adding custom widget areas) then you will need to use the following tutorial from the wordpress codex and then place the marketpress cart in the widget area you create:

I hope this makes sense and is helpful to others… let me know if you all have any trouble implementing – Or have suggestions on how to accomplish this a “cleaner” way.