Wordpress

To target iOS specific devices:

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

It works because only Safari Mobile implements -webkit-overflow-scrolling: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

I used this because a WordPress Genesis responsive menu had some icon alignment discrepancies on iPhone only.
Here is the example in a media Query:

/*** IOS mobile icon adjustments ***/
	@supports (-webkit-overflow-scrolling: touch) {
		/* CSS specific to iOS devices */ 
		.genesis-nav-menu.responsive-menu .menu-item-has-children li {
			position: relative;	
		}
		.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
			margin-right: 0;
		}
		
		.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
			content: "\f347";
			position:absolute;
			left:80%;
			float: none;
			font: normal 16px/1 'dashicons';
			height: 16px;
			padding: 15px 20px;
			right: 0;
			text-align: right;
			z-index: 9999;
			color:#fff;
		}
		
		.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
			content: "\f343";
		}
		.genesis-nav-menu.responsive-menu li a {
			font-size:30px;
			font-size:3.0rem;
		}

	  }

 

In Woocommerce > Includes > Widgets > class-wc-widget-products.php

Add at line 70:
‘in_cat’ => array(
‘type’ => ‘text’,
‘std’ => __( ‘Category Number’, ‘woocommerce’ ),
‘label’ => __( ‘In Category’, ‘woocommerce’ )
),

Add at line 101:
$cat = ! empty( $instance[‘in_cat’] ) ? sanitize_title( $instance[‘in_cat’] ) : $this->settings[‘in_cat’][‘std’];

Add at line 114:
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘term_id’,
‘terms’ => $cat,
),

test

This function makes Woocommerce automatically select the lowest cost shipping by default

function ea_default_shipping_method( $method ) {
    $_cheapest_cost = 100000;
	$packages = WC()->shipping()->get_packages()[0]['rates'];

	foreach ( array_keys( $packages ) as $key ) {
        if ( ( $packages[$key]->cost > 0 ) && ( $packages[$key]->cost < $_cheapest_cost ) ) {
            $_cheapest_cost = $packages[$key]->cost;
            $method_id = $packages[$key]->id;
        }
	}

	return $method_id;
}
add_filter( 'woocommerce_shipping_chosen_method', 'ea_default_shipping_method', 10 );

single Product Pages

Here’s a handy tutorial on removing product images from the single WooCommerce product page. The basic idea is that we’ll want to remove the action that adds WooCommerce images.

We can do so by adding this snippet into our child functions.php or the Code Snippets plugin:

1
2
// Remove image from product pages
remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );
However, this won’t remove the sale badge if your product is on sale, which will look kind of funny without an image. We’ll need to add another snippet right below this to remove sale badges as well:

1
2
// Remove sale badge from product page
remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10 );
The only issue is that the product page will now have a big gap in it. We can fix this with some custom styling, but this may change depending on your theme. Adding something similar to this to your child CSS stylesheet or custom CSS plugin should do the trick:

1
.woocommerce-page #content div.product div.summary { width:100%; }
However, this will depend on your theme, and you may have to ask your theme developer for help on this one if you’re not sure what class / id to target.

Cart Pages

Removing thumbnails from the cart pages is the easiest change to fix – there’s a handy filter available for us to change the product thumbnail easily. Let’s just return this as “empty” so the thumbnail isn’t displayed. We can put this in the Code Snippets plugin or a child functions.php.

1
2
// Remove product thumbnail from the cart page
add_filter( ‘woocommerce_cart_item_thumbnail’, ‘__return_empty_string’ );
There will be a pretty tiny gap in your cart table, so you may not need to adjust styling to compensate. However, this again will depend on your theme. Using a default theme, you can adjust your child stylesheet with the following CSS:

1
.woocommerce table.cart .product-thumbnail { display:none; }
Again, this will depend on your theme’s styling.

Shop Loop

Finally, let’s remove the product images from the shop pages. This is again an action we need to remove in the shop template. We can add this code to our child functions.php or to our Code Snippets:

1
2
// Remove product images from the shop loop
remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10 );
However, we have the same issue as the product page – we may have sale badges left over that will now look kind of funny without an image to sit on. We can remove these from the shop page as well by placing this snippet right below the previous one.

1
2
// Remove sale badges from the shop loop
remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_show_product_loop_sale_flash’, 10 );