Better responsive checkout

[pmfjoe]

Are there any plans to make the checkout a bit more responsive or is there another theme that anyone knows that is prettier on mobile?

My issues are: The buttons dont line up Some of the content like the product list goes off the screen

[Traumflug]

Screenshots, please! We want to see what you see :-)

[pmfjoe]

I would also suggest looking at your own store as this is a very obvious issue on cell phones.

This picture is from the cart page using the community theme. As you can see due to the table the cart display goes off the screen, I am sure this occurs in PS 1.6 too. Also the Proceed/Continue buttons do not align properly.

[hubbobubbo]

I was just about to post about this as well. The cart summary needs some love since it is completely non-responsive. Cart Summary screenshot

[nickon]

the tranformer theme although uses the same layout, looks quite good on mobile

[pmfjoe]

Yeah, anything having to do with the table displaying items in the cart even the payment screed does the same thing. I honestly think the only way around it would be to remove the table and add columns, I may investigate doing this as over 75% of our website visitors are using mobile phones. My only concern would be with columns keeping things lined up.

I will also checkout the transformer theme.

[pmfjoe]

So the transformer theme works much better on both the cart and buttons, I have attached a picture. When thinking responsive the way it displays is definitely the way I would picture it.


[Occam]

It is the same behavior like in Prestashop 1.6. I can confirm what was assumed in a post above. I didn't check it for thirty bees in particular, but in PS its even more worse with activated Advancedeucompliance module.

[Traumflug]

As this is probably a larger thing I've opened a Github issue for it:

https://github.com/thirtybees/community-theme-default/issues/27

[pmfjoe]

It definitely bothers me since shipping and the total price are not visible, also if you look at my 1st screen shot there is no scroll bar shown (you can swipe left though to scroll the table).

As far as transformer I don't have the theme yet (the screen shot is from their demo) but it appears they re-wrote the table so that it fills down instead of across on small screens.

[Occam]

@mdekker said in Better responsive checkout:

Oh, never realized it bothered people so much, I use some forked PS 1.6 theme in my store, also with "scrollable tables" as I'd like to call it. It permanently shows a scroll bar BTW. That seems to make the visitors less confused.

But erm how does the transformer theme cram it all inside 320px, must be a tiny font then?

Depends. ? The Transformer theme's CSS is indeed very sophisticated, but even with less effort it should be possible to force the mobile display to switch from horizontal to vertical just by CSS. The most simple way is this: https://css-tricks.com/responsive-data-tables/ I used this for PrestaShop 1.5. But meanwhile there are different techniques you may apply: Responsive Data Table Roundup

[nickon]

Just a quick update. Since swithing to transformer theme (and the better opc layout) abandoned carts have dropped significantly. We are 0.60% up. So id DOES matter afterall. Will keep a track and see if this continues

[alwayspaws]

@nickon said in Better responsive checkout:

Just a quick update. Since switching to transformer theme (and the better opc layout) abandoned carts have dropped significantly. We are 0.60% up. So it DOES matter after all. Will keep a track and see if this continues

This is fantastic news @nickon especially since I also use the Transformer theme. Thank you!