Products row - by Bright Agho - on WordPress WooCommerce support

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

  • Avatar: Bright Agho
    Bright Agho
    Participant
    September 10, 2021 at 16:34

    Hello support how are y’all doing today? please I need your support here how do set my product row to show 3 row on tablet 2row on mobile is ok I need the tablet to be 3row

    Please, contact administrator
    for this information.
    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 11, 2021 at 06:07

    Hello,

    Try to add the next code in Theme Options > Theme custom CSS > Tablet

    .products-grid .product {
        width: 33.33% !important;
    }
    .products-grid .product:nth-child(2n+1) {
        clear: none !important;
    }
    .products-grid .product:nth-child(3n+1) {
        clear: both !important;
    }

    Regards

    Avatar: Bright Agho
    Bright Agho
    Participant
    September 11, 2021 at 18:34

    I did put the code already he is still the same please check
    https://privatebin.support-tools.com/?dd1b5130f915a04f#io35foS9zPrurXVIgl2ndYDxZ65HLmhR/vHhow83xvk=

    Please contact administrator
    for this information.
    Avatar: Bright Agho
    Bright Agho
    Participant
    September 11, 2021 at 18:42

    Yes he work now thanks

    Please contact administrator
    for this information.
    Avatar: Bright Agho
    Bright Agho
    Participant
    September 11, 2021 at 21:51

    Hello support am really sorry can I have the code for 4row on tablet shop page? I try 3 in a row it doesn’t look nice on my home page please so I have to take it off I think 4 in a row will be better thanks

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 12, 2021 at 08:10

    Hello,

    Change the previous code to:

    .products-grid .product {
        width: 25% !important;
    }
    .products-grid .product:nth-child(2n+1) {
        clear: none !important;
    }
    .products-grid .product:nth-child(4n+1) {
        clear: both !important;
    }

    Regards

  • Viewing 6 results - 1 through 6 (of 6 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.