Post by GoldenTongs » Mon Jul 06, 2015 1:02 pm

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

http://Lilphones.com
Image


Active Member

Posts

Joined
Sun Jul 29, 2012 5:26 pm

Post by IP_CAM » Tue Jul 07, 2015 6:57 am

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

I'm rarely active at the OC Forum lately. To reach me, contact: jti@jacob.ch
A Demoversion of my free OpenCart LIGHT v.1.5.6.5 Software Edition
can be seen in real Action here: http://www.jti.li/shop/
---
1'200+ FREE OC Extension-Repositories - from OC v.1.5.x up,
on the world's largest OC-related Github Site: https://github.com/IP-CAM
---
Image


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by GoldenTongs » Tue Jul 07, 2015 4:14 pm

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

http://Lilphones.com
Image


Active Member

Posts

Joined
Sun Jul 29, 2012 5:26 pm

Post by GoldenTongs » Tue Jul 07, 2015 9:45 pm

ok i start again as cloudflare keeps deleting my message when i try to upload tpl >:( >:( :bash: :bash: >:(

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

http://Lilphones.com
Image


Active Member

Posts

Joined
Sun Jul 29, 2012 5:26 pm

Post by stevenl » Sun Sep 18, 2016 4:56 am

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:

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;

   }


}

Newbie

Posts

Joined
Sun Sep 18, 2016 4:53 am

Post by masterross » Sun May 26, 2019 6:22 am

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?

New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by masterross » Sun May 26, 2019 8:14 pm

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:

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;

   }

}
You can see the final result here Ceramic Glazes

New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm
Who is online

Users browsing this forum: No registered users and 37 guests