I have a background image for the cart items totals on the homepage in the header and the quatity is display as a number in the middle of this image. It is an image of a bag in a gold color. I am using css for this background image. I would like it to turn green when the quantity in the cart is 1 or above. What I am wondering is how I can change the background image to another one when an item is added to the cart?

1 Answer 1


Set a class based on whether the cart contains any items. For example:

<?php $class = $this->getSummaryCount() > 0 ? 'cart-with-items' : 'empty-cart' ?>
<div id="cart-header-block" class="<?php echo $class ?>">

Then create two different CSS rules - one for each possible state:

.empty-cart { background-image: url('gold.png'); }
.cart-with-items { background-image: url('green.png'); }
  • Great! I'd appreciate if you could mark this answer as accepted (by clicking the checkmark icon). Commented Aug 13, 2014 at 12:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.