Styling the Products Loop

The CSS styles of the product loop is inside the wp-checkout/css/wp-checkout.css stylesheet file. The primary styles are located at line #139 where the first style is for the div.products element class. The products loop of the WordPress shopping cart plugin is currently being output as an unordered list (UL) with each product being an alternate list item. The first item’s image floats to the left, the second floats to the right, the third to the left again and so they alternate through the loop. Below are some examples of what you can do with the loop by chaning the CSS styling.

• Align Products to the Left

Aligning Products to the Left

You can align all your products in the loop to the left if you prefer not to have the alternating list items with the left and right images. This can be done by changing some of the CSS code in the wp-checkout.css file. Below is a snippet of CSS which you can use as a reference for aligning product images and descriptions in the loop all to the left.

div.wpcoproducts {
width: 100%;
margin-top: 35px;
}

div.wpcoproducts ul {
margin: 0 0 0 0;
padding: 0 0 0 0 !important;
list-style: none;
text-indent: 0px !important;
}

div.wpcoproducts ul li {
display: block;
width: 100%;
border-bottom: 1px #999999 dotted;
margin: 0 0 10px 0;
padding: 5px;
text-indent: 0px;
}

div.wpcoproducts ul li:before {
content: "" !important;
}

div.wpcoproducts ul li.l {
text-align: left;
}

div.wpcoproducts ul li.r {
text-align: left;
}

div.wpcoproducts ul li h3 {
display: block;
width: 100%;
margin: 0 0 15px 0;
}

div.wpcoproducts ul li.l h3 {
text-align: left;
}

div.wpcoproducts ul li.r h3 {
text-align: left;
}

div.wpcoproducts ul li h3 a {
display: block;
width: 100%;
text-decoration: underline;
}

div.wpcoproducts ul li h3 a:hover {
text-decoration: none;
}

div.wpcoproducts ul li.l div.img {
float: left;
margin: 0 10px 5px 0;
}

div.wpcoproducts ul li.r div.img {
float: left;
margin: 0 10px 5px 0;
}

div.wpcoproducts ul li.r form {
text-align: right;
}

div.wpcoproducts ul li div.pricewrap {
margin: 0 0 10px 0;
}

div.wpcoproducts ul li span.price {
font-size: 16px;
color: maroon;
font-weight: bold;
}

div.wpcoproducts ul li span.pricedesc {
color: #999999;
font-size: 85%;
}