“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 “Two” 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?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: