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:

From To Description
Nothingness 767px Mobile
768px 991px Tablet
992px Infinity Desktop

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:

From To Description
Nothingness 768px Mobile
769px Infinity Desktop

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