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 »

CuTt8: git branch by date

Copper’s Tips & Tricks #8: git branch by date Here at the office we use feature branches. Feature branches with ticket name/numbers. Now, I am

Read More »

CuTt7: theme-symlink

Copper’s Tips & Tricks #7: theme-symlink WordPress developers, I know some of you who use Sublime or similar tools with file explorer sidebars, have problems.

Read More »