Product title styling, 3-column shop page, responsiveness

diff --git a/css/app.css b/css/app.css
index 22b9607..4c2ac6a 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6567,7 +6567,7 @@ main {
       background-color: #476e70;
       color: white; }
       .woocommerce #woo-quick-display .button:hover {
-        background-color: #B5121B; }
+        background-color: #0f789f; }
     .woocommerce #woo-quick-display h3 {
       padding-top: 0;
       text-align: center; }
@@ -6594,7 +6594,7 @@ main {
     background-color: #476e70;
     color: white; }
     .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
-      background-color: #B5121B; }
+      background-color: #0f789f; }
   .woocommerce .cart-collaterals .cart_totals, .woocommerce .woocommerce-page .cart-collaterals .cart_totals {
     float: right;
     margin-bottom: 40px;
@@ -6776,10 +6776,6 @@ main {
     margin-top: 25px; }
   .woocommerce .woocommerce-ordering select.orderby {
     max-width: 200px; }
-  @media only screen and (max-width: 40em) {
-    .woocommerce #content ul.products li.product-category.product, .woocommerce #content .woocommerce-page ul.products li.product-category.product {
-      float: none;
-      margin: 0 auto 30px; } }
   .woocommerce main.page-inside #content-wrapper #main-content #main-text.shop-cat-list {
     padding: 0 6px; }
   .woocommerce main.page-inside #content-wrapper #main-content #main-text.shop-cat-list .shop-cat-list-content > div {
@@ -6978,8 +6974,9 @@ main {
       .woocommerce #content .product.type-product .variations_form .single_variation_wrap .variations_button .quantity {
         width: 170px; } }
   .woocommerce #content .product.type-product h1.product_title {
-    color: #b5121b;
-    font-size: 28px;
+    color: #0f789f;
+    font-size: 24px;
+    font-family: open sans;
     font-weight: bold;
     line-height: 1;
     margin: 0 auto;
@@ -6989,7 +6986,6 @@ main {
     clear: both;
     float: right;
     margin-top: 10px;
-    padding: 2px 8px;
     background: transparent url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
     padding: 3px 10px;
     font-size: 14px;
@@ -7253,18 +7249,38 @@ main {
   color: #0f789f; }
 
 /* Product categories */
-#main-content ul.products li.product-category.product {
+#content ul.products li.product-category.product {
   width: 33.33%;
   float: left;
   padding: 20px;
   margin: 0; }
   @media only screen and (max-width: 40em) {
-    #main-content ul.products li.product-category.product {
+    #content ul.products li.product-category.product {
       width: 50%; } }
-  #main-content ul.products li.product-category.product .products-image-container {
+  #content ul.products li.product-category.product .products-image-container {
     height: 200px; }
 
+/*#content ul.products li.product-category.product, 
+#content .woocommerce-page ul.products li.product-category.product {
+    @media only screen and (max-width: 40em) {
+        float: none;
+        margin: 0 auto 30px;
+    }
+}*/
 /* End product categories */
+/* Button styles */
+main .woocommerce #respond input#submit.alt:hover, main .woocommerce a.button.alt:hover, main .woocommerce button.button.alt:hover, main .woocommerce input.button.alt:hover {
+  background: transparent url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
+  border: 1px solid #0f789f; }
+
+main .woocommerce #respond input#submit.alt, main .woocommerce a.button.alt, main .woocommerce button.button.alt, main .woocommerce input.button.alt {
+  background: transparent url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
+  border: 1px solid white; }
+
+/* End Button styles */
+main.woocommerce ul.products li.product, main.woocommerce-page ul.products li.product, main.woocommerce-page[class*="columns-"] ul.products li.product, main.woocommerce[class*="columns-"] ul.products li.product {
+  clear: none; }
+
 .woocommerce .st_sharethis {
   float: right;
   width: 58px; }

diff --git a/functions.php b/functions.php
index b3c41e5..f2e4d1e 100644 (file)
--- a/functions.php
+++ b/functions.php
@@ -142,6 +142,11 @@ add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_p
 function prod_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
+}
 // 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 85dfeae..eb348c0 100644 (file)
--- a/scss/plugins/_woocommerce.scss
+++ b/scss/plugins/_woocommerce.scss
@@ -30,7 +30,7 @@
             background-color: #476e70;
             color: white;
             &:hover {
-                background-color: #B5121B;
+                background-color: $blue;
             }
         }
         h3 {
@@ -69,7 +69,7 @@
         background-color: #476e70;
         color: white;
         &:hover {
-            background-color: #B5121B;
+            background-color: $blue;
         }
     }
     .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
@@ -350,13 +350,6 @@
     .woocommerce-ordering select.orderby {
         max-width: 200px;
     }
-    #content ul.products li.product-category.product, 
-    #content .woocommerce-page ul.products li.product-category.product {
-        @media #{$small-only} {
-            float: none;
-            margin: 0 auto 30px;
-        }
-    }
     main.page-inside #content-wrapper #main-content #main-text.shop-cat-list {
         padding: 0 6px;
     }
@@ -644,8 +637,9 @@
             }
         }
         h1.product_title {
-            color: #b5121b;
-            font-size: 28px;
+            color: #0f789f;
+            font-size: 24px;
+            font-family: open sans;
             font-weight: bold;
             line-height: 1;
             margin: 0 auto;
@@ -659,7 +653,6 @@
             @media #{$small-only} {
                 float:none;
             }
-            padding: 2px 8px;
             background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
             padding: 3px 10px;
             font-size: 14px;
@@ -1005,7 +998,7 @@
     }
 }
 /* Product categories */
-#main-content ul.products li.product-category.product {
+#content ul.products li.product-category.product {
     width: 33.33%;
     @media #{$small-only} {
         width: 50%;
@@ -1017,4 +1010,30 @@
         height: 200px;
     }
 }
-/* End product categories */
\ No newline at end of file
+
+/*#content ul.products li.product-category.product, 
+#content .woocommerce-page ul.products li.product-category.product {
+    @media #{$small-only} {
+        float: none;
+        margin: 0 auto 30px;
+    }
+}*/
+/* End product categories */
+
+/* Button styles */
+main .woocommerce #respond input#submit.alt:hover, main .woocommerce a.button.alt:hover, main .woocommerce button.button.alt:hover, main .woocommerce input.button.alt:hover {    
+        background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
+        border:1px solid $blue;
+}
+main .woocommerce #respond input#submit.alt, main .woocommerce a.button.alt, main .woocommerce button.button.alt, main .woocommerce input.button.alt {    
+        background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
+        border:1px solid white;
+}
+/* End Button styles */
+
+main.woocommerce ul.products li.product,main.woocommerce-page ul.products li.product,main.woocommerce-page[class*="columns-"] ul.products li.product,main.woocommerce[class*="columns-"] ul.products li.product {
+    clear: none;
+}
+.woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n), .woocommerce-page[class*="columns-"] ul.products li.product:nth-child(2n), .woocommerce[class*="columns-"] ul.products li.product:nth-child(2n) {
+    
+}
\ No newline at end of file

diff --git a/woocommerce/content-product.php b/woocommerce/content-product.php
index 8e5eb47..670c898 100644 (file)
--- a/woocommerce/content-product.php
+++ b/woocommerce/content-product.php
@@ -28,7 +28,7 @@ if ( empty( $woocommerce_loop['loop'] ) ) {
 
 // Store column count for displaying the grid
 if ( empty( $woocommerce_loop['columns'] ) ) {
-       $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
+       $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );
 }
 
 // Ensure visibility

diff --git a/woocommerce/content-product_cat.php b/woocommerce/content-product_cat.php
index bb40a16..c2f6eaa 100644 (file)
--- a/woocommerce/content-product_cat.php
+++ b/woocommerce/content-product_cat.php
@@ -30,12 +30,14 @@ if ( is_shop() && in_array( $category->slug, $excludeCats ) ) {
 
 
 // Store loop count we're currently on
-if ( empty( $woocommerce_loop['loop'] ) )
+if ( empty( $woocommerce_loop['loop'] ) ) {
        $woocommerce_loop['loop'] = 0;
+}
 
 // Store column count for displaying the grid
-if ( empty( $woocommerce_loop['columns'] ) )
+if ( empty( $woocommerce_loop['columns'] ) ) {
        $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 3 );
+}
 
 // Increase loop count
 $woocommerce_loop['loop']++;