Woo Commerce - 3 products on tablet vertical, 4 on tablet horizontal

[INcroatia]

Hi there,

We’re trying to make WooCommerce display 3 products when a product page is viewed vertically on a tablet and 4 products while it’s viewed on a tablet placed horizontally. We have already started making some changes in the Global CSS, but we can’t seem to make it just right.
We managed to get 2 products to show on vertical instead of the 3 that we’d like

while when viewed on horizontal, it does display the 4 products we want

Any help would be greatly appreciated.

[tristup]

Hi @INcroatia,

To adjust 3 products in the mentioned screen size, you need to add a few custom CSS codes into the Theme Options > CSS.

@media (max-width: 978.98px)
{  
    [class*=woocommerce] ul.products.columns-3 li.product:nth-child(2n+3), 
    [class*=woocommerce] ul.products.columns-4 li.product:nth-child(2n+3)
    {
        clear:none;
    }
    [class*=woocommerce] ul.products.columns-3 li.product, 
    [class*=woocommerce] ul.products.columns-4 li.product
    {
        width:28%;
    }
}
@media (max-width: 768px)
{
        .woocommerce ul.products[class*=columns-] li.product, 
        .woocommerce-page ul.products[class*=columns-] li.product
        {
            margin: 0px 2% 4.5% 4%;
        }
        .woocommerce ul.products[class*=columns-] li.product:nth-child(2n), 
        .woocommerce-page ul.products[class*=columns-] li.product:nth-child(2n)
        {
            float:left;
        }
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks