WooCommerce Grid / List toggle

Version Description

Initial release.

Release Info

Developer	jameskoster
Plugin	WooCommerce Grid / List toggle
Version	0.1
Comparing to
See all releases

Version 0.1

Files changed (10) hide show

assets/css/mixins.less +118 -0
assets/css/style.css +97 -0
assets/css/style.less +99 -0
assets/js/jquery.cookie.js +72 -0
assets/js/jquery.cookie.min.js +9 -0
assets/js/jquery.gridlistview.js +43 -0
assets/js/jquery.gridlistview.min.js +2 -0
grid-list-toggle.php +86 -0
readme.txt +39 -0
screenshot-1.jpg +0 -0

assets/css/mixins.less ADDED Viewed

	@@ -0,0 +1,118 @@


1	+ // MIXINS
2	+ .clearfix() {
3	+ &:after {
4	+ content: "";
5	+ display: block;
6	+ clear: both;
7	+ }
8	+ }
9	+ .border_radius(@radius:10px)
10	+ {
11	+ -webkit-border-radius:@radius;
12	+ -moz-border-radius:@radius;
13	+ border-radius:@radius;
14	+ }
15	+
16	+ .border_radius_right(@radius:10px)
17	+ {
18	+ -webkit-border-top-right-radius: @radius;
19	+ -webkit-border-bottom-right-radius: @radius;
20	+ -moz-border-radius-topright: @radius;
21	+ -moz-border-radius-bottomright: @radius;
22	+ border-top-right-radius: @radius;
23	+ border-bottom-right-radius: @radius;
24	+ }
25	+
26	+ .border_radius_left(@radius:10px)
27	+ {
28	+ -webkit-border-top-left-radius: @radius;
29	+ -webkit-border-bottom-left-radius: @radius;
30	+ -moz-border-radius-topleft: @radius;
31	+ -moz-border-radius-bottomleft: @radius;
32	+ border-top-left-radius: @radius;
33	+ border-bottom-left-radius: @radius;
34	+ }
35	+
36	+ .border_radius_bottom(@radius:10px)
37	+ {
38	+ -webkit-border-bottom-left-radius: @radius;
39	+ -webkit-border-bottom-right-radius: @radius;
40	+ -moz-border-radius-bottomleft: @radius;
41	+ -moz-border-radius-bottomright: @radius;
42	+ border-bottom-left-radius: @radius;
43	+ border-bottom-right-radius: @radius;
44	+ }
45	+
46	+ .border_radius_top(@radius:10px)
47	+ {
48	+ -webkit-border-top-left-radius: @radius;
49	+ -webkit-border-top-right-radius: @radius;
50	+ -moz-border-radius-topleft: @radius;
51	+ -moz-border-radius-topright: @radius;
52	+ border-top-left-radius: @radius;
53	+ border-top-right-radius: @radius;
54	+ }
55	+
56	+ .box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888)
57	+ {
58	+ box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
59	+ -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
60	+ }
61	+
62	+ .inset_box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888)
63	+ {
64	+ box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
65	+ -webkit-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color;
66	+ }
67	+
68	+ .text_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#fff)
69	+ {
70	+ text-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
71	+ }
72	+
73	+ .vertical_gradient(@from: #000, @to: #FFF) {
74	+ background: @from;
75	+ background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to));
76	+ background: -webkit-linear-gradient(@from, @to);
77	+ background: -moz-linear-gradient(center top, @from 0%, @to 100%);
78	+ background: -moz-gradient(center top, @from 0%, @to 100%);
79	+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @from, @to));
80	+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d, endColorstr=%d)", @from, @to);
81	+ }
82	+
83	+ .transition(@selector:all, @animation:ease-in-out, @duration:.2s) {
84	+ -webkit-transition:@selector @animation @duration;
85	+ -moz-transition:@selector @animation @duration;
86	+ -o-transition:@selector @animation @duration;
87	+ transition:@selector @animation @duration;
88	+ }
89	+
90	+ .opacity(@opacity:0.75) {
91	+ filter:~"alpha(opacity=@opacity * 100)";
92	+ -moz-opacity:@opacity;
93	+ -khtml-opacity: @opacity;
94	+ opacity: @opacity;
95	+ }
96	+
97	+ .rotate(@degree:1deg) {
98	+ -webkit-transform:rotate(@degree);
99	+ -moz-transform:rotate(@degree);
100	+ }
101	+
102	+ .scale(@ratio:1.5){
103	+ -webkit-transform:scale(@ratio);
104	+ -moz-transform:scale(@ratio);
105	+ transform:scale(@ratio);
106	+ }
107	+
108	+ .radial_gradient(@from: #000, @to: #FFF) {
109	+ background: @from;
110	+ background: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 1000, from(@from), to(@to));
111	+ background: -moz-radial-gradient(center top, @from 0%, @to 100%);
112	+ }
113	+
114	+ .borderbox () {
115	+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
116	+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
117	+ box-sizing: border-box; /* Opera/IE 8+ */
118	+ }

assets/css/style.css ADDED Viewed

	@@ -0,0 +1,97 @@


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;
9	+ width: 100%;
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%;
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 {
41	+ display: inline-block;
42	+ border: 1px solid #555;
43	+ padding: 0 !important;
44	+ margin-bottom: 1.5em;
45	+ background: #eeeeee;
46	+ background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#aaaaaa));
47	+ background: -webkit-linear-gradient(#eeeeee, #aaaaaa);
48	+ background: -moz-linear-gradient(center top, #eeeeee 0%, #aaaaaa 100%);
49	+ background: -moz-gradient(center top, #eeeeee 0%, #aaaaaa 100%);
50	+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eeeeee,endColorstr=#aaaaaa);
51	+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#eeeeee, endColorstr=#aaaaaa)";
52	+ -webkit-border-radius: 3px;
53	+ -moz-border-radius: 3px;
54	+ border-radius: 3px;
55	+ line-height: 1em !important;
56	+ -webkit-box-shadow: inset 0 1px #eeeeee, inset 0 -1px #999999, 0 1px 2px rgba(0, 0, 0, 0.3);
57	+ box-shadow: inset 0 1px #eeeeee, inset 0 -1px #999999, 0 1px 2px rgba(0, 0, 0, 0.3);
58	+ }
59	+ #gridlist-toggle a {
60	+ display: inline-block;
61	+ width: 2em;
62	+ text-align: center;
63	+ text-shadow: 0 1px 0 #ffffff;
64	+ text-decoration: none !important;
65	+ font-weight: normal !important;
66	+ font-family: sans-serif !important;
67	+ font-size: 1em !important;
68	+ line-height: 1.5em !important;
69	+ color: #222 !important;
70	+ text-shadow: 0 1px 0 #eeeeee;
71	+ -webkit-transition: background ease-in-out 0.2s;
72	+ -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
73	+ box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
74	+ }
75	+ #gridlist-toggle a#grid {
76	+ border-right: 1px solid #000;
77	+ }
78	+ #gridlist-toggle a span {
79	+ display: none;
80	+ }
81	+ #gridlist-toggle a:hover {
82	+ color: #000;
83	+ background: rgba(255, 255, 255, 0.2);
84	+ }
85	+ #gridlist-toggle a.active {
86	+ background: #444444;
87	+ background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
88	+ background: -webkit-linear-gradient(#444444, #666666);
89	+ background: -moz-linear-gradient(center top, #444444 0%, #666666 100%);
90	+ background: -moz-gradient(center top, #444444 0%, #666666 100%);
91	+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#444444,endColorstr=#666666);
92	+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#444444, endColorstr=#666666)";
93	+ color: #fff !important;
94	+ text-shadow: 0 1px 0 #000000;
95	+ -webkit-box-shadow: inset 0 1px 2px #444444, inset 0 -1px 0 #777777;
96	+ -moz-box-shadow: inset 0 1px 2px #444444, inset 0 -1px 0 #777777;
97	+ }

assets/css/style.less ADDED Viewed

	@@ -0,0 +1,99 @@


1	+ @import url(mixins.less);
2	+
3	+ ul.products.grid {
4	+ div[itemprop="description"] {
5	+ display: none;
6	+ }
7	+ hr {
8	+ display: none;
9	+ }
10	+ }
11	+
12	+ ul.products.list {
13	+ li.product {
14	+ float: none;
15	+ width:100%;
16	+ .clearfix;
17	+ text-align: left !important;
18	+ img {
19	+ width:30.75%;
20	+ float: left;
21	+ margin-bottom:1.5em;
22	+ -webkit-transition:none !important;
23	+ }
24	+ h3, div[itemprop="description"], .price, .gridlist-buttonwrap {
25	+ width: 65.4%;
26	+ float: right;
27	+ clear: none;
28	+ }
29	+ div[itemprop="description"] {
30	+ display: block;
31	+ }
32	+ .gridlist-buttonwrap {
33	+ margin-bottom:1.5em;
34	+ }
35	+ hr {
36	+ clear: both;
37	+ }
38	+ }
39	+ }
40	+
41	+ #gridlist-toggle {
42	+ display: inline-block;
43	+ border:1px solid #555;
44	+ padding:0 !important;
45	+ margin-bottom:1.5em;
46	+ .vertical_gradient(#eee,#aaa);
47	+ .border_radius(3px);
48	+ line-height: 1em !important;
49	+ -webkit-box-shadow:
50	+ inset 0 1px #eee,
51	+ inset 0 -1px #999,
52	+ 0 1px 2px rgba(0,0,0,0.3);
53	+ box-shadow:
54	+ inset 0 1px #eee,
55	+ inset 0 -1px #999,
56	+ 0 1px 2px rgba(0,0,0,0.3);
57	+ a {
58	+ display: inline-block;
59	+ width:2em;
60	+ text-align: center;
61	+ .text_shadow(0,1px,0,#fff);
62	+ text-decoration:none !important;
63	+ font-weight: normal !important;
64	+ font-family: sans-serif !important;
65	+ font-size:1em !important;
66	+ line-height: 1.5em !important;
67	+ color: #222 !important;
68	+ .text_shadow(0,1px,0,#eee);
69	+ -webkit-transition:background ease-in-out .2s;
70	+ -webkit-box-shadow:
71	+ inset 0 0 5px rgba(255,255,255,0.7),
72	+ inset 0 0 0 1px rgba(255,255,255,0.4);
73	+ box-shadow:
74	+ inset 0 0 5px rgba(255,255,255,0.7),
75	+ inset 0 0 0 1px rgba(255,255,255,0.4);
76	+ &#grid {
77	+ border-right:1px solid #000;
78	+ }
79	+ span {
80	+ display: none;
81	+ }
82	+ &:hover {
83	+ color: #000;
84	+ background: rgba(255,255,255,0.2);
85	+ }
86	+ &.active {
87	+ .vertical_gradient(#444,#666);
88	+
89	+ color: #fff !important;
90	+ .text_shadow(0,1px,0,#000);
91	+ -webkit-box-shadow:
92	+ inset 0 1px 2px #444,
93	+ inset 0 -1px 0 #777;
94	+ -moz-box-shadow:
95	+ inset 0 1px 2px #444,
96	+ inset 0 -1px 0 #777;
97	+ }
98	+ }
99	+ }

assets/js/jquery.cookie.js ADDED Viewed

	@@ -0,0 +1,72 @@


1	+ /jshint eqnull:true /
2	+ /*!
3	+ * jQuery Cookie Plugin v1.2
4	+ * https://github.com/carhartl/jquery-cookie
5	+ *
6	+ * Copyright 2011, Klaus Hartl
7	+ * Dual licensed under the MIT or GPL Version 2 licenses.
8	+ * http://www.opensource.org/licenses/mit-license.php
9	+ * http://www.opensource.org/licenses/GPL-2.0
10	+ */
11	+ (function ($, document, undefined) {
12	+
13	+ var pluses = /\+/g;
14	+
15	+ function raw(s) {
16	+ return s;
17	+ }
18	+
19	+ function decoded(s) {
20	+ return decodeURIComponent(s.replace(pluses, ' '));
21	+ }
22	+
23	+ $.cookie = function (key, value, options) {
24	+
25	+ // key and at least value given, set cookie...
26	+ if (value !== undefined && !/Object/.test(Object.prototype.toString.call(value))) {
27	+ options = $.extend({}, $.cookie.defaults, options);
28	+
29	+ if (value === null) {
30	+ options.expires = -1;
31	+ }
32	+
33	+ if (typeof options.expires === 'number') {
34	+ var days = options.expires, t = options.expires = new Date();
35	+ t.setDate(t.getDate() + days);
36	+ }
37	+
38	+ value = String(value);
39	+
40	+ return (document.cookie = [
41	+ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value),
42	+ options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
43	+ options.path ? '; path=' + options.path : '',
44	+ options.domain ? '; domain=' + options.domain : '',
45	+ options.secure ? '; secure' : ''
46	+ ].join(''));
47	+ }
48	+
49	+ // key and possibly options given, get cookie...
50	+ options = value \|\| $.cookie.defaults \|\| {};
51	+ var decode = options.raw ? raw : decoded;
52	+ var cookies = document.cookie.split('; ');
53	+ for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
54	+ if (decode(parts.shift()) === key) {
55	+ return decode(parts.join('='));
56	+ }
57	+ }
58	+
59	+ return null;
60	+ };
61	+
62	+ $.cookie.defaults = {};
63	+
64	+ $.removeCookie = function (key, options) {
65	+ if ($.cookie(key, options) !== null) {
66	+ $.cookie(key, null, options);
67	+ return true;
68	+ }
69	+ return false;
70	+ };
71	+
72	+ })(jQuery, document);

assets/js/jquery.cookie.min.js ADDED Viewed

	@@ -0,0 +1,9 @@


1	+ /jshint eqnull:true //*!
2	+ * jQuery Cookie Plugin v1.2
3	+ * https://github.com/carhartl/jquery-cookie
4	+ *
5	+ * Copyright 2011, Klaus Hartl
6	+ * Dual licensed under the MIT or GPL Version 2 licenses.
7	+ * http://www.opensource.org/licenses/mit-license.php
8	+ * http://www.opensource.org/licenses/GPL-2.0
9	+ */(function(e,t,n){function i(e){return e}function s(e){return decodeURIComponent(e.replace(r," "))}var r=/\+/g;e.cookie=function(r,o,u){if(o!==n&&!/Object/.test(Object.prototype.toString.call(o))){u=e.extend({},e.cookie.defaults,u);o===null&&(u.expires=-1);if(typeof u.expires=="number"){var a=u.expires,f=u.expires=new Date;f.setDate(f.getDate()+a)}o=String(o);return t.cookie=[encodeURIComponent(r),"=",u.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join("")}u=o\|\|e.cookie.defaults\|\|{};var l=u.raw?i:s,c=t.cookie.split("; ");for(var h=0,p;p=c[h]&&c[h].split("=");h++)if(l(p.shift())===r)return l(p.join("="));return null};e.cookie.defaults={};e.removeCookie=function(t,n){if(e.cookie(t,n)!==null){e.cookie(t,null,n);return!0}return!1}})(jQuery,document);

assets/js/jquery.gridlistview.js ADDED Viewed

	@@ -0,0 +1,43 @@


1	+ // The toggle
2	+
3	+ jQuery(document).ready(function(){
4	+
5	+ jQuery('#grid').click(function() {
6	+ jQuery(this).addClass('active');
7	+ jQuery('#list').removeClass('active');
8	+ jQuery.cookie('gridcookie','grid', { path: '/' });
9	+ jQuery('ul.products').fadeOut(300, function() {
10	+ jQuery(this).addClass('grid').removeClass('list').fadeIn(300);
11	+ });
12	+ return false;
13	+ });
14	+
15	+ jQuery('#list').click(function() {
16	+ jQuery(this).addClass('active');
17	+ jQuery('#grid').removeClass('active');
18	+ jQuery.cookie('gridcookie','list', { path: '/' });
19	+ jQuery('ul.products').fadeOut(300, function() {
20	+ jQuery(this).removeClass('grid').addClass('list').fadeIn(300);
21	+ });
22	+ return false;
23	+ });
24	+
25	+ if (jQuery.cookie('gridcookie')) {
26	+ jQuery('ul.products, #gridlist-toggle').addClass(jQuery.cookie('gridcookie'));
27	+ }
28	+
29	+ if (jQuery.cookie('gridcookie') == 'grid') {
30	+ jQuery('#gridlist-toggle #grid').addClass('active');
31	+ jQuery('#gridlist-toggle #list').removeClass('active');
32	+ }
33	+
34	+ if (jQuery.cookie('gridcookie') == 'list') {
35	+ jQuery('#gridlist-toggle #list').addClass('active');
36	+ jQuery('#gridlist-toggle #grid').removeClass('active');
37	+ }
38	+
39	+ jQuery('#gridlist-toggle a').click(function(event) {
40	+ event.preventDefault();
41	+ });
42	+
43	+ });

assets/js/jquery.gridlistview.min.js ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ // The toggle
2	+ jQuery(document).ready(function(){jQuery("#grid").click(function(){jQuery(this).addClass("active");jQuery("#list").removeClass("active");jQuery.cookie("gridcookie","grid",{path:"/"});jQuery("ul.products").fadeOut(300,function(){jQuery(this).addClass("grid").removeClass("list").fadeIn(300)});return!1});jQuery("#list").click(function(){jQuery(this).addClass("active");jQuery("#grid").removeClass("active");jQuery.cookie("gridcookie","list",{path:"/"});jQuery("ul.products").fadeOut(300,function(){jQuery(this).removeClass("grid").addClass("list").fadeIn(300)});return!1});jQuery.cookie("gridcookie")&&jQuery("ul.products, #gridlist-toggle").addClass(jQuery.cookie("gridcookie"));if(jQuery.cookie("gridcookie")=="grid"){jQuery("#gridlist-toggle #grid").addClass("active");jQuery("#gridlist-toggle #list").removeClass("active")}if(jQuery.cookie("gridcookie")=="list"){jQuery("#gridlist-toggle #list").addClass("active");jQuery("#gridlist-toggle #grid").removeClass("active")}jQuery("#gridlist-toggle a").click(function(e){e.preventDefault()})});

grid-list-toggle.php ADDED Viewed

	@@ -0,0 +1,86 @@


1	+ <?php
2	+ /*
3	+ Plugin Name: WooCommerce Grid / List toggle
4	+ Description: Adds a grid/list view toggle to product archives
5	+ Version: 0.1
6	+ Author: jameskoster
7	+ Author URI: http://jameskoster.co.uk
8	+ Requires at least: 3.1
9	+ Tested up to: 3.4.1
10	+ License: GPLv2 or later
11	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
12	+ */
13	+
14	+ /**
15	+ * Check if WooCommerce is active
16	+ **/
17	+ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
18	+
19	+ /**
20	+ * Localisation
21	+ **/
22	+ load_plugin_textdomain('wc_list_grid_toggle', false, dirname( plugin_basename( __FILE__ ) ) . '/');
23	+
24	+ /**
25	+ * WC_List_Grid class
26	+ **/
27	+ if (!class_exists('WC_List_Grid')) {
28	+
29	+ class WC_List_Grid {
30	+
31	+ public function __construct() {
32	+ // Hooks
33	+ add_action( 'wp' , array(&$this, 'setup_gridlist' ) , 20);
34	+ }
35	+
36	+ // Functions
37	+ // Setup
38	+ function setup_gridlist() {
39	+ add_action( 'get_header', array(&$this, 'setup_scripts_styles'), 20);
40	+ add_action( 'woocommerce_before_shop_loop', array(&$this, 'gridlist_toggle_button'), 20);
41	+ add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5);
42	+ add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_open'), 9);
43	+ add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_buttonwrap_close'), 11);
44	+ add_action( 'woocommerce_after_shop_loop_item', array(&$this, 'gridlist_hr'), 30);
45	+ }
46	+
47	+ // Scripts & styles
48	+ function setup_scripts_styles() {
49	+ if (is_shop() \|\| is_product_category()) {
50	+ wp_enqueue_script( 'cookie', plugins_url( '/assets/js/jquery.cookie.min.js', __FILE__ ), array( 'jquery' ) );
51	+ wp_enqueue_script( 'grid-list-scripts', plugins_url( '/assets/js/jquery.gridlistview.min.js', __FILE__ ), array( 'jquery' ) );
52	+ wp_enqueue_style( 'grid-list-styles', plugins_url( '/assets/css/style.css', __FILE__ ) );
53	+ }
54	+ }
55	+
56	+ // Toggle button
57	+ function gridlist_toggle_button() {
58	+ ?>
59	+ <nav id="gridlist-toggle">
60	+ <a href="#" id="grid" class="active" title="<?php _e('Grid view', 'wc_list_grid_toggle'); ?>">⊞ <span><?php _e('Grid view', 'wc_list_grid_toggle'); ?></span></a><a href="#" id="list" title="<?php _e('List view', 'wc_list_grid_toggle'); ?>">⊟ <span><?php _e('List view', 'wc_list_grid_toggle'); ?></span></a>
61	+ </nav>
62	+ <?php
63	+ }
64	+
65	+ // Button wrap
66	+ function gridlist_buttonwrap_open() {
67	+ ?>
68	+ <div class="gridlist-buttonwrap">
69	+ <?php
70	+ }
71	+ function gridlist_buttonwrap_close() {
72	+ ?>
73	+ </div>
74	+ <?php
75	+ }
76	+
77	+ // hr
78	+ function gridlist_hr() {
79	+ ?>
80	+ <hr />
81	+ <?php
82	+ }
83	+ }
84	+ $WC_List_Grid = new WC_List_Grid();
85	+ }
86	+ }

readme.txt ADDED Viewed

	@@ -0,0 +1,39 @@


1	+ === WooCommerce Grid / List toggle ===
2	+ Contributors: jameskoster
3	+ Tags: woocommerce, grid, list, products, ecommerce
4	+ Requires at least: 3.3
5	+ Tested up to: 3.4.1
6	+ Stable tag: 0.1
7	+ License: GPLv2 or later
8	+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
9	+
10	+ Adds a grid/list view toggle to product archives
11	+
12	+ == Description ==
13	+
14	+ WooCommerce Grid / List view is a simple plugin which adds a Grid / List toggle to your product archives allowing users to, you guessed it, toggle between grid / list views of your products.
15	+
16	+ The list view arranges products in a vertical list and pulls in the excerpt to give a more detailed overview.
17	+
18	+ The grid view you will be familiar with as this is WooCommerce's default layout for product archives.
19	+
20	+ == Installation ==
21	+
22	+ 1. Upload `woocommerce-grid-list-toggle` to the `/wp-content/plugins/` directory
23	+ 2. Activate the plugin through the 'Plugins' menu in WordPress
24	+ 3. Done!
25	+
26	+ == Frequently Asked Questions ==
27	+
28	+ = It doesn't work with my theme, what gives? =
29	+
30	+ You may see varied results depending on how the theme has been built and whether it's already pulling the excerpt into product archives. I've tried to cover all bases with CSS but you may occasionally need to make your own adjustments.
31	+
32	+ == Screenshots ==
33	+
34	+ 1. Example of products laid out in list view in Twenty Eleven
35	+
36	+ == Changelog ==
37	+
38	+ = 0.1 =
39	+ Initial release.

screenshot-1.jpg ADDED Viewed

Binary file

WooCommerce Grid / List toggle - Version 0.1

Version Description

Release Info

Version 0.1