Change tablet view to three columns WooCommerce products

Hi there @hautecreations ??

Thank you for reaching out!

Change tablet view to three columns WooCommerce products

Thank you for your patience! We are experiencing an unusually high volume of support requests at the moment, and that has affected our response times.

I recommend going ahead with utilizing the All Products block, for controlling and fine-tuning the front-end display of products at your store, instead.

From the block settings, you can choose two or three columns, which would display as desired in the tablet viewport, and scale gracefully on mobile.

For reference, here is a screenshot of my settings for said block:

I hope this is helpful! Please let us know if you have any further questions or concerns.

Thank you for the alternate solution. I’m going with it!

Here’s the CSS code you can use to display your products in two or three columns on your staging site:

For Two Columns:

@media screen and (min-width: 768px) and (max-width: 1023px) {
.woocommerce.columns-3 ul.products li.product,
.woocommerce.columns-3 ul.products li.product.first {
width: 48%;
float: left;
margin-right: 4%;
clear: none;
}
.woocommerce.columns-3 ul.products li.product.last {
margin-right: 0;
}
}

For Three Columns:


@media screen and (min-width: 768px) and (max-width: 1023px) {
.woocommerce.columns-3 ul.products li.product {
width: 31.33%;
float: left;
margin-right: 3%;
clear: none;
}
.woocommerce.columns-3 ul.products li.product:nth-child(3n) {
margin-right: 0;
}
}

You can add the desired code to your theme's Customizer or directly in your theme's CSS file. Remember to make a backup before making any changes.

I’m glad to hear this, thank you for the kind words @hautecreations !

Thank you for chiming-in @anmolblouch92 . We appreciate you being an active part of the community ??

Have a wonderful day, y’all!