Change proceed to checkout button in Magento

To change magentos proceed to checkout button than you just need to edit 2 phtml file and add some class to your css.


Step 1: Changing CSS

Checkout now as you can see above is a image used as button. So we use css to call this image.

go to custom.css or style.css both of them will be located at /skin/frontend/default/[your theme]/css

we will use custom.css for this example. First upload a image in your media folder then copy and past the below css in your file.

.buttoncheckout
{ background-image: url('http://[your url]/media/checkout-button.png');
   background-color: transparent;
   background-repeat: no-repeat;
   border: none;
   cursor: pointer;
   height: 50px;
   float:right;          <----------- please keep this float to right
   margin:0px;
   width: 200px; }


Step 2: Adding buttoncheckout  class to checkout button

Go to app/design/frontend/default/default/template/checkout/onepage/link.phtml if u dont find this file here then it will be located in your base folder which is located at  app/design/frontend/base/default/template/checkout/onepage/link.phtml

Here you will see the following code.




<?php if ($this->isPossibleOnepageCheckout()):?>
    <button type="button" title="<?php echo $this->__('Proceed to Checkout') ?>" class="button btn-proceed-checkout btn-checkout<?php if ($this->isDisabled()):?> no-checkout<?php endif; ?>"<?php if ($this->isDisabled()):?> disabled="disabled"<?php endif; ?> onclick="window.location='<?php echo $this->getCheckoutUrl() ?>';"><span><span><?php echo $this->__('Proceed to Checkout') ?></span></span></button>
<?php endif?>





the above highlighted portion is what we are going to replace with our css class and also going to remove proceed to checkout as it will come as text over our inage which we dont want. Thus the final thing will be like this.





<?php if ($this->isPossibleOnepageCheckout()):?>
    <button type="button" title="<?php echo $this->__('Proceed to Checkout') ?>" class="buttoncheckout<?php if ($this->isDisabled()):?> no-checkout<?php endif; ?>"<?php if ($this->isDisabled()):?> disabled="disabled"<?php endif; ?> onclick="window.location='<?php echo $this->getCheckoutUrl() ?>';">
    <span><span><?php // echo $this->__('Proceed to Checkout') ?></span></span></button>
<?php endif?>






Step 3: Removing proceed to checkout which comes over besides shopping cart

Once you have done this, you will notice another checkout button coming near shopping cart. Dont worry about it can be removed from here. go to /app/design/frontend/default/default/template/checkout/cart.phtml
if u cant find it then check here /app/design/frontend/base/default/template/checkout/cart.phtml open the file in editor and find the following code.

Line no 42:



<?php if(!$this->hasError()): ?>
        <ul class="checkout-types">
        <?php foreach ($this->getMethods('top_methods') as $method): ?>
            <?php if ($methodHtml = $this->getMethodHtml($method)): ?>
            <li><?php  echo $methodHtml; ?></li>
            <?php endif; ?>
        <?php endforeach; ?>
        </ul>
        <?php endif; ?>




This portion is what is calling the extra proceed to checkout button. Just comment this out and you will be ok like this.

<li><?php /*  echo $methodHtml; */ ?></li>

so in the end your checkout page will look like this.