Dara: Fixes WooCommerce products column layout and adds support for the 3.3+ new Customizer options

dara/inc/woocommerce.php

@@ -16,10 +16,19 @@
  * @return void
  */
 function dara_woocommerce_setup() {
-	add_theme_support( 'woocommerce', array(
-		'thumbnail_image_width' => 300,
+	// Declare WooCommerce support.
+	add_theme_support( 'woocommerce', apply_filters( 'dara_woocommerce_args', array(
 		'single_image_width'    => 624,
-	) );
+		'thumbnail_image_width' => 300,
+		'product_grid'          => array(
+			'default_columns' => 4,
+			'default_rows'    => 3,
+			'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' );
@@ -88,7 +97,11 @@ add_filter( 'body_class', 'dara_woocommerce_active_body_class' );
 function dara_woocommerce_products_per_page() {
 	return 12;
 }
-add_filter( 'loop_shop_per_page', 'dara_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', 'dara_woocommerce_products_per_page' );
+}
 
 /**
  * Product gallery thumnbail columns.
@@ -108,7 +121,11 @@ add_filter( 'woocommerce_product_thumbnails_columns', 'dara_woocommerce_thumbnai
 function dara_woocommerce_loop_columns() {
 	return 4;
 }
-add_filter( 'loop_shop_columns', 'dara_woocommerce_loop_columns' );
+
+// Legacy WooCommerce columns filter.
+if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
+	add_filter( 'loop_shop_columns', 'dara_woocommerce_loop_columns' );
+}
 
 /**
  * Related Products Args.
@@ -135,12 +152,29 @@ if ( ! function_exists( 'dara_woocommerce_product_columns_wrapper' ) ) {
 	 * @return  void
 	 */
 	function dara_woocommerce_product_columns_wrapper() {
-		$columns = dara_woocommerce_loop_columns();
+		$columns = dara_loop_columns();
 		echo '<div class="columns-' . absint( $columns ) . '">';
 	}
 }
 add_action( 'woocommerce_before_shop_loop', 'dara_woocommerce_product_columns_wrapper', 40 );
 
+if ( ! function_exists( 'dara_loop_columns' ) ) {
+	/**
+	 * Default loop columns on product archives
+	 *
+	 * @return integer products per row
+	 */
+	function dara_loop_columns() {
+		$columns = 4; // 4 products per row
+
+		if ( function_exists( 'wc_get_default_products_per_row' ) ) {
+			$columns = wc_get_default_products_per_row();
+		}
+
+		return apply_filters( 'dara_loop_columns', $columns );
+	}
+}
+
 if ( ! function_exists( 'dara_woocommerce_product_columns_wrapper_close' ) ) {
 	/**
 	 * Product columns wrapper close.

dara/sass/_general.scss

@@ -573,6 +573,9 @@ ul.products li.product {
 
 	.button {
 		margin-top: 1em;
+		max-width: 100%;
+		white-space: normal;
+		word-wrap: break-word;
 	}
 
 	.price {

dara/sass/_layout.scss

@@ -121,6 +121,10 @@ ul.products {
 		position: relative;
 		width: 22.05%;
 		margin-left: 0;
+
+		a img {
+			width: auto;
+		}
 	}
 
 	li.first {
@@ -132,49 +136,6 @@ ul.products {
 	}
 }
 
-.woocommerce {
-	&.columns-1 {
-		ul.products {
-			li.product {
-				width: 100%;
-				margin-right: 0;
-			}
-		}
-	}
-
-	&.columns-2 {
-		ul.products {
-			li.product {
-				width: 48%;
-			}
-		}
-	}
-
-	&.columns-3 {
-		ul.products {
-			li.product {
-				width: 30.75%;
-			}
-		}
-	}
-
-	&.columns-5 {
-		ul.products {
-			li.product {
-				width: 16.95%;
-			}
-		}
-	}
-
-	&.columns-6 {
-		ul.products {
-			li.product {
-				width: 13.5%;
-			}
-		}
-	}
-}
-
 .woocommerce-result-count {
 	float: left;
 }
@@ -357,6 +318,51 @@ form {
 	}
 }
 
+@media screen and (min-width: 768px) {
+	.woocommerce {
+		.columns-1 {
+			ul.products {
+				li.product {
+					width: 100%;
+					margin-right: 0;
+				}
+			}
+		}
+
+		.columns-2 {
+			ul.products {
+				li.product {
+					width: 48%;
+				}
+			}
+		}
+
+		.columns-3 {
+			ul.products {
+				li.product {
+					width: 30.75%;
+				}
+			}
+		}
+
+		.columns-5 {
+			ul.products {
+				li.product {
+					width: 16.95%;
+				}
+			}
+		}
+
+		.columns-6 {
+			ul.products {
+				li.product {
+					width: 13.5%;
+				}
+			}
+		}
+	}
+}
+
 @media screen and (min-width: 1000px) {
 	.woocommerce {
 		.site-content {

dara/style.css

@@ -4,7 +4,7 @@ Theme URI: http://wordpress.com/themes/dara/
 Author: Automattic
 Author URI: http://wordpress.com/themes/
 Description: With bold featured images and bright, cheerful colors, Dara is ready to get to work for your business.
-Version: 1.2.2-wpcom
+Version: 1.2.3-wpcom
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: dara

dara/woocommerce-rtl.css

@@ -635,6 +635,9 @@ ul.products li.product .star-rating {
 
 ul.products li.product .button {
   margin-top: 1em;
+  max-width: 100%;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 ul.products li.product .price {
@@ -2986,6 +2989,10 @@ ul.products li.product {
   margin-right: 0;
 }
 
+ul.products li.product a img {
+  width: auto;
+}
+
 ul.products li.first {
   clear: both;
 }
@@ -2994,27 +3001,6 @@ ul.products li.last {
   margin-left: 0;
 }
 
-.woocommerce.columns-1 ul.products li.product {
-  width: 100%;
-  margin-left: 0;
-}
-
-.woocommerce.columns-2 ul.products li.product {
-  width: 48%;
-}
-
-.woocommerce.columns-3 ul.products li.product {
-  width: 30.75%;
-}
-
-.woocommerce.columns-5 ul.products li.product {
-  width: 16.95%;
-}
-
-.woocommerce.columns-6 ul.products li.product {
-  width: 13.5%;
-}
-
 .woocommerce-result-count {
   float: right;
 }
@@ -3266,6 +3252,25 @@ form .form-row-wide {
   margin: .25em;
 }
 
+@media screen and (min-width: 768px) {
+  .woocommerce .columns-1 ul.products li.product {
+    width: 100%;
+    margin-left: 0;
+  }
+  .woocommerce .columns-2 ul.products li.product {
+    width: 48%;
+  }
+  .woocommerce .columns-3 ul.products li.product {
+    width: 30.75%;
+  }
+  .woocommerce .columns-5 ul.products li.product {
+    width: 16.95%;
+  }
+  .woocommerce .columns-6 ul.products li.product {
+    width: 13.5%;
+  }
+}
+
 @media screen and (min-width: 1000px) {
   .woocommerce .site-content {
     padding: 0;

dara/woocommerce.css

@@ -635,6 +635,9 @@ ul.products li.product .star-rating {
 
 ul.products li.product .button {
   margin-top: 1em;
+  max-width: 100%;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 ul.products li.product .price {
@@ -2987,6 +2990,10 @@ ul.products li.product {
   margin-left: 0;
 }
 
+ul.products li.product a img {
+  width: auto;
+}
+
 ul.products li.first {
   clear: both;
 }
@@ -2995,27 +3002,6 @@ ul.products li.last {
   margin-right: 0;
 }
 
-.woocommerce.columns-1 ul.products li.product {
-  width: 100%;
-  margin-right: 0;
-}
-
-.woocommerce.columns-2 ul.products li.product {
-  width: 48%;
-}
-
-.woocommerce.columns-3 ul.products li.product {
-  width: 30.75%;
-}
-
-.woocommerce.columns-5 ul.products li.product {
-  width: 16.95%;
-}
-
-.woocommerce.columns-6 ul.products li.product {
-  width: 13.5%;
-}
-
 .woocommerce-result-count {
   float: left;
 }
@@ -3269,6 +3255,25 @@ form .form-row-wide {
   margin: .25em;
 }
 
+@media screen and (min-width: 768px) {
+  .woocommerce .columns-1 ul.products li.product {
+    width: 100%;
+    margin-right: 0;
+  }
+  .woocommerce .columns-2 ul.products li.product {
+    width: 48%;
+  }
+  .woocommerce .columns-3 ul.products li.product {
+    width: 30.75%;
+  }
+  .woocommerce .columns-5 ul.products li.product {
+    width: 16.95%;
+  }
+  .woocommerce .columns-6 ul.products li.product {
+    width: 13.5%;
+  }
+}
+
 @media screen and (min-width: 1000px) {
   .woocommerce .site-content {
     padding: 0;