2

I am building an ecommerce website named "bookslab.in". I want to move the extra images of product down below the main image of the product. I am attaching the screenshot of where i want to move the extra images. Any help will be appreciated. I want to move the images below the main big image.

enter image description here

3
  • Just to clarify: what's going to be the difference between 'Buy Now' and 'Add to Cart'?
    – Andy Myers
    Dec 11, 2016 at 9:52
  • ADD TO CART button is used to add the products in the cart to buy later on & BUY NOW button is used to buy the products directly going on the checkout page without adding the products in the shopping cart Dec 11, 2016 at 10:58
  • 4
    I'm voting to close this question as off-topic because Its purely css related Question Dec 26, 2016 at 5:54

2 Answers 2

1

just add below css in your css file

add this line in this css file http://www.bookslab.in/skin/frontend/rwd/default/css/styles.css

.more-views {
   clear: both;
}
.product-image, .no-touch .product-img-box .product-image:hover:not(.zoom-available){
      display: initial;
}

Other than this you have to check your css for other block

4
  • Okzz i will update u Dec 26, 2016 at 4:55
  • Cool @Murtuza it works for me, but how to fix the white space to right side of the main image after moving the small images down, which was acquired by small images Dec 26, 2016 at 5:21
  • @SalmanDalal check updated answer Dec 26, 2016 at 5:29
  • Thanks @Murtuza again. Is it possible to align the main image with the name of the book which is to the right of the main image in blue. Want to align from top. Thanks in advance Dec 26, 2016 at 5:52
2

Add buy now button.

<button onclick="buyNow();return false;" id="buy_now">Buy Now</button>

And then add ajax code.

<script>
    var addToCartForm = new VarienForm('product_addtocart_form', true);
    function buyNow(){
        if (addToCartForm.validator.validate()){
            jQuery.ajax({
                url:jQuery('#product_addtocart_form').attr('action'),
                type:'POST',
                data:jQuery('#product_addtocart_form').serialize()+'&isAjax=1',
                success:function(){
                    window.location.href='/checkout/onepage/';
                }
            })
        }
    }
</script>

I see on your website you already moved product images.

UPDATE

You need to add above code in

/app/design/frontend/rwd/default/template/catalog/product/view/addtocart.phtml

where rwd is package name and default is theme name.

7
  • I updated my answer. No need to add hidden input. Dec 11, 2016 at 13:19
  • Sorry for the late reply. In which program i have to add this function & button. Can you tell me the program name & in which section of the program to add above code. Dec 12, 2016 at 6:45
  • You need to add it in the phtml file from where Add to Cart button is coming Dec 12, 2016 at 8:02
  • Can you suggest me the program name Dec 12, 2016 at 8:15
  • Please see my update Dec 14, 2016 at 13:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.