Aashish Indulkar Aashish Indulkar - 12 days ago 5
Javascript Question

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 on smaller screens this is the hierarchy:


  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
Everything works well on larger screens

This is the screen shot on smaller screen

Answer

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.