WooCommerce Grid / List toggle - Version 0.2.2

Version Description

  • 16/01/2013 =
  • Re-applied button style. See FAQ to remove
  • YUI compressed CSS
  • Styles loaded on product tag archives
Download this release

Release Info

Developer jameskoster
Plugin Icon 128x128 WooCommerce Grid / List toggle
Version 0.2.2
Comparing to
See all releases

Code changes from version 0.2.1 to 0.2.2

Files changed (6) hide show
  1. assets/css/button.css +1 -0
  2. assets/css/button.less +64 -0
  3. assets/css/style.css +1 -46
  4. assets/css/style.less +0 -10
  5. grid-list-toggle.php +5 -3
  6. readme.txt +28 -1
assets/css/button.css ADDED
@@ -0,0 +1 @@
 
1
+ .gridlist-toggle{display:block;clear:both;width:4em;border:1px solid #555;padding:0!important;margin-bottom:1.5em;background:#eee;background:-webkit-gradient(linear,left top,left bottom,from(#eee),to(#aaa));background:-webkit-linear-gradient(#eee,#aaa);background:-moz-linear-gradient(center top,#eee 0,#aaa 100%);background:-moz-gradient(center top,#eee 0,#aaa 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eeeeee,endColorstr=#aaaaaa);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eeeeee, endColorstr=#aaaaaa)";-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:1em!important;-webkit-box-shadow:inset 0 1px #eee,inset 0 -1px #999,0 1px 2px rgba(0,0,0,0.3);box-shadow:inset 0 1px #eee,inset 0 -1px #999,0 1px 2px rgba(0,0,0,0.3)}.gridlist-toggle a{display:inline-block;width:2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center;text-shadow:0 1px 0 #fff;text-decoration:none!important;font-weight:normal!important;font-family:sans-serif!important;font-size:1em!important;line-height:1.5em!important;color:#222!important;text-shadow:0 1px 0 #eee;-webkit-transition:background ease-in-out .2s;-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,0.7),inset 0 0 0 1px rgba(255,255,255,0.4);box-shadow:inset 0 0 5px rgba(255,255,255,0.7),inset 0 0 0 1px rgba(255,255,255,0.4)}.gridlist-toggle a#grid{border-right:1px solid #000}.gridlist-toggle a span{display:none}.gridlist-toggle a:hover{color:#000;background:rgba(255,255,255,0.2)}.gridlist-toggle a.active{background:#444;background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#666));background:-webkit-linear-gradient(#444,#666);background:-moz-linear-gradient(center top,#444 0,#666 100%);background:-moz-gradient(center top,#444 0,#666 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#444444,endColorstr=#666666);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#444444, endColorstr=#666666)";color:#fff!important;text-shadow:0 1px 0 #000;-webkit-box-shadow:inset 0 1px 2px #444,inset 0 -1px 0 #777;-moz-box-shadow:inset 0 1px 2px #444,inset 0 -1px 0 #777}
assets/css/button.less ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url(mixins.less);
2
+
3
+ .gridlist-toggle {
4
+ display: block;
5
+ clear:both;
6
+ width:4em;
7
+ border:1px solid #555;
8
+ padding:0 !important;
9
+ margin-bottom:1.5em;
10
+ .vertical_gradient(#eee,#aaa);
11
+ .border_radius(3px);
12
+ line-height: 1em !important;
13
+ -webkit-box-shadow:
14
+ inset 0 1px #eee,
15
+ inset 0 -1px #999,
16
+ 0 1px 2px rgba(0,0,0,0.3);
17
+ box-shadow:
18
+ inset 0 1px #eee,
19
+ inset 0 -1px #999,
20
+ 0 1px 2px rgba(0,0,0,0.3);
21
+ a {
22
+ display: inline-block;
23
+ width:2em;
24
+ .borderbox;
25
+ text-align: center;
26
+ .text_shadow(0,1px,0,#fff);
27
+ text-decoration:none !important;
28
+ font-weight: normal !important;
29
+ font-family: sans-serif !important;
30
+ font-size:1em !important;
31
+ line-height: 1.5em !important;
32
+ color: #222 !important;
33
+ .text_shadow(0,1px,0,#eee);
34
+ -webkit-transition:background ease-in-out .2s;
35
+ -webkit-box-shadow:
36
+ inset 0 0 5px rgba(255,255,255,0.7),
37
+ inset 0 0 0 1px rgba(255,255,255,0.4);
38
+ box-shadow:
39
+ inset 0 0 5px rgba(255,255,255,0.7),
40
+ inset 0 0 0 1px rgba(255,255,255,0.4);
41
+ &#grid {
42
+ border-right:1px solid #000;
43
+ }
44
+ span {
45
+ display: none;
46
+ }
47
+ &:hover {
48
+ color: #000;
49
+ background: rgba(255,255,255,0.2);
50
+ }
51
+ &.active {
52
+ .vertical_gradient(#444,#666);
53
+
54
+ color: #fff !important;
55
+ .text_shadow(0,1px,0,#000);
56
+ -webkit-box-shadow:
57
+ inset 0 1px 2px #444,
58
+ inset 0 -1px 0 #777;
59
+ -moz-box-shadow:
60
+ inset 0 1px 2px #444,
61
+ inset 0 -1px 0 #777;
62
+ }
63
+ }
64
+ }
assets/css/style.css CHANGED
@@ -1,46 +1 @@
1
- ul.products.grid div[itemprop="description"] {
2
- display: none;
3
- }
4
- ul.products.grid hr {
5
- display: none;
6
- }
7
- ul.products.list li.product {
8
- float: none !important;
9
- width: 100% !important;
10
- text-align: left !important;
11
- }
12
- ul.products.list li.product:after {
13
- content: "";
14
- display: block;
15
- clear: both;
16
- }
17
- ul.products.list li.product img {
18
- width: 30.75% !important;
19
- float: left;
20
- margin-bottom: 1.5em;
21
- -webkit-transition: none !important;
22
- }
23
- ul.products.list li.product h3,
24
- ul.products.list li.product div[itemprop="description"],
25
- ul.products.list li.product .price,
26
- ul.products.list li.product .gridlist-buttonwrap {
27
- width: 65.4%;
28
- float: right;
29
- clear: none;
30
- }
31
- ul.products.list li.product div[itemprop="description"] {
32
- display: block;
33
- }
34
- ul.products.list li.product .gridlist-buttonwrap {
35
- margin-bottom: 1.5em;
36
- }
37
- ul.products.list li.product hr {
38
- clear: both;
39
- }
40
- .gridlist-toggle a {
41
- text-decoration: none !important;
42
- font-size: 1.6em;
43
- }
44
- .gridlist-toggle a span {
45
- display: none;
46
- }
1
+ ul.products.grid div[itemprop="description"]{display:none}ul.products.grid hr{display:none}ul.products.list li.product{float:none!important;width:100%!important;text-align:left!important}ul.products.list li.product:after{content:"";display:block;clear:both}ul.products.list li.product img{width:30.75%!important;float:left;margin-bottom:1.5em;-webkit-transition:none!important}ul.products.list li.product h3,ul.products.list li.product div[itemprop="description"],ul.products.list li.product .price,ul.products.list li.product .gridlist-buttonwrap{width:65.4%;float:right;clear:none}ul.products.list li.product div[itemprop="description"]{display:block}ul.products.list li.product .gridlist-buttonwrap{margin-bottom:1.5em}ul.products.list li.product hr{clear:both}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
assets/css/style.less CHANGED
@@ -36,14 +36,4 @@ ul.products.list {
36
  clear: both;
37
  }
38
  }
39
- }
40
-
41
- .gridlist-toggle {
42
- a {
43
- text-decoration: none !important;
44
- font-size:1.6em;
45
- span {
46
- display: none;
47
- }
48
- }
49
  }
36
  clear: both;
37
  }
38
  }
 
 
 
 
 
 
 
 
 
 
39
  }
grid-list-toggle.php CHANGED
@@ -1,8 +1,9 @@
1
  <?php
2
  /*
3
  Plugin Name: WooCommerce Grid / List toggle
 
4
  Description: Adds a grid/list view toggle to product archives
5
- Version: 0.2.1
6
  Author: jameskoster
7
  Author URI: http://jameskoster.co.uk
8
  Requires at least: 3.1
@@ -48,10 +49,11 @@ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', g
48
 
49
  // Scripts & styles
50
  function setup_scripts_styles() {
51
- if (is_shop() || is_product_category()) {
52
  wp_enqueue_script( 'cookie', plugins_url( '/assets/js/jquery.cookie.min.js', __FILE__ ), array( 'jquery' ) );
53
  wp_enqueue_script( 'grid-list-scripts', plugins_url( '/assets/js/jquery.gridlistview.min.js', __FILE__ ), array( 'jquery' ) );
54
- wp_enqueue_style( 'grid-list-styles', plugins_url( '/assets/css/style.css', __FILE__ ) );
 
55
  }
56
  }
57
 
1
  <?php
2
  /*
3
  Plugin Name: WooCommerce Grid / List toggle
4
+ Plugin URI: http://jameskoster.co.uk/tag/grid-list-toggle/
5
  Description: Adds a grid/list view toggle to product archives
6
+ Version: 0.2.2
7
  Author: jameskoster
8
  Author URI: http://jameskoster.co.uk
9
  Requires at least: 3.1
49
 
50
  // Scripts & styles
51
  function setup_scripts_styles() {
52
+ if ( is_shop() || is_product_category() || is_product_tag() ) {
53
  wp_enqueue_script( 'cookie', plugins_url( '/assets/js/jquery.cookie.min.js', __FILE__ ), array( 'jquery' ) );
54
  wp_enqueue_script( 'grid-list-scripts', plugins_url( '/assets/js/jquery.gridlistview.min.js', __FILE__ ), array( 'jquery' ) );
55
+ wp_enqueue_style( 'grid-list-layout', plugins_url( '/assets/css/style.css', __FILE__ ) );
56
+ wp_enqueue_style( 'grid-list-button', plugins_url( '/assets/css/button.css', __FILE__ ) );
57
  }
58
  }
59
 
readme.txt CHANGED
@@ -3,7 +3,7 @@ Contributors: jameskoster
3
  Tags: woocommerce, grid, list, products, ecommerce
4
  Requires at least: 3.3
5
  Tested up to: 3.5
6
- Stable tag: 0.2.1
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -34,12 +34,39 @@ You may see varied results depending on how the theme has been built and whether
34
  = I found and fixed a bug how can I help? =
35
  Thanks! Please fork the repo on <a href="https://github.com/jameskoster/woocommerce-grid-list-toggle">github</a>, push your fix then send a pull request.
36
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  == Screenshots ==
38
 
39
  1. Example of products laid out in list view in Twenty Eleven
40
 
41
  == Changelog ==
42
 
 
 
 
 
 
43
  = 0.2.1 - 10/01/2013 =
44
  * Add active class to grid button on initial load
45
 
3
  Tags: woocommerce, grid, list, products, ecommerce
4
  Requires at least: 3.3
5
  Tested up to: 3.5
6
+ Stable tag: 0.2.2
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
34
  = I found and fixed a bug how can I help? =
35
  Thanks! Please fork the repo on <a href="https://github.com/jameskoster/woocommerce-grid-list-toggle">github</a>, push your fix then send a pull request.
36
 
37
+ = I don't like the button styles, how can I remove them and start fresh? =
38
+ Add the following code to the functions.php file in your theme / child theme:
39
+
40
+ `
41
+ add_action('get_header', 'remove_gridlist_styles', 30);
42
+ function remove_gridlist_styles() {
43
+ wp_dequeue_style( 'grid-list-button' );
44
+ }
45
+ `
46
+
47
+ That will remove the button styles but keep the layout styles which will allow you to design the buttons as you see fit.
48
+
49
+ To remove the layout styles as well use:
50
+
51
+ `
52
+ add_action('get_header', 'remove_gridlist_styles', 30);
53
+ function remove_gridlist_styles() {
54
+ wp_dequeue_style( 'grid-list-button' );
55
+ wp_dequeue_style( 'grid-list-layout' );
56
+ }
57
+ `
58
+
59
  == Screenshots ==
60
 
61
  1. Example of products laid out in list view in Twenty Eleven
62
 
63
  == Changelog ==
64
 
65
+ = 0.2.2 - 16/01/2013 =
66
+ * Re-applied button style. See FAQ to remove
67
+ * YUI compressed CSS
68
+ * Styles loaded on product tag archives
69
+
70
  = 0.2.1 - 10/01/2013 =
71
  * Add active class to grid button on initial load
72