Looks like they need to update CSS.
To make 4 columns into 3, I had to add this CSS:
/* Fix up 3-products-per-line */
.woocommerce ul.products li.product:nth-child(4n+1), .woocommerce-page ul.products li.product:nth-child(4n+1) {
clear: none;
}
.woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
margin-right: 1.818181818181818%;
}
@media only screen and (max-width: 1100px) {
.woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
margin-right: 2.947368421052632%;
width: 30.75%;
}
}
@media only screen and (max-width: 600px) {
.woocommerce ul.products li.product:nth-child(4n), .woocommerce-page ul.products li.product:nth-child(4n) {
width: 48.33333333333333%;
}
}
I just encountered little issue when creating product archive page using WooCommerce. I needed the product listing page to be 3 columns. After several attempts, it keeps dropping to just only 1 column. Please i need an urgent help or assistance on what next step to take.
