Updated on March 15, 2020
“Products List” component in an Oxygen Template that applies to the WooCommerce main Shop page (product CPT archive) and/or to other WooCommerce related archives like Product Category and Tag archives has a “Columns” setting under “Layout”.
By default “One” appears to be the active one/selected but it is not.
The number of columns on the front end will be 4 from 769px and above, 2 from 768px and below, and 1 from 480px and below i.e.,
4: > 768px
2: 481px to 768px
1: < 480px
If we select one of the given options for the Columns setting, then that many columns will appear always for all screen sizes.
To change the number of columns at smaller breakpoints to behave similar to the default behavior (when nothing is selected for the number of Columns), add the following CSS (at Manage > Stylesheets):
@media only screen and (max-width: 768px) {
.woocommerce #-woo-products-3-152 ul.products[class*="columns-"] li.product,
.woocommerce-page #-woo-products-3-152 ul.products[class*="columns-"] li.product {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.woocommerce #-woo-products-3-152 ul.products[class*="columns-"] li.product,
.woocommerce-page #-woo-products-3-152 ul.products[class*="columns-"] li.product {
width: 100%;
}
}Replace all 4 occurrences of -woo-products-3-152 in the above with the ID of your Products List element.