Display 3 products per row in product page

This topic has 10 replies, 2 voices, and was last updated 4 years, 1 month ago ago by Rose Tyler

  • Avatar: denchauskas
    denchauskas
    Participant
    February 23, 2020 at 21:49

    How to display 3 products in row on products page instead of 1?

    9 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 24, 2020 at 13:19

    Hello,

    Customize > WooCommerce > Product Catalog > Products per row.
    If this is not what you are looking for, describe the request in more detail.

    Regards

    Avatar: denchauskas
    denchauskas
    Participant
    February 24, 2020 at 14:46

    Yeah, sorry, forget to say about screen.
    I need to change products per row on Mobile screens

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 25, 2020 at 12:16

    Hello,

    Please provide URL of your shop page.

    Regards

    Avatar: denchauskas
    denchauskas
    Participant
    February 25, 2020 at 17:22

    Website is still in developing, but i added some products just for example

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 26, 2020 at 08:24

    Hello,

    Try to add the next code in Theme Options > Custom CSS > Custom CSS for mobile:

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

    Regards

    Avatar: denchauskas
    denchauskas
    Participant
    February 26, 2020 at 11:31

    Works like a charm, thanks! Turned it off on categories page, cause it broke that page.
    How I can make them display in a row too?

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 26, 2020 at 13:20

    Please try this code:

    .products-loop .product-category {
        width: 33.33% !important;
        display: inline-block;
        min-height: 180px;
        margin-bottom: 0 !important;
    }
    .products-loop .categories-mask h4 {
        font-size: 16px;
    }
    .products-loop .categories-mask span, .categories-mask span.more {
        font-size: 10px;
    }
    .products-loop .categories-mask {
        padding: 10px;
    }

    Regards

    Avatar: denchauskas
    denchauskas
    Participant
    February 26, 2020 at 13:34

    Now it`s working perfectly, thanks!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 26, 2020 at 13:46

    You’re welcome!

    Regards

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