[Resolved] Woocommerce Grouped Products Qty, Product Title, Price Alignment

Home Forums Support Woocommerce Grouped Products Qty, Product Title, Price Alignment

This topic contains 5 replies, has 3 voices, and was last updated by  David 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1164497

    Joezer

    Hello,

    I’ve come across an issue with grouped products, it looks nice when viewed with screens 380px width and up. But once you go down, especially 360px and 320px screens, it looks awkward because the quantity, title of the product and price becomes squished together. I actually disabled the quantity buttons and used a plugin called “Qty Increment Buttons for WooCommerce” to get more legroom when viewing with smaller screens (and because I can’t find the CSS to edit the quantity buttons provided by Generatepress). But it stills looks kinda awkward. Are there any CSS style that you can provide to make this look better? Or maybe a style that just puts the things on top of each other when viewed with mobile screens? So it will be:
    Product Title
    Quantity
    Price

    Instead of the:
    Quauntity – Product Title – Price

    I’m seeing a problem with the current layout for smaller screens because there will be times that some products will have a longer name. And it looks beautiful with simple products, but when you put those inside grouped products, it kinda takes away a bit of customer experience since the main goal is to get them to “add to cart”

    Using all of the current versions 🙂

    #1164667

    Tom Lead Developer

    Hi there,

    Tables aren’t very good at being responsive, unfortunately.

    You could try something like this:

    @media (max-width: 350px) {
        .woocommerce div.product form.cart .group_table.woocommerce-grouped-product-list tr > td {
            display: block;
            padding: 10px !important;
        }
    }

    Let me know 🙂

    #1164679

    Joezer

    Hello Tom,

    Yup that works perfectly, any chance you could teach me how to switch the quantity button’s position so that it would be below the product name?

    Also, how do I increase the height of the “Add To Cart” button for product pages? I tried the css style below but it only works for the width. It doesn’t increase the height of the button no matter what value I put.

    form.cart button[type=’submit’] {
    width: 100%;
    }

    #1165026

    David Customer Support

    Hi there,

    change the CSS Tom provided to this – it includes the 2 extra rules to re-order the elements:

    @media (max-width: 410px) {
    
        .group_table.woocommerce-grouped-product-list tr {
            display: flex;
            flex-direction: column;
        }
    
        .group_table.woocommerce-grouped-product-list tr > td.woocommerce-grouped-product-list-item__label {
            order: -1;
        }
    
        .woocommerce div.product form.cart .group_table.woocommerce-grouped-product-list tr > td {
            display: block;
            padding: 10px !important;
        }
    
    }

    For the button try this:

    form.cart button[type='submit']:not(#qib_id):not(_):not(_) {
        height: 50px !important;
    }
    #1165076

    Joezer

    Hello,

    This fixed everything. Thank you very much Tom and David. You guys helped me fix this in less than 24 hours.

    I love GP!

    #1165381

    David Customer Support

    Glad we could be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.