Lodestar: Adds support for the 3.3+ new WC Customizer options (See #87)

lodestar/inc/woocommerce.php

@@ -15,10 +15,17 @@
  * @return void
  */
 function lodestar_woocommerce_setup() {
-	add_theme_support( 'woocommerce', array(
-		'thumbnail_image_width' => 830,
+	add_theme_support( 'woocommerce', apply_filters( 'lodestar_woocommerce_args', array(
 		'single_image_width'    => 894,
-	) );
+		'thumbnail_image_width' => 350,
+		'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' );
@@ -71,7 +78,10 @@ function lodestar_woocommerce_products_per_page() {
 	return intval( apply_filters( 'lodestar_woocommerce_products_per_page', 12 ) );
 }
 
-add_filter( 'loop_shop_per_page', 'lodestar_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', 'lodestar_woocommerce_products_per_page' );
+}
 
 /**
  * Product gallery thumnbail columns
@@ -93,7 +103,10 @@ function lodestar_woocommerce_loop_columns() {
 	return intval( apply_filters( 'lodestar_woocommerce_loop_columns', 3 ) );
 }
 
-add_filter( 'loop_shop_columns', 'lodestar_woocommerce_loop_columns' );
+// Legacy WooCommerce columns filter.
+if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '3.3', '<' ) ) {
+	add_filter( 'loop_shop_columns', 'lodestar_woocommerce_loop_columns' );
+}
 
 /**
  * Related Products Args
@@ -119,13 +132,29 @@ if ( ! function_exists( 'lodestar_woocommerce_product_columns_wrapper' ) ) {
 	 * @return  void
 	 */
 	function lodestar_woocommerce_product_columns_wrapper() {
-		$columns = lodestar_woocommerce_loop_columns();
+		$columns = lodestar_loop_columns();
 		echo '<div class="columns-' . $columns . '">';
 	}
 }
 
 add_action( 'woocommerce_before_shop_loop', 'lodestar_woocommerce_product_columns_wrapper', 40 );
 
+
+if ( ! function_exists( 'lodestar_loop_columns' ) ) {
+	/**
+	 * Default loop columns on product archives
+	 *
+	 * @return integer products per row
+	 */
+	function lodestar_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( 'lodestar_loop_columns', $columns );
+	}
+}
+
 if ( ! function_exists( 'lodestar_woocommerce_product_columns_wrapper_close' ) ) {
 	/**
 	 * Product columns wrapper close

lodestar/woocommerce-rtl.css

@@ -167,29 +167,6 @@ ul.products {
 div[class^="columns-"] {
   clear: both; }
 
-@media screen and (min-width: 896px) {
-  ul.products li.product {
-    float: right;
-    width: 30.7966666667%;
-    margin-left: 3.8%; }
-    ul.products li.product.first {
-      clear: both; }
-    ul.products li.product.last {
-      margin-left: 0; }
-  .columns-1 ul.products li.product {
-    float: none;
-    width: 100%; }
-  .columns-2 ul.products li.product {
-    width: 48.1%; }
-  .columns-3 ul.products li.product {
-    width: 30.7966666667%; }
-  .columns-4 ul.products li.product {
-    width: 22.15%; }
-  .columns-5 ul.products li.product {
-    width: 16.96%; }
-  .columns-6 ul.products li.product {
-    width: 13.4933333333%; } }
-
 /**
  *  Product loop
  */
@@ -224,7 +201,8 @@ ul.products li.product {
   ul.products li.product span.price del {
     display: block; }
   ul.products li.product .button {
-    display: inline-block; }
+    display: inline-block;
+    max-width: 100%; }
     ul.products li.product .button.loading:after, ul.products li.product .button.added:after {
       font-family: Genericons;
       margin-right: .53em;
@@ -728,7 +706,36 @@ ul#shipping_method {
     padding-top: 0.703125em; }
   .widget_product_categories ul li {
     padding-bottom: 0.703125em;
-    padding-top: 0.703125em; } }
+    padding-top: 0.703125em; }
+  ul.products li.product {
+    float: right;
+    width: 30.7966666667%;
+    margin-left: 3.8%; }
+
+  ul.products li.product.first {
+    clear: both; }
+
+  ul.products li.product.last {
+    margin-left: 0; }
+
+  .columns-1 ul.products li.product {
+    float: none;
+    width: 100%; }
+
+  .columns-2 ul.products li.product {
+    width: 48.1%; }
+
+  .columns-3 ul.products li.product {
+    width: 30.7966666667%; }
+
+  .columns-4 ul.products li.product {
+    width: 22.15%; }
+
+  .columns-5 ul.products li.product {
+    width: 16.96%; }
+
+  .columns-6 ul.products li.product {
+    width: 13.4933333333%; } }
 
 /**
  * General WooCommerce components

lodestar/woocommerce.css

@@ -241,46 +241,6 @@ div[class^="columns-"] {
 	.archive.woocommerce-active:not(.infinite-scroll) .post {
 		padding-bottom: 5em;
 	}
-
-	ul.products li.product {
-		float: left;
-		width: 30.7966666667%;
-		margin-right: 3.8%;
-	}
-
-	ul.products li.product.first {
-		clear: both;
-	}
-
-	ul.products li.product.last {
-		margin-right: 0;
-	}
-
-	.columns-1 ul.products li.product {
-		float: none;
-		width: 100%;
-	}
-
-	.columns-2 ul.products li.product {
-		width: 48.1%;
-	}
-
-	.columns-3 ul.products li.product {
-		width: 30.7966666667%;
-	}
-
-	.columns-4 ul.products li.product {
-		width: 22.15%;
-	}
-
-	.columns-5 ul.products li.product {
-		width: 16.96%;
-	}
-
-	.columns-6 ul.products li.product {
-		width: 13.4933333333%;
-	}
-
 }
 
 /**
@@ -333,6 +293,7 @@ ul.products li.product span.price del {
 
 ul.products li.product .button {
 	display: inline-block;
+	max-width: 100%;
 }
 
 ul.products li.product .button.loading:after, ul.products li.product .button.added:after {
@@ -1123,6 +1084,44 @@ ul#shipping_method {
 		padding-top: 0.703125em;
 	}
 
+	ul.products li.product {
+		float: left;
+		width: 30.7966666667%;
+		margin-right: 3.8%;
+	}
+
+	ul.products li.product.first {
+		clear: both;
+	}
+
+	ul.products li.product.last {
+		margin-right: 0;
+	}
+
+	.columns-1 ul.products li.product {
+		float: none;
+		width: 100%;
+	}
+
+	.columns-2 ul.products li.product {
+		width: 48.1%;
+	}
+
+	.columns-3 ul.products li.product {
+		width: 30.7966666667%;
+	}
+
+	.columns-4 ul.products li.product {
+		width: 22.15%;
+	}
+
+	.columns-5 ul.products li.product {
+		width: 16.96%;
+	}
+
+	.columns-6 ul.products li.product {
+		width: 13.4933333333%;
+	}
 }
 
 /**