From 93777c2c015f0f22940c6b7225538e6102e18762 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Tue, 19 Apr 2016 13:27:44 -0400
Subject: [PATCH] Improve image sizes on product detail

---
 css/app.css                     | 23 ++++++++++++++++-------
 functions.php                   |  7 ++++++-
 scss/plugins/_woocommerce.scss  | 27 ++++++++++++++++++---------
 woocommerce/content-product.php |  4 +++-
 4 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/css/app.css b/css/app.css
index 74cc879..bee0bce 100644
--- a/css/app.css
+++ b/css/app.css
@@ -7053,16 +7053,20 @@ main.woocommerce, div.woocommerce {
     /* End Related products */ }
     main.woocommerce .main.woo-single-product #content .type-product .images, div.woocommerce .main.woo-single-product #content .type-product .images {
       width: 40%; }
+      main.woocommerce .main.woo-single-product #content .type-product .images .woocommerce-main-image.zoom, div.woocommerce .main.woo-single-product #content .type-product .images .woocommerce-main-image.zoom {
+        display: block;
+        height: 180px;
+        overflow: hidden;
+        border: 1px solid lightgrey;
+        border-radius: 2px; }
+      main.woocommerce .main.woo-single-product #content .type-product .images .woocommerce-main-image.zoom .wp-post-image, div.woocommerce .main.woo-single-product #content .type-product .images .woocommerce-main-image.zoom .wp-post-image {
+        min-height: 180px;
+        width: 100%; }
       @media only screen and (max-width: 40em) {
         main.woocommerce .main.woo-single-product #content .type-product .images, div.woocommerce .main.woo-single-product #content .type-product .images {
           width: 100%; } }
-      main.woocommerce .main.woo-single-product #content .type-product .images img, div.woocommerce .main.woo-single-product #content .type-product .images img {
-        border: 1px solid lightgrey;
-        border-radius: 2px; }
       main.woocommerce .main.woo-single-product #content .type-product .images #wpb_wiz_img_id, div.woocommerce .main.woo-single-product #content .type-product .images #wpb_wiz_img_id {
         height: 180px; }
-      main.woocommerce .main.woo-single-product #content .type-product .images .wp-post-image, div.woocommerce .main.woo-single-product #content .type-product .images .wp-post-image {
-        height: 180px; }
     main.woocommerce .main.woo-single-product #content .type-product .summary.entry-summary, div.woocommerce .main.woo-single-product #content .type-product .summary.entry-summary {
       width: 60%; }
       @media only screen and (max-width: 40em) {
@@ -7084,9 +7088,14 @@ main.woocommerce, div.woocommerce {
       clear: none;
       text-align: center; }
     main.woocommerce .main.woo-single-product #content .thumbnails > a, div.woocommerce .main.woo-single-product #content .thumbnails > a {
-      padding: 4px; }
+      padding: 0px;
+      height: 35px;
+      overflow: hidden;
+      border: 1px solid lightgrey;
+      border-radius: 2px; }
       main.woocommerce .main.woo-single-product #content .thumbnails > a img, div.woocommerce .main.woo-single-product #content .thumbnails > a img {
-        height: 35px; }
+        min-height: 35px;
+        min-width: 100%; }
     main.woocommerce .main.woo-single-product #content .product.has-default-attributes.has-children > .images, div.woocommerce .main.woo-single-product #content .product.has-default-attributes.has-children > .images {
       opacity: 1; }
     main.woocommerce .main.woo-single-product #content .entry-summary .product_title, div.woocommerce .main.woo-single-product #content .entry-summary .product_title {
diff --git a/functions.php b/functions.php
index d1f23a5..7a4a7d9 100644
--- a/functions.php
+++ b/functions.php
@@ -159,10 +159,15 @@ add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_produ
 remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
 add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 20 );
 
+// Change number of thumbnails per row to 4
+add_filter ( 'woocommerce_product_thumbnails_columns', 'four_thumb_cols' );
+ function four_thumb_cols() {
+    return 4; // .last class applied to every 4th thumbnail
+ }
 // Change number or products per row to 3
 add_filter('loop_shop_columns', 'loop_columns',999);
 function loop_columns() {
-        return 3; // 3 products per row
+    return 3; // 3 products per row
 }
 // Add WooCommerce excerpt to the item title on shop page
 add_action('woocommerce_after_shop_loop_item_title','woocommerce_template_single_excerpt', 5);
diff --git a/scss/plugins/_woocommerce.scss b/scss/plugins/_woocommerce.scss
index 7466dfa..106a28a 100644
--- a/scss/plugins/_woocommerce.scss
+++ b/scss/plugins/_woocommerce.scss
@@ -727,20 +727,24 @@ div.woocommerce {
     .main.woo-single-product #content {
         .type-product {
             .images {
+                .woocommerce-main-image.zoom {
+                    display: block;
+                    height:180px;
+                    overflow: hidden;
+                    border: 1px solid lightgrey;
+                    border-radius: 2px;
+                }
+                .woocommerce-main-image.zoom .wp-post-image {
+                    min-height: 180px;
+                    width: 100%;
+                }
                 width: 40%;
                 @media #{$small-only} {
                     width: 100%;
                 }
-                img {
-                    border: 1px solid lightgrey;
-                    border-radius: 2px;
-                }
                 #wpb_wiz_img_id {
                     height: 180px;
                 }
-                .wp-post-image {
-                    height: 180px;
-                }
                 
             }
             .summary.entry-summary {
@@ -778,9 +782,14 @@ div.woocommerce {
             }
         }
         .thumbnails > a {
-            padding: 4px;
+            padding: 0px;
+            height: 35px;
+            overflow: hidden;
+            border: 1px solid lightgrey;
+            border-radius: 2px;
             img {
-                height: 35px;
+                min-height: 35px;
+                min-width: 100%;
             }
         }
         .product.has-default-attributes.has-children {
diff --git a/woocommerce/content-product.php b/woocommerce/content-product.php
index 670c898..77aa9a1 100644
--- a/woocommerce/content-product.php
+++ b/woocommerce/content-product.php
@@ -52,7 +52,9 @@ if ( 0 === $woocommerce_loop['loop'] % $woocommerce_loop['columns'] ) {
 <li <?php post_class( $classes ); ?>>
     <div class="row collapse">
         <div class="small-12 large-4 column">
-        <?php echo $product->get_image(); ?>
+            <a class="more" href="<?php the_permalink(); ?>">
+            <?php echo $product->get_image(); ?>
+            </a>
         </div>
         <div class="small-12 large-8 columns">
             <div class="row">
-- 
2.17.1