-1

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

dNitro
  • 5,145
  • 2
  • 20
  • 45
Aashish Indulkar
  • 35
  • 6
  • 1
    Hi Aashish, welcome to StackOverflow. Can you elaborate your question with what you have tried already, including any code and the resulting layout? Showing a minimal example of what you are trying to achieve and your work so far will help people to answer your question. – Harry Nov 21 '16 at 23:43
  • Can you edit the question? It seems unclear of what you are asking. – Rav Nov 22 '16 at 00:13

1 Answers1

0

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.

DigitCart
  • 2,980
  • 2
  • 18
  • 28
  • I press the upvote button, but it says Thanks for the feedback! Votes cast by those with less than 15 reputation are recorded, but do not change the publicly displayed post . – Aashish Indulkar Nov 23 '16 at 09:40