From 34225c798758316aaf96d5dde7a9958ff8255522 Mon Sep 17 00:00:00 2001 From: Laury GvR Date: Mon, 4 Apr 2016 15:02:28 -0400 Subject: [PATCH] Product title styling, 3-column shop page, responsiveness --- css/app.css | 40 ++++++++++++++++-------- functions.php | 5 +++ scss/plugins/_woocommerce.scss | 47 ++++++++++++++++++++--------- woocommerce/content-product.php | 2 +- woocommerce/content-product_cat.php | 6 ++-- 5 files changed, 71 insertions(+), 29 deletions(-) diff --git a/css/app.css b/css/app.css index 22b9607..4c2ac6a 100644 --- 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 --- 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 --- 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 --- 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 --- 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']++; -- 2.17.1