want to move the extra images section below the main image in all product pages [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Magento Stack Exchange.

Closed 3 years ago.

Improve this question

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.

Answer 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

Answer 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.