Woocommerce - product page 4 columns

Hello,

I would like to ask you if there is possibility to show 4 columns on product page, not 5.

Also I would be happy if there is some possibility to add margin to each product on product page.

I want to apply these changes only on desktop version, it is fine on mobile.

My page is: shop.mercutcars.cz

Thank you very much.

Best regards
Pavel

Hello Pavel,

I would like to ask you if there is possibility to show 4 columns on product page, not 5.

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

@media (min-width: 1024px) {
    body.archive.woocommerce ul.products li.product {
        width: 25%;
        clear: none;
    }

    body.archive.woocommerce ul.products li.product:nth-child(4n+1) {
        clear: left;
    }
}

Also I would be happy if there is some possibility to add margin to each product on product page.

I’m not sure what exactly you want to achieve, can you please provide some explanatory screenshots?

Kind Regards, Roman.
aThemes Support

Hello Roman,

thank you for the first code, works really fine! :slight_smile:

For the second code, I’m providing screenshot below:

Thank you very much.

Best regards
Pavel

Okay Pavel, thank you for the screenshot. Try to use this CSS code instead:

@media (min-width: 1024px) {
    body.archive.woocommerce ul.products li.product {
        width: 25%;
        clear: none;
        padding-left: 2%;
        padding-right: 2%;
    }

    body.archive.woocommerce ul.products li.product:nth-child(4n+1) {
        clear: left;
    }
}

Kind Regards, Roman.
aThemes Support

Roman, thank you very much. Works like a charm.

Thank you for your job and support. You guys are awesome! :slight_smile:

Best regards
Pavel

Great, you are welcome Pavel!

By the way, it would be nice if you leave your feedback for Airi theme on WordPress.org (if you haven’t done it already, of course), here is a quick link :slight_smile:

Kind Regards, Roman.
aThemes Support