The phtml file that rules the “list” display is app/design/frontend/yourinterface/yourtheme/template/catalog/product/list.phtml.
In there, you’ll find the lines that rule the price and the add to cart button.
In my list.phtml template, I added several blocks that allows me to separate the price and the “add to cart” button into 2 blocks. They are wrapped by another block, and then in the stylesheet, I can style them :
<div class="product-actions"><!-- this is the wrapping box I created --> <?php if($_product->getRatingSummary()): ?> <?php echo $this->helper('review/product')->getSummaryHtml($_product) ?> <?php endif; ?>
<div class="product-price-box"><!-- this is the box for the pricing --> <?php echo $this->helper('catalog/product')->getPriceHtml($_product, true) ?> </div> <div class="product-action-box"><!-- this is the box for the cart button --> <?php if($_product->isSaleable()): ?> <button class="form-button btn_cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button> <?php else: ?> <div class="out-of-stock"><?php echo $this->__('Out of stock') ?></div> <?php endif; ?> </div> </div>
And here are the css that comes with it :
.listing-type-list .product-actions{ /* Here is the wrapping box. I did not need any style here, maybe you will */ }
Thank you very much for you help. i solved my problem with a simple way but im not sure if it works well with IE6 and other browsers. Your solution is awesome and i think i will implement it
