Dyad 2:

* Adds support for the 3.3+ new Customizer options (See #87)
* Fixes flash sale badge styling

dyad-2/inc/woocommerce.php

@@ -16,10 +16,17 @@
  * @return void
  */
 function dyad_2_woocommerce_setup() {
-	add_theme_support( 'woocommerce', array(
-		'thumbnail_image_width' => 360,
+	add_theme_support( 'woocommerce', apply_filters( 'dyad_2_woocommerce_args', array(
 		'single_image_width'    => 700,
-	) );
+		'thumbnail_image_width' => 360,
+		'product_grid'          => array(
+			'default_columns' => 3,
+			'default_rows'    => 4,
+			'min_columns'     => 1,
+			'max_columns'     => 6,
+			'min_rows'        => 1
+		)
+	) ) );
 	add_theme_support( 'wc-product-gallery-zoom' );
 	add_theme_support( 'wc-product-gallery-lightbox' );
 	add_theme_support( 'wc-product-gallery-slider' );
@@ -115,7 +122,11 @@ add_filter( 'body_class', 'dyad_2_woocommerce_active_body_class' );
 function dyad_2_woocommerce_products_per_page() {
 	return 12;
 }
-add_filter( 'loop_shop_per_page', 'dyad_2_woocommerce_products_per_page' );
+
+// Legacy WooCommerce products per page filter.
+if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
+	add_filter( 'loop_shop_per_page', 'dyad_2_woocommerce_products_per_page' );
+}
 
 /**
  * Product gallery thumnbail columns.
@@ -135,7 +146,11 @@ add_filter( 'woocommerce_product_thumbnails_columns', 'dyad_2_woocommerce_thumbn
 function dyad_2_woocommerce_loop_columns() {
 	return 3;
 }
-add_filter( 'loop_shop_columns', 'dyad_2_woocommerce_loop_columns' );
+
+// Legacy WooCommerce columns filter.
+if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
+	add_filter( 'loop_shop_columns', 'dyad_2_woocommerce_loop_columns' );
+}
 
 /**
  * Related Products Args.
@@ -170,12 +185,27 @@ if ( ! function_exists( 'dyad_2_woocommerce_product_columns_wrapper' ) ) {
 	 * @return  void
 	 */
 	function dyad_2_woocommerce_product_columns_wrapper() {
-		$columns = dyad_2_woocommerce_loop_columns();
+		$columns = dyad_2_loop_columns();
 		echo '<div class="columns-' . absint( $columns ) . '">';
 	}
 }
 add_action( 'woocommerce_before_shop_loop', 'dyad_2_woocommerce_product_columns_wrapper', 40 );
 
+if ( ! function_exists( 'dyad_2_loop_columns' ) ) {
+	/**
+	 * Default loop columns on product archives
+	 *
+	 * @return integer products per row
+	 */
+	function dyad_2_loop_columns() {
+		$columns = 3; // 3 products per row
+		if ( function_exists( 'wc_get_default_products_per_row' ) ) {
+			$columns = wc_get_default_products_per_row();
+		}
+		return apply_filters( 'dyad_2_loop_columns', $columns );
+	}
+}
+
 if ( ! function_exists( 'dyad_2_woocommerce_product_columns_wrapper_close' ) ) {
 	/**
 	 * Product columns wrapper close.
@@ -355,3 +385,11 @@ function dyad_2_woocommerce_jetpack_products_per_page( $args ) {
 	return $args;
 }
 add_filter( 'infinite_scroll_settings', 'dyad_2_woocommerce_jetpack_products_per_page' );
+
+/**
+ * Move the sale flash badge
+ */
+remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
+add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
+remove_action ( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
+add_action ( 'woocommerce_single_product_summary', 'woocommerce_show_product_sale_flash', 5 );

dyad-2/style.css

@@ -4,7 +4,7 @@ Theme URI: http://wordpress.com/themes/dyad-2/
 Author: Automattic
 Author URI: http://wordpress.com/themes
 Description: Dyad pairs your written content and images together in perfect balance. The theme is geared towards photographers, foodies, artists, and anyone who is looking for a strong photographic presence on their website.
-Version: 2.0.4-wpcom
+Version: 2.0.5-wpcom
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: art, artwork, blog, blue, classic-menu, custom-colors, custom-header, custom-menu, dark, design, editor-style, featured-images, food, grid-layout, infinite-scroll, photoblogging, photography, post-slider, responsive-layout, rtl-language-support, site-logo, social-menu, sticky-post, threaded-comments, translation-ready, yellow

dyad-2/woocommerce-rtl.css

@@ -47,11 +47,6 @@ table.shop_table_responsive tr td.product-remove a {
 	float: left;
 }
 
-.onsale {
-	left: auto;
-	right: 0;
-}
-
 @media screen and (min-width: 768px) {
 	ul.products li.product {
 		float: right;

dyad-2/woocommerce.css

@@ -185,13 +185,12 @@ table.shop_table_responsive tr td.download-actions .button {
 .onsale {
 	background-color: #678db8;
 	color: #fff;
+	display: inline-block;
 	font-size: 1.3rem;
-	left: 0;
 	letter-spacing: .1em;
+	margin-bottom: 1em;
 	padding: 10px 15px;
-	position: absolute;
 	text-transform: uppercase;
-	top: 0;
 }
 
 ul.products {
@@ -227,13 +226,12 @@ ul.products li.product .woocommerce-loop-product__title {
 ul.products li.product img {
 	display: block;
 	margin: 0 auto;
-	width: 100%;
+	max-width: 100%;
 }
 
 ul.products li.product span.price {
 	display: block;
 	padding-bottom: 1em;
-	padding-top: 0.8em;
 }
 
 ul.products li.product .added_to_cart {
@@ -265,21 +263,22 @@ ul.products li.product .button.added::after {
 ul.products li.product .button {
 	background: #e7ae01;
 	display: inline-block;
+	white-space: normal;
 }
 
-.columns-3 {
+.woocommerce .products {
 	margin-top: 1.5em;
 }
 
-.columns-3:before,
-.columns-3:after {
+.woocommerce .products:before,
+.woocommerce .products:after {
 	clear: both;
 	content: '';
 	display: table;
 }
 
 @media screen and (min-width: 768px) {
-	body.woocommerce .columns-3 {
+	body.woocommerce .products {
 		margin: 0 auto;
 		max-width: 1080px;
 	}
@@ -377,17 +376,14 @@ ul.products li.product .button {
 
 .single-product div.product .woocommerce-product-gallery img {
 	display: block;
+	margin-right: auto;
+	margin-left: auto;
 }
 
 .single-product .woocommerce-product-gallery__image {
 	text-align: center;
 }
 
-.single-product div.product > span.onsale {
-	top: 50px;
-	z-index: 9;
-}
-
 .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
 	background: #678db8;
 	display: block;
@@ -583,11 +579,11 @@ ul.products li.product .button {
 
 .single-product div.product .price {
 	display: block;
+	padding-top: 0;
 	padding-bottom: 1.5em;
 }
 
 .single-product div.product .price .amount {
-	color: #678db8;
 	font-weight: 700;
 	font-size: 2rem;
 }
@@ -664,6 +660,7 @@ ul.products li.product .button {
 
 .single-product div.product .product_title {
 	margin-top: 1rem;
+	margin-bottom: 1rem;
 }
 
 /**