Aashish Indulkar Aashish Indulkar - 1 year ago 229
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 Source

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

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

        // 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
            } 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.
                    $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');

        // run function 

            // run function again if user resized screen

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download