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!

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 »