- This topic has 6 replies, 4 voices, and was last updated 4 years, 5 months ago by Tom.
-
AuthorPosts
-
April 19, 2018 at 7:07 pm #555262Shane
Hello!
I am currently moving from flatsome to generatepress, and I am trying to reconfigure the woocommerce cart layout for tablet and mobile to look something like my old theme’s cart layout:
Tablet Example: https://cl.ly/3f423x0Q3K1R
Mobile Example: https://cl.ly/0X1y2b3B3O0O
I got the desktop cart page to look pretty good but I’m now stuck on making the mobile cart not look so terrible. Specifically, I want the images to be more prominent on table and mobile and stacked neatly and easy to consume. Right now it’s just text link of the product…
Any help is appreciated π
Password to page is “bowtie”
April 19, 2018 at 9:47 pm #555346TomLead DeveloperLead DeveloperWooCommerce stacks those elements by default to allow for more room on mobile.
You can use this CSS to show the image:
@media (max-width: 768px) { .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail { display: block; text-align: left !important; } .cart .product-thumbnail:before { display: none; } .woocommerce-cart table.cart img { width: 150px; } }
Let me know if you want a more inline style like the screenshots and I’ll see if I can adjust the CSS for you π
April 19, 2018 at 11:55 pm #555392Ivan CazorlaI’d love to have that too!
April 20, 2018 at 5:02 am #555587ShaneHey Tom!
Thanks for getting back so fast π
To clarify, I don’t mind the stacking, but more so the absence of the thumbnail (you fixed this piece) and how the product title, price, and quantity make the page extremely long
I think your initial CSS gets half of the way there.
Anyway to combine the product, price, and quantity to be on the same level, which would shorten the cart considerably?
Your help is much appreciated! π
April 20, 2018 at 9:57 am #555871TomLead DeveloperLead DeveloperI’m not sure it will fit all on one line for phones, but you can try this:
@media (max-width: 768px) { td.product-thumbnail, td.product-name, td.product-price, td.product-quantity { display: inline-block !important; border-bottom: 0 !important; } td.product-thumbnail:before, td.product-name:before, td.product-price:before, td.product-quantity:before { content: "" !important; } }
October 29, 2019 at 10:52 am #1048037Roberto EnriqueI was trying to create EXACTLY the same layout.
The explanation is a little bit long and I don’t really feel like writing that much.
The first time I tried to recreate that layout in the cart i did it this way:
https://generatepress.com/forums/topic/my-mods-for-woocommerce/
But it had it’s problems and it wasn’t as clean as I’d like it to be.This time I dug a little deeper, not that it is perfect, but it does its job better than the last time.
My mods:
Make the cart page two columns on Desktop:
Then switch it back to one column on smaller desktops (
@media (min-width:769px) and (max-width:1024px)
)I also moved the coupon zone after the cart collaterals as you can see π
And this is the mobile view of the cart:
I used CSS Grid for doing it and display:none!importanting a bunch of stuff.
Obviously I had to modify the woocommerce/cart/cart.php (available here) template primarily for:
– Adding a wrapper around main cart areas (cart form and cart collaterals) so I could use CSSgrid to position the blocks where i wanted them (find it @ line 19, 20 and 145)
– Moving the coupon area (find it @ line 159)
– Adding the code in order to display the product quantity X price (find it @ line 86)Then I did a whole lot of playing with the css (find it here) in order to:
– Reduce the spacing on woocommerce tables
– Adding a highlight border in the order review area at checkout
– Resizing the quantity buttons sitewide
– Removing some Cart totals ::before elements
– Remove the alternating background color and adding a separator for cart items
– Hacking the width of header rows in cart collaterals table
– Adding a border around the login and coupon dropdowns in checkout
– Making the store notices boxes smaller
– Hacking the width of header rows in order review table on checkoutAnd make a lot of fiddling to get the cart looking like I wanted in mobile π
Just go through the css file, I’ve commented almost all the selectors.This is a work in progress, you can see how it is coming here:
https://onecent.artomultiplo.net/As always, let me know if I can improve it.
And thanks to the Generatepress team for making such a wonderful theme!
October 29, 2019 at 4:41 pm #1048301TomLead DeveloperLead DeveloperThanks for sharing, Roberto! Always appreciate your posts in the forum here π
-
AuthorPosts
- You must be logged in to reply to this topic.