Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

put add to cart button and price into 1 line
 
xiaolin
Member
 
Total Posts:  47
Joined:  2008-05-04
 

Hello

in the list mode i can see the add to cart button and the price are in 1 line but in the grid mode they are different

Can someone tell me where is the css block i should look into to change the grid mode then my add to cart button and the price will be in 1 line?

Or if you can tell me exactly how to achieve that , it will be great

thanks all

 
Magento Community Magento Community
Magento Community
Magento Community
 
xiaolin
Member
 
Total Posts:  47
Joined:  2008-05-04
 

hi, can someone help me?

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Hello Xiaolin,

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($_producttrue?>
                                
</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 */
}

.listing-type-list .product-price-box{
    float
left;
}

.listing-type-list .product-action-box{
    float
right;
    
padding-left10px;
    
border-left1px solid #E2E2E2;
}

Hope that helps.

Bon courage !

 
Magento Community Magento Community
Magento Community
Magento Community
 
xiaolin
Member
 
Total Posts:  47
Joined:  2008-05-04
 

hello magento-marie

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

Thanks again

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top