i am using default theme, 2.0.3.1
when viewing on mobile device the add to cart button is below the description,
many products have long descriptions, which means a lot of scrolling
on PC view is fine
how do i change product page display so add to cart will display above the description on mobile devices ??
i have a theme on another site that display as desired, and i have tried using that tpl, and looking how they done, but i am getting nowhere, and i know it will likely be something simple, all i can find is info on 1.5 which i have also tried to use as guide but still no luck
check this Page, and possibly contact the fellow, creating the modified File for the other Fellow:
http://forum.opencart.com/viewtopic.php ... 15#p568033
It's NOT quite that easy, to do, as one could think...
good Luck
Ernie
http://forum.opencart.com/viewtopic.php ... 15#p568033
It's NOT quite that easy, to do, as one could think...
good Luck
Ernie
My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
i am not looking to change the layout in normal pc browser,
the layout is fine there
it is just when default theme is viewed on a mobile device, the add to cart button is at the very bottom,
this does not help sales if your products have detailed descriptions.
I have a theme on another site that does display the add to cart above description on mobile devices,
but i use default theme on my main site, customers have complained about it since i upgraded/switched to OC2,
especially at first as on mobile views when viewing category there was no way to see if a product was out of stock,
(which i already fixed)
but regular customers were moaning they had to go to product page scroll right down to bottom just to see out of stock
at the moment i am thinking about making description very short and then adding a link to more details pages, as the detailed description for the products are needed, but i do know others are also looking how to place description under add to cart on mobile view, as it is logical as most people do simply look at picture and click add to cart
the layout is fine there
it is just when default theme is viewed on a mobile device, the add to cart button is at the very bottom,
this does not help sales if your products have detailed descriptions.
I have a theme on another site that does display the add to cart above description on mobile devices,
but i use default theme on my main site, customers have complained about it since i upgraded/switched to OC2,
especially at first as on mobile views when viewing category there was no way to see if a product was out of stock,
(which i already fixed)
but regular customers were moaning they had to go to product page scroll right down to bottom just to see out of stock
at the moment i am thinking about making description very short and then adding a link to more details pages, as the detailed description for the products are needed, but i do know others are also looking how to place description under add to cart on mobile view, as it is logical as most people do simply look at picture and click add to cart
ok i start again as cloudflare keeps deleting my message when i try to upload tpl >:( >:( >:(
i have got 99% there, but catch is left column needs to display something, so description looks ok, which is fine really as will have left column (tried right but messed up layout)
but i cannot get images to display correct, but the description is now below the add to cart button on smaller screens/windows
if anyone would like to see how far i have got and correct any school boy errors see links to product/product.tpl below
(i would have uploaded but this is 3rd time i am writing this message due to cloudflare)
http://www.filedropper.com/product2
http://www.megafileupload.com/8WsG/product_(2).tpl
i have got 99% there, but catch is left column needs to display something, so description looks ok, which is fine really as will have left column (tried right but messed up layout)
but i cannot get images to display correct, but the description is now below the add to cart button on smaller screens/windows
if anyone would like to see how far i have got and correct any school boy errors see links to product/product.tpl below
(i would have uploaded but this is 3rd time i am writing this message due to cloudflare)
http://www.filedropper.com/product2
http://www.megafileupload.com/8WsG/product_(2).tpl
I know this is an old post but there is an easy way to accomplish this all in CSS.
Just add this to the end of the stylesheet for the default theme:
Just add this to the end of the stylesheet for the default theme:
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;
}
}
Thx mate,
I also looking to do the same for Categories - moving products' list above the description.
I've tried using your Order method but didnt work.
Can you help?
I also looking to do the same for Categories - moving products' list above the description.
I've tried using your Order method but didnt work.
Can you help?
Pottery Glaze shop
OK,
I've handled it.
Last night I was too sleepy
Fist need to give IDs for DIV ROW in category.tpl. (cat1, cat2, etc)
After that find the main element that holds sub-divs that we want to re-arrange. (use Chrome developer console)
In my case "div.container #content.col-sm-9"
And arrange the elements as you wish:
You can see the final result here Ceramic Glazes
I've handled it.
Last night I was too sleepy
Fist need to give IDs for DIV ROW in category.tpl. (cat1, cat2, etc)
After that find the main element that holds sub-divs that we want to re-arrange. (use Chrome developer console)
In my case "div.container #content.col-sm-9"
And arrange the elements as you wish:
Code: Select all
@media (max-width: 768px) {
div.container #content.col-sm-9 {
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#cat1.row {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-ms-flex-order: 4;
-webkit-order: 4;
order: 4;
}
div#cat4.row {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
div#cat5.row {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
div#cat6.row {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
}
Pottery Glaze shop
Who is online
Users browsing this forum: No registered users and 58 guests