Skip to content

Snippet: Change WooCommerce Product Category Mobile Columns

/**
 * Add responsive grid settings to woocommerce product category entries
 * Note: Only add the classes you need. For example if the default columns
 * are set to 3 no need to define 3 columns again for tablet devices.
 *
 * All responsive column classes use the format span_1_of_{columns}_{device}
 * Devices: tl => tablet landscape
 *			tp => tablet portrait
 *			pl => phone landscape
 *			pp => phone portrait
 *
 */
add_filter( 'product_cat_class', function ( $classes ) {

	// Only target woocommerce entries
	if ( is_array( $classes ) && in_array( 'product-category', $classes ) ) {

		// 4 columns on tablet landscape
		$classes[] = 'span_1_of_4_tl';

		// 3 columns on table portrait
		$classes[] = 'span_1_of_3_tp';

		// 2 Columns on phone landscape
		$classes[] = 'span_1_of_2_pl';

		// 2 Column on phone portrait
		$classes[] = 'span_1_of_2_pp';

	}	

	// Return classes
	return $classes;

} );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top