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

  • Just to clarify: what's going to be the difference between 'Buy Now' and 'Add to Cart'? – Andy Myers Dec 11 '16 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 – Salman Dalal Dec 11 '16 at 10:58
  • 4
    I'm voting to close this question as off-topic because Its purely css related Question – Murtuza Zabuawala Dec 26 '16 at 5:54
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

| improve this answer | |
  • Okzz i will update u – Salman Dalal Dec 26 '16 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 – Salman Dalal Dec 26 '16 at 5:21
  • @SalmanDalal check updated answer – Murtuza Zabuawala Dec 26 '16 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 – Salman Dalal Dec 26 '16 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.

| improve this answer | |
  • I updated my answer. No need to add hidden input. – piyush_systematix Dec 11 '16 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. – Salman Dalal Dec 12 '16 at 6:45
  • You need to add it in the phtml file from where Add to Cart button is coming – piyush_systematix Dec 12 '16 at 8:02
  • Can you suggest me the program name – Salman Dalal Dec 12 '16 at 8:15
  • Please see my update – piyush_systematix Dec 14 '16 at 13:25

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