Keep your shopping cart looking pretty even when you have complex product variants that make the options menu too wide. This quick tip shows you had to add a CSS class you can target, and fix the width to keep it in check.

Styling Item Options in the Cart

Styling Item Options in the Cart

In the default cart.php template, each item in the cart that has variations will show a drop-down menu of product variant options. In some cases, with lots of variant levels, the menu may become too large for the layout and throw things out of whack.

To handle this situation you can assign a fixed size for the menu that keeps it within the bounds of your layout. Each item option menu has it’s own ID assigned already, but to collectively assign a CSS style, it’s better to use a class. You’ll need to add a CSS class option to the options menu that your custom CSS can target.

In your cart.php template file, find the line (around line 23 in the default template):

<?php shopp('cartitem','options'); ?>

…and add a class option to it:

<?php shopp('cartitem','options','class=item-options'); ?>

Then add CSS to the shopp.css template file (or your theme’s styles.css) to force the width:

#cart table.cart td select.item-options { width: 150px; }


Jonathan was born at an early age and began designing and developing shortly after. He is the founder of Ingenesis Limited and Project Lead on the Shopp e-commerce plugin for WordPress. He lives and works in the heart of the midwest US with his family. He fancies himself a designer of code, and is only slightly addicted to coffee.

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.