A quick how to on forcing product collection and category pages to use a list only layout.

Forcing List View Styling

Forcing List View Styling

To force categories to only show products in the list view, edit your theme’s custom shopp.css template file. Comment out or delete lines 39, 42-43 in your shopp.css template file. The line numbers provided are for the unedited form of your shopp.css template file. If you’ve made any changes to your custom shopp.css these numbers may not be accurate.

Next, you will need to change all of the #shopp.list … style declarations to use #shopp.catalog instead. These can be found around lines 56-62.

/* #shopp ul.products li .details { float: none; } (~line 39) */

/* Hide the product summary in the grid view */
/* (Lines 42-43)
#shopp ul.products li .summary { display: none; }
#shopp ul.products li .listview { display: none; } 

/* Product List View */
#shopp.catalog ul.products li { float: none; width: 100%; clear: both; padding-bottom: 10px;}
#shopp.catalog ul.products li.product {  border-bottom: 1px solid #ddd; }
#shopp.catalog ul.products li div.frame { width: 100%;  text-align: left; }
#shopp.catalog ul.products li img { float: left; margin-right: 10px; }
#shopp.catalog ul.products li .details { float: left; width: 65%;}
#shopp.catalog ul.products li .listview { display: block; }

Finally, the shopp(‘catalog’,’views’) tag should be removed from the catalog.php content template file and the category.php content template file as the view toggle controls will no longer have any apparent function.


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.