CuTt5: WooCommerce Mobile Breakpoint

Copper’s Tips & Tricks #5: WooCommerce Mobile Breakpoint

At the office, we use this breakpoints for CSS layouts, basically bootstrap’s:


That’s the standard anyway, and we usually merge tablet and desktop together, at least for the most important features. However, there’s one very annoying thing that WooCommerce does. Here’s their table:


Yes, a single pixel off of what we want. A single pixel that will bother you so, so much during development if you try to overwrite all of WC’s styles.

Don’t panic, however, as there’s an easy fix:

// Change Woocommerce css breakpoint from max width: 768px to 767px  
add_filter( 'woocommerce_style_smallscreen_breakpoint', function( $px ) {
	$px = '767px';
	return $px;

Done! There goes that pesky pixel.

Happy WooCommerce stylesheeting!

Don’t Stop Here

More To Explore

Mi Historia en GM2

Zarco inició en mayo de 2015 a través de una pasantía sin saber nada de lo que es el software development y ahora es uno

Read More »