Shop page layout - by vincentdv - on WordPress WooCommerce support

This topic has 2 replies, 2 voices, and was last updated 2 years, 11 months ago ago by Rose Tyler

  • Avatar: vincentdv
    vincentdv
    Participant
    April 20, 2021 at 16:41

    Hi good day, may I know
    i) In desktop view, how to set each box equal height?

    ii)In mobile view, may I know how do I make the add to cart and quantity button at each product to be center align?

    iii)Currently I choose to show 3 products per row in desktop, but it only shows 2 products per row.
    In mobile, it shows 1 product per row only, how do I change products per row for mobile?

    iv)In mobile view, quickview button is not seen, how to show the quickview button on mobile view?

    v) In mobile view, product contents in shop is relatively large, may I know how to set everything smaller and able to show 2 products per row in mobile?

    I saw there are custom css settings from English tea demo import, but not sure which to change. thank you

    Please, contact administrator
    for this information.
    1 Answer
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 21, 2021 at 07:31

    Hello,

    1) Try to add the next code in Theme Options > Theme custom CSS > Custom CSS for desctop:

    .main-products-loop .products-list .product {
        display: flex;
    }
    .products-list {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
    .products-list .content-product {
        justify-content: space-between;
        display: flex;
        flex: 1;
    }

    2) Theme Options > Theme custom CSS > Custom CSS for mobile:

    .products-list .content-product .quantity-wrapper {
        width: 100% !important;
        justify-content: center;
    }

    3) Yes, it is correct, because the List view shows 2 products for desktop, by default. You can change columns for the grid view only, for example, here is 3 columns – http://prntscr.com/11sgj33
    5) Custom CSS for mobile:

    .shop-full-width .main-products-loop .products-list .product {
        width: 50% !important;
    }

    4) Theme Options > WooCommerce > Shop > Products style > Hover buttons on mobile

    Regards

  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.