OpenCart Community

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.

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.

<script>
    $(function(){
        function moveCart(){
            if($(window).width() < 768 ){
                $('#content > .row > .col-sm-6:last-child').removeClass('col-sm-6').addClass('moved-div');
                $('.moved-div').insertAfter('.thumbnails');
            } else {
                if($('.moved-div').length){
                    $('.moved-div').insertAfter('#content > .row > .col-sm-6').addClass('col-sm-6').removeClass('moved-div');
                }
            }
        }
        moveCart();
        $(window).resize(function(){
            moveCart();
        })
    });
</script>

antmagn wrote: ↑

Fri May 09, 2025 4:33 pm

I know this is an old post but I wanted to mention that this works on oc 3.0.3.8 and it looks briliant on mobile.
I just copy pasted the script that you mentrion on your first answer at product.tpl (product.twig for oc 3)