Monday, January 14, 2013

Remove Discount and Estimated shipping form Checkout page

To remove both Discount and Estimated shipping you need to edit checkout.xml file which is located at /app/design/frontend/base/default/layout/checkout.xml


go to line no: 89



<block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon" template="checkout/cart/coupon.phtml"/>
                <block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping" template="checkout/cart/shipping.phtml"/>
                <block type="checkout/cart_crosssell" name="checkout.cart.crosssell" as="crosssell" template="checkout/cart/crosssell.phtml"/>

       

comment out the highlighted portion like this


<!--
                <block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon" template="checkout/cart/coupon.phtml"/>
                <block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping" template="checkout/cart/shipping.phtml"/>

 -->


you are done. If still both the blocks appear clear cache. So finally your checkout page will look like this.



Thursday, January 10, 2013

Set default quantity of product to 1 in magento


By default magento takes quantity value to be "0". To change this you just need to edit addtocart.phtml file located at app/design/frontend/default/[your theme]/template/catalog/product/view/addtocart.phtml


<?php if($_product->isSaleable()): ?>
    <fieldset class="add-to-cart-box">
        <legend><?php echo $this->__('Add Items to Cart') ?></legend>
        <?php if(!$_product->isGrouped()): ?>
        <span class="qty-box"><label for="qty"><?php echo $this->__('Qty') ?>:</label>
        <input name="qty" type="text" class="input-text qty" id="qty" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" /></span>
        <?php endif; ?>
        <button class="form-button" onclick="productAddToCartForm.submit()"><span><?php echo $this->__('Add to Cart') ?></span></button>
    </fieldset>
<?php endif; ?>



just change the highlighted section to value="1" and you are done.

Monday, January 7, 2013

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.


Wednesday, January 2, 2013

Change Discount to You save in Magento Product / Category Page

Hi ppl If you need to change "Discount" to something like "You Save" then its very simple all you need to do is go to

/app/design/frontend/default/[your template]/template/catalog/product/price.phtml

open it and then go to line no: 360

Change Discount to You save in Magento Product / Category Page








as you can see in the above screenshot we have changed Discount to You save. Once you done that save the file and you are done.


:)

enjoy

PS: This will replace Discount from both Product page and category page.


Friday, December 28, 2012

Change price box layout in magento product page

If you want to bring regular price, special price and discount in same line as shown below then u need to follow 2 easy steps.



Step 1:
go to the following location of your magento installation : /app/design/frontend/default/[your theme]/template/catalog/product/price.phtml

find the below code


<?php else: ?>
            <p class="special-price">
                <span class="price-label"><?php //echo $this->__('Web Price:') ?></span>
                <span class="price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
                    <?php echo $currency->formatPrecision($_finalPrice,0,false) ?>
                </span>
                <br/></p><p class="regular-price"><span><?php echo $this->__('Discount: ') ?></span>
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"><?php echo '<span class="perecent-price">'.' ('.$_savingPercent.'%)'.'</span>'; ?></span>
            </p>

now we just need to edit the above highlighted code. so the final code will look like this.


<?php else: ?>
            <p class="special-price">
                <span class="price-label"><?php //echo $this->__('Web Price:') ?></span>
                <span class="price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
                    <?php echo $currency->formatPrecision($_finalPrice,0,false) ?>
                </span>
                </p><span class="regular-price"><?php echo $this->__('Discount: ') ?></span>
<span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>"><?php echo '<span class="perecent-price">'.' ('.$_savingPercent.'%)'.'</span>'; ?></span>
         

what we have done here is simply removed the <br/> tag and removed <p> tag. The CSS style given to <p> tag has been now given to <span> please see the highlighted portion above.

Once you have done this you will need to change your style.css file so that Discount would not mess up category page.


Step 2:
Now go to your styles.css file there find .special-price .price and increase the width.


Before

.special-price .price {
  1. floatleft;
  2. width70px;



After

.special-price .price {
  1. floatleft;
  2. width140px;   <------ Increase this value depending on your category page layout



This will push Discount to next line on category page. If you dont edit your css than category page will be in mess like this.