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.

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: