Make List view default in woocommerce

Wessmith
6 Posts
Wessmith posted this 01 April 2016

Is there a way to set the list view as default for product view in woo commerce. Or can you give me the code and I will add it myself.

Thanks!

Is there a way to set the list view as default for product view in woo commerce. Or can you give me the code and I will add it myself. Thanks!
Vote to pay developers attention to this features or issue.
14 Comments
Order By: Standard | Newest
Stagger Lee
1831 Posts
Stagger Lee posted this 01 April 2016

Not easy. If you need it beyond any reason when theme is finished change it in script.js (around line 2200). Any edit in Theme will roll it back to default grid.

Plugins for this wont work either, because Themler has very specific CSS classes and HTML layout.

Not easy. If you need it beyond any reason when theme is finished change it in script.js (around line 2200). Any edit in Theme will roll it back to default grid. Plugins for this wont work either, because Themler has very specific CSS classes and HTML layout.
Wessmith
6 Posts
Wessmith posted this 01 April 2016

Do you happen to know what I need to add around line 2200? Or what I need to change it to? Everything I tried does not seem to be changing anything.

Do you happen to know what I need to add around line 2200? Or what I need to change it to? Everything I tried does not seem to be changing anything.
Stagger Lee
1831 Posts
Stagger Lee posted this 01 April 2016

Seems as it is browser cookie based. Each time you change something delete cookies in browser settings.

Seems as it is browser cookie based. Each time you change something delete cookies in browser settings.
Wessmith
6 Posts
Wessmith posted this 02 April 2016

Nope still won't work. I really need this to work.

Nope still won't work. I really need this to work.
Stagger Lee
1831 Posts
Stagger Lee posted this 02 April 2016

If you dont need grid and view switch button there is simple 2 lines CSS trick.

I will check later how it is done by changing theme core files.

If you dont need grid and view switch button there is simple 2 lines CSS trick. I will check later how it is done by changing theme core files.
Stagger Lee
1831 Posts
Stagger Lee posted this 02 April 2016

script.js:

var activeLayoutType = $.cookie('layoutType') || 'list',
        activeLayoutTypeSelector = $.cookie('layoutSelector') || '.separated-item-5.list';

category_products_x.php:

$cart_item = isset($cart_item) ? $cart_item : array();
                            $cart_item_key = isset($cart_item_key) ? $cart_item_key : '';
                            $product_view['dafaultLayoutName'] = "list";

script.js: var activeLayoutType = $.cookie('layoutType') || 'list', activeLayoutTypeSelector = $.cookie('layoutSelector') || '.separated-item-5.list'; category_products_x.php: $cart_item = isset($cart_item) ? $cart_item : array(); $cart_item_key = isset($cart_item_key) ? $cart_item_key : ''; $product_view['dafaultLayoutName'] = "list";
Wessmith
6 Posts
Wessmith posted this 02 April 2016

I don't need grid and view switch button, I just need list view. I added the js but it didn't make a difference. The php script made the catalog disappear. If there is a way to do this with css, please enlighten me. My client is amendment about it only being list view and did not tell me until I built it.

I don't need grid and view switch button, I just need list view. I added the js but it didn't make a difference. The php script made the catalog disappear. If there is a way to do this with css, please enlighten me. My client is amendment about it only being list view and did not tell me until I built it.
Stagger Lee
1831 Posts
Stagger Lee posted this 03 April 2016

.woocommerce-page .separated-grid.row .list { display: block !important;}
.woocommerce-page .separated-grid.row .grid { display: none !important;}

Remove buttons in Themler, it is just one column.

.woocommerce-page .separated-grid.row .list { display: block !important;} .woocommerce-page .separated-grid.row .grid { display: none !important;} Remove buttons in Themler, it is just one column.
Support Team
Support Team posted this 03 April 2016

Hello,
the default grid output is hardcoded in theme code.
I'll contact developers about possible solution and will let you know.

regards,
Aileen

Hello, the default grid output is hardcoded in theme code. I'll contact developers about possible solution and will let you know. regards, Aileen
Wessmith
6 Posts
Wessmith posted this 03 April 2016

Worked like a charm! Thank you Stagger!!!!!

Worked like a charm! Thank you Stagger!!!!!
kizzab77
2 Posts
kizzab77 posted this 04 August 2017

So glad I have found this! What is the file name that needs to be edited with the above code

So glad I have found this! What is the file name that needs to be edited with the above code
Wessmith
6 Posts
Wessmith posted this 05 August 2017

It would be your themes style sheet, usually style.css.

It would be your themes style sheet, usually style.css.
engels
18 Posts
engels posted this 20 February 2018

Yeah, put these two lines of code into ADDITIONAL CSS and remove the control Products Type (the switcher buttons).
That seems to work. Without running into the issue of overwriting that code if update/save themler theme again.

Yeah, put these two lines of code into ADDITIONAL CSS and remove the control Products Type (the switcher buttons). That seems to work. Without running into the issue of overwriting that code if update/save themler theme again.
ZCompany
12 Posts
ZCompany posted this 17 July 2018

It breaks Product Slider - because of .woocommerce-page .separated-grid.row .grid { display: none !important;}
Product Slider doesn't show any products.

It breaks Product Slider - because of .woocommerce-page .separated-grid.row .grid { display: none !important;} Product Slider doesn't show any products.
You must log in or register to leave comments