Blog

CuTt5: WooCommerce Mobile Breakpoint

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:

FromToDescription
Nothingness767pxMobile
768px991pxTablet
992pxInfinityDesktop

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:

FromToDescription
Nothingness768pxMobile
769pxInfinityDesktop

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!

Leave a Comment