javascripttwitter-bootstrap-3opencartopencart2.xopencart2.3

Need help to move Add to cart button above the description tab on product page in opencart v2.3 on smaller screens


In opencart v2.3, Product page hierarchy on smaller screens is as follows:

  1. Header
  2. Product Image
  3. Description and Review tab
  4. Price, options, Add to cart button
  5. Footer

This happens only on smaller screens, Add to cart button on product page in opencart is below the description tab. If I have a long description then it will effect sales.

I want to move the add to cart button above the the description tab and below the additional images.

This is my Website www.festivetaste.com and everything works well on larger screens.

This is the screen shot on smaller screen


Solution

  • You can use jquery, I tested this in default theme.

    Add this to your product.tpl before <?php echo $footer; ?>:

    <script>
        $(function(){
            // We create a function
            function moveCart(){
                // If user screen is smaller than 768 pixel
                if($(window).width() < 768 ){
                    /*
                        select cart area including cart button, options, product title and ...
                        if you want to only move cart button use '#product' instead of '#content > .row > .col-sm-4'
                    */
                    $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
                    // now move it
                    $('.moved-div').insertAfter('.thumbnails');
                } else {
                    /*
                        if user resized his/her screen width and now screen is wider than 767 pixel and we moved cart area before, move it to its original place.
                    */
                    if($('.moved-div').length){
                        $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
                    }
                }
            }
    
            // run function 
            moveCart();
    
            $(window).resize(function(){
                // run function again if user resized screen
                moveCart();
            })
        });
    </script>
    

    note that if you assign any modules to column-right or column left in your product page Opencart change these two classes:col-sm-4, col-sm-8 so you must edit my code, or you can add your manual classes.