OC 2.3.0.2
Default theme
Hi community.
Regarding products pages. In desktop version it looks fine displaying price and add to cart button at the top part.
However on the mobile version both price and add to cart button is at the bottom after the product description. This is a major problem if you have a long product description. Even more as customers doesn't really care to read a lot of text. From a sales point of view this is really bad.
What is the best solution to move the price, quantity and add to cart button above the product description?
Thanks cyclops12.
I understand that I should add the code below to the end of the stylesheet for the default theme.
I should edit this one?
catalog/view/theme/yourtheme/stylesheet/stylesheet.css
I find it strange that OC doesn't have, by default, the price and add to cart button at the top in the mobile version.
I'm also surprised that no developers, in the marketplace, is selling an extension for solving this.
I understand that I should add the code below to the end of the stylesheet for the default theme.
I should edit this one?
catalog/view/theme/yourtheme/stylesheet/stylesheet.css
Code: Select all
@media (max-width: 768px) {
div.row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
div.row .col-sm-8 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
div.row .col-sm-4 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
I'm also surprised that no developers, in the marketplace, is selling an extension for solving this.
I did the recommended changes, refreshed cache (Admin/Extensions/Modifications), deleted content of cache (except index) in system/storage and cleared the cache in the web browser.
The recommended changes didn't change anything at all. It looks just the same with the price and add to cart button after the product description.
Any other ideas?
The recommended changes didn't change anything at all. It looks just the same with the price and add to cart button after the product description.
Any other ideas?
I've tried a suggestion from DigitCart in another old thread:
viewtopic.php?t=199689
In product.tpl, just before <?php echo $footer; ?>: I added:
It didn't work, nothing changed.
I've run out of ideas.
Any bright ideas how to solve the problem?
viewtopic.php?t=199689
In product.tpl, just before <?php echo $footer; ?>: I added:
Code: Select all
<script>
$(function(){
function moveCart(){
if($(window).width() < 768 ){
$('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
$('.moved-div').insertAfter('.thumbnails');
} else {
if($('.moved-div').length){
$('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
}
}
}
moveCart();
$(window).resize(function(){
moveCart();
})
});
</script>
I've run out of ideas.
Any bright ideas how to solve the problem?
I've been reading the forum all day.
Editing stylesheet didn't work and neither did editing product.tpl.
Is there anything that looks strange with the code I added in product.tpl?
Editing stylesheet didn't work and neither did editing product.tpl.
Is there anything that looks strange with the code I added in product.tpl?
Code: Select all
<script>
$(function(){
function moveCart(){
if($(window).width() < 768 ){
$('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
$('.moved-div').insertAfter('.thumbnails');
} else {
if($('.moved-div').length){
$('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
}
}
}
moveCart();
$(window).resize(function(){
moveCart();
})
});
</script>
Edit product.tpl and add before <?php echo $footer; ?>
After that Refresh Modifications and try again. It works here with default theme.
Code: Select all
<script type="text/javascript"><!--
function moveCart(){
if($(window).width() < 768 ){
$('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div');
$('.moved-div').insertAfter('.thumbnails');
} else {
if($('.moved-div').length){
$('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div');
}
}
}
moveCart();
$(window).resize(function(){
moveCart();
})
//--></script>Pprmkr, you're fantastic! I really appreciate your help. I must have spent 20 hours trying to figure it out.pprmkr wrote: ↑Tue May 28, 2019 3:31 pmEdit product.tpl and add before <?php echo $footer; ?>
After that Refresh Modifications and try again. It works here with default theme.Code: Select all
<script type="text/javascript"><!-- function moveCart(){ if($(window).width() < 768 ){ $('#content > .row > .col-sm-4').removeClass('col-sm-4').addClass('moved-div'); $('.moved-div').insertAfter('.thumbnails'); } else { if($('.moved-div').length){ $('.moved-div').insertAfter('#content > .row > .col-sm-8').addClass('col-sm-4').removeClass('moved-div'); } } } moveCart(); $(window).resize(function(){ moveCart(); }) //--></script>
It works excellent. What an improvement on the product page, no more scrolling down to see the price and add to cart button.
Who is online
Users browsing this forum: No registered users and 247 guests
