Problem with products Layout in shop page

This topic has 3 replies, 2 voices, and was last updated 2 years, 9 months ago ago by VAhumada

  • Avatar: VAhumada
    VAhumada
    Participant
    February 4, 2022 at 01:31

    Hello,
    How can I order the products on the store page so that they are ordered and aligned and all the same size.

    See an example here:
    https://drive.google.com/drive/folders/1zAclneM9hWkvEMZOPIp549XulFJsdW4T?usp=sharing

    Please, contact administrator
    for this information.
    2 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 4, 2022 at 08:12

    Hello,

    Theme Options > WooCommerce > Shop > Products style > https://prnt.sc/26ofphn + https://prnt.sc/26ofprm = https://prnt.sc/26ofpzi
    or add the next custom CSS code in Theme Options > Theme custom CSS:

    .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
        display: flex;
        justify-content: center;
    }
    .products-loop .ajax-content, .products-loop {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
    .content-product {
        flex-direction: column;
        justify-content: space-between;
        display: flex;
        flex: 1;
    }
    .content-product .quantity-wrapper {
        margin-right: auto;
        margin-left: auto;
    }
    .swiper-container {
        display: flex;
        align-items: stretch;
    }
    .product-slide .product {
        display: flex;
        height: 100%;
    }
    .swiper-wrapper {
        height: auto;
    }

    = https://prnt.sc/26ofqrr

    Regards

    Avatar: VAhumada
    VAhumada
    Participant
    February 4, 2022 at 16:55

    excellent, it worked perfect.
    Thanks!

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

The issue related to '‘Problem with products Layout in shop page’' has been successfully resolved, and the topic is now closed for further responses

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