Varia: Add product category imagess.

varia/inc/woocommerce.php

@@ -36,15 +36,31 @@ add_action( 'after_setup_theme', 'varia_woocommerce_setup' );
  * Add a custom wrapper for woocomerce content
  */
 function varia_wrapper_start() {
-  echo '<article id="woocommerce-wrapper" class="responsive-max-width">';
+	echo '<article id="woocommerce-wrapper" class="responsive-max-width">';
 }
 add_action('woocommerce_before_main_content', 'varia_wrapper_start', 10);
 
 function varia_wrapper_end() {
-  echo '</article>';
+	echo '</article>';
 }
 add_action('woocommerce_after_main_content', 'varia_wrapper_end', 10);
 
+/**
+ * Display category image on category archive
+ */
+function varia_category_image() {
+    if ( is_product_category() ){
+		global $wp_query;
+		$cat = $wp_query->get_queried_object();
+		$thumbnail_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
+		$image = wp_get_attachment_url( $thumbnail_id );
+		if ( $image ) {
+			echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
+		}
+	}
+}
+add_action( 'woocommerce_archive_description', 'varia_category_image', 2 );
+
 /**
  * Remove WooCommerce Sidebar
  */

varia/sass/vendors/woocommerce/components/_imports.scss

@@ -6,5 +6,6 @@
 @import "cart-collaterals";
 @import "mini-cart";
 @import "product-loops";
-@import "reviews";
+@import "products-header";
 @import "product-tabs";
+@import "reviews";

varia/sass/vendors/woocommerce/components/_products-header.scss

@@ -0,0 +1,9 @@
+/**
+ * Product loops
+ */
+
+body[class*="woocommerce"] #page .woocommerce-products-header {
+	img {
+		display: block;
+	}
+}

varia/sass/vendors/woocommerce/layout/_structure.scss

@@ -11,7 +11,8 @@ body[class*="woocommerce"] #page .products.related,
 body[class*="woocommerce"] #page .up-sells,
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content form,
 body[class*="woocommerce"] #page .woocommerce-address-fields,
-.woocommerce-Reviews #comments {
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments,
+body[class*="woocommerce"] #page .woocommerce-products-header {
 
 	& > *:not(:first-child) {
 		margin-top: map-deep-get($config-global, "spacing", "vertical");
@@ -26,7 +27,7 @@ body[class*="woocommerce"] #page .woocommerce-address-fields,
 		margin-top: 0;
 	}
 
-	& > *:empty {
+	& > *:not(img):empty {
 		margin: 0;
 	}
 }

varia/style-woocommerce.css

@@ -902,84 +902,10 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells nav.woocommerce-
 }
 
 /**
- * Reviews
+ * Product loops
  */
-body[class*="woocommerce"] #page {
-	/**
-	 * Reviews
-	 */
-}
-
-body[class*="woocommerce"] #page #reviews h2 small {
-	color: #767676;
-	font-size: 0.83333rem;
-	margin: inherit;
-}
-
-body[class*="woocommerce"] #page #reviews h2 small a {
-	color: currentColor;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist {
-	padding-left: 0;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
-	margin-bottom: 16px;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
-	color: #767676;
-	font-size: 0.83333rem;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar {
-	padding: 0;
-	width: 48px;
-	height: auto;
-	background: transparent;
-	border-color: #DDDDDD;
-	margin: 0;
-	box-shadow: none;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
-	font-family: sans-serif;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
-	margin-left: 64px;
-	border: 1px solid #DDDDDD;
-	border-radius: 4px;
-	padding: 1em 1em 0;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p {
-	margin: 0 0 1em;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p.meta {
-	font-size: 0.83em;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children {
-	list-style: none outside;
-	margin: 20px 0 0 50px;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .star-rating {
-	display: none;
-}
-
-body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
-	border: 1px solid #DDDDDD;
-	border-radius: 4px;
-	padding: 1em 1em 0;
-	margin: 20px 0 0 50px;
-}
-
-body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
-	content: "";
+body[class*="woocommerce"] #page .woocommerce-products-header img {
+	display: block;
 }
 
 /**
@@ -1060,6 +986,87 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
 	font-weight: bold;
 }
 
+/**
+ * Reviews
+ */
+body[class*="woocommerce"] #page {
+	/**
+	 * Reviews
+	 */
+}
+
+body[class*="woocommerce"] #page #reviews h2 small {
+	color: #767676;
+	font-size: 0.83333rem;
+	margin: inherit;
+}
+
+body[class*="woocommerce"] #page #reviews h2 small a {
+	color: currentColor;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist {
+	padding-left: 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li {
+	margin-bottom: 16px;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .meta {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar {
+	padding: 0;
+	width: 48px;
+	height: auto;
+	background: transparent;
+	border-color: #DDDDDD;
+	margin: 0;
+	box-shadow: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
+	font-family: sans-serif;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
+	margin-left: 64px;
+	border: 1px solid #DDDDDD;
+	border-radius: 4px;
+	padding: 1em 1em 0;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p {
+	margin: 0 0 1em;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text p.meta {
+	font-size: 0.83em;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children {
+	list-style: none outside;
+	margin: 20px 0 0 50px;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .star-rating {
+	display: none;
+}
+
+body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
+	border: 1px solid #DDDDDD;
+	border-radius: 4px;
+	padding: 1em 1em 0;
+	margin: 20px 0 0 50px;
+}
+
+body[class*="woocommerce"] #page #reviews #comments .commentlist > li::before {
+	content: "";
+}
+
 /**
  * Structure
  */
@@ -1072,7 +1079,8 @@ body[class*="woocommerce"] #page .products.related > *:not(:first-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:first-child),
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:first-child),
 body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:first-child),
-.woocommerce-Reviews #comments > *:not(:first-child) {
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(:first-child),
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:first-child) {
 	margin-top: 32px;
 }
 
@@ -1082,7 +1090,8 @@ body[class*="woocommerce"] #page .products.related > *:not(:last-child),
 body[class*="woocommerce"] #page .up-sells > *:not(:last-child),
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(:last-child),
 body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(:last-child),
-.woocommerce-Reviews #comments > *:not(:last-child) {
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(:last-child),
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(:last-child) {
 	margin-bottom: 32px;
 }
 
@@ -1098,18 +1107,21 @@ body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:empty +
 body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > .form-row-last,
 body[class*="woocommerce"] #page .woocommerce-address-fields > *:empty + *,
 body[class*="woocommerce"] #page .woocommerce-address-fields > .form-row-last,
-.woocommerce-Reviews #comments > *:empty + *,
-.woocommerce-Reviews #comments > .form-row-last {
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:empty + *,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > .form-row-last,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:empty + *,
+body[class*="woocommerce"] #page .woocommerce-products-header > .form-row-last {
 	margin-top: 0;
 }
 
-body[class*="woocommerce"] #page div.summary > *:empty,
-body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:empty,
-body[class*="woocommerce"] #page .products.related > *:empty,
-body[class*="woocommerce"] #page .up-sells > *:empty,
-body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:empty,
-body[class*="woocommerce"] #page .woocommerce-address-fields > *:empty,
-.woocommerce-Reviews #comments > *:empty {
+body[class*="woocommerce"] #page div.summary > *:not(img):empty,
+body[class*="woocommerce"] #page div.product .woocommerce-tabs .panel > *:not(img):empty,
+body[class*="woocommerce"] #page .products.related > *:not(img):empty,
+body[class*="woocommerce"] #page .up-sells > *:not(img):empty,
+body[class*="woocommerce"] #page .woocommerce-MyAccount-content form > *:not(img):empty,
+body[class*="woocommerce"] #page .woocommerce-address-fields > *:not(img):empty,
+body[class*="woocommerce"] #page .woocommerce-Reviews #comments > *:not(img):empty,
+body[class*="woocommerce"] #page .woocommerce-products-header > *:not(img):empty {
 	margin: 0;
 }