Snippet: Change WooCommerce Product Entry Mobile Columns

/**
 * Add responsive grid settings to woocommerce product 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 ( max-width: 1024px )
 *			tp => tablet portrait ( max-width: 959px )
 *			pl => phone landscape ( max-width: 767px )
 *			pp => phone portrait ( max-width: 479px )
 *
 * IMPORTANT: In Total 4.9.9+ you can now select your responsive columns right in the Customizer!
 *
 */
add_filter( 'post_class', function ( $classes, $class = '', $post_id = '' ) {

	if ( ! $post_id || ! in_array( get_post_type( $post_id ), array( 'product', 'product_variation' ) ) ) {
		return $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;

}, 50, 3 );