In opencart v2.3, Product page hierarchy on smaller screens is as follows:
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.
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.