Make List view default in woocommerce

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.

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.

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

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

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.

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";

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.

.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.

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

regards,
Aileen

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

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

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

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.

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

I have the same Problem.
But i need only Grid Style not List Style

When i put this CSS Snippset in the Theme

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

then i have the Problem in the Sidebar.
Here i Use the Widget "WooCommerce Cart" an with the Code "List display none" there no Display Products in the Sidebar Cart.

Is there another method to use only the grid style in the product overview ?

I am not sure, once only the icons hidden and if you delete cookies or a new visitor - it would always be the gridstyle anyway or ? Seems so..

Last edited 27 October 2021 by @ITS

Hello,

Grid view is enabled by default. So all you need is just to remove the switcher in Themler - it is output by the control Products Type.

Sincerely,
Nettie