[Support request] Mobile Friendly Woocomerce Cart Layout

Home Forums Support [Support request] Mobile Friendly Woocomerce Cart Layout

Home Forums Support Mobile Friendly Woocomerce Cart Layout

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #555262
    Shane

    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”

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #555346
    Tom
    Lead Developer
    Lead Developer

    WooCommerce 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 πŸ™‚

    #555392
    Ivan Cazorla

    I’d love to have that too!

    #555587
    Shane

    Hey 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! πŸ™‚

    #555871
    Tom
    Lead Developer
    Lead Developer

    I’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;
        }
    }
    #1048037
    Roberto Enrique

    I 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:
    Cart two columns generatepress

    Then switch it back to one column on smaller desktops ( @media (min-width:769px) and (max-width:1024px) )

    back to one column on smaller desktops

    I also moved the coupon zone after the cart collaterals as you can see πŸ™‚

    And this is the mobile view of the cart:

    This is the mobile 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 checkout

    And 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!

    #1048301
    Tom
    Lead Developer
    Lead Developer

    Thanks for sharing, Roberto! Always appreciate your posts in the forum here πŸ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.