Merge pull request #1394 from Ismail-elkorchi/woocommerce-support

Remove columns wrapper and hardcoded values from WooCommerce

inc/woocommerce.php

@@ -12,11 +12,25 @@
  *
  * @link https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
  * @link https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)
+ * @link https://github.com/woocommerce/woocommerce/wiki/Declaring-WooCommerce-support-in-themes
  *
  * @return void
  */
 function _s_woocommerce_setup() {
-	add_theme_support( 'woocommerce' );
+	add_theme_support(
+		'woocommerce',
+		array(
+			'thumbnail_image_width' => 150,
+			'single_image_width'    => 300,
+			'product_grid'          => array(
+				'default_rows'    => 3,
+				'min_rows'        => 1,
+				'default_columns' => 4,
+				'min_columns'     => 1,
+				'max_columns'     => 6,
+			),
+		)
+	);
 	add_theme_support( 'wc-product-gallery-zoom' );
 	add_theme_support( 'wc-product-gallery-lightbox' );
 	add_theme_support( 'wc-product-gallery-slider' );
@@ -70,36 +84,6 @@ function _s_woocommerce_active_body_class( $classes ) {
 }
 add_filter( 'body_class', '_s_woocommerce_active_body_class' );
 
-/**
- * Products per page.
- *
- * @return integer number of products.
- */
-function _s_woocommerce_products_per_page() {
-	return 12;
-}
-add_filter( 'loop_shop_per_page', '_s_woocommerce_products_per_page' );
-
-/**
- * Product gallery thumbnail columns.
- *
- * @return integer number of columns.
- */
-function _s_woocommerce_thumbnail_columns() {
-	return 4;
-}
-add_filter( 'woocommerce_product_thumbnails_columns', '_s_woocommerce_thumbnail_columns' );
-
-/**
- * Default loop columns on product archives.
- *
- * @return integer products per row.
- */
-function _s_woocommerce_loop_columns() {
-	return 3;
-}
-add_filter( 'loop_shop_columns', '_s_woocommerce_loop_columns' );
-
 /**
  * Related Products Args.
  *
@@ -118,31 +102,6 @@ function _s_woocommerce_related_products_args( $args ) {
 }
 add_filter( 'woocommerce_output_related_products_args', '_s_woocommerce_related_products_args' );
 
-if ( ! function_exists( '_s_woocommerce_product_columns_wrapper' ) ) {
-	/**
-	 * Product columns wrapper.
-	 *
-	 * @return  void
-	 */
-	function _s_woocommerce_product_columns_wrapper() {
-		$columns = _s_woocommerce_loop_columns();
-		echo '<div class="columns-' . absint( $columns ) . '">';
-	}
-}
-add_action( 'woocommerce_before_shop_loop', '_s_woocommerce_product_columns_wrapper', 40 );
-
-if ( ! function_exists( '_s_woocommerce_product_columns_wrapper_close' ) ) {
-	/**
-	 * Product columns wrapper close.
-	 *
-	 * @return  void
-	 */
-	function _s_woocommerce_product_columns_wrapper_close() {
-		echo '</div>';
-	}
-}
-add_action( 'woocommerce_after_shop_loop', '_s_woocommerce_product_columns_wrapper_close', 40 );
-
 /**
  * Remove default WooCommerce wrapper.
  */

sass/shop/_products.scss

@@ -43,28 +43,24 @@ ul.products {
 		}
 	}
 
-	.columns-1 {
+	ul.products.columns-1 {
 
-		ul.products {
+		li.product {
-
+			float: none;
-			li.product {
+			width: 100%;
-				float: none;
-				width: 100%;
-			}
 		}
+
 	}
 
 	@for $i from 2 through 6 {
 
-		.columns-#{$i} {
+		ul.products.columns-#{$i} {
 
-			ul.products {
+			li.product {
 
-				li.product {
+				@include column-width( $i );
-
-					@include column-width( $i );
-				}
 			}
+
 		}
 	}
 }

woocommerce.css

@@ -113,28 +113,28 @@ ul.products li.product .button {
 		margin-right: 0;
 	}
 
-	.columns-1 ul.products li.product {
+	ul.products.columns-1 li.product {
 		float: none;
 		width: 100%;
 	}
 
-	.columns-2 ul.products li.product {
+	ul.products.columns-2 li.product {
 		width: 48.1%;
 	}
 
-	.columns-3 ul.products li.product {
+	ul.products.columns-3 li.product {
 		width: 30.79667%;
 	}
 
-	.columns-4 ul.products li.product {
+	ul.products.columns-4 li.product {
 		width: 22.15%;
 	}
 
-	.columns-5 ul.products li.product {
+	ul.products.columns-5 li.product {
 		width: 16.96%;
 	}
 
-	.columns-6 ul.products li.product {
+	ul.products.columns-6 li.product {
 		width: 13.49333%;
 	}
 }