wordpress WooCommerce 列表视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22563587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WooCommerce list view
提问by user3447207
I have a WordPress site with WooCommerce installed,
我有一个安装了 WooCommerce 的 WordPress 网站，
The problem I'm having is on the shop page the products are by default shown as a GRID (side by side), there's a button to switch from the default GRID mode to LIST mode; but for every new client that comes on the site, they would have to manually change it!
我遇到的问题是在商店页面上，产品默认显示为 GRID（并排），有一个按钮可以从默认 GRID 模式切换到 LIST 模式；但是对于网站上的每个新客户，他们都必须手动更改它！
I'd like to permanently change the default view from GRID to LIST for every person that comes on the site, but I can't find any way to do this in the code.
我想将网站上每个人的默认视图从 GRID 永久更改为 LIST，但我在代码中找不到任何方法来执行此操作。
Does anyone have any knowledge on how to do this?
有没有人知道如何做到这一点？
回答by Howli
There is a plugin that can do this for you: http://wordpress.org/plugins/woocommerce-grid-list-toggle
有一个插件可以为您执行此操作：http: //wordpress.org/plugins/woocommerce-grid-list-toggle
After installing the plugin go to your dashboard: Woocommerce -> Settings -> product -> Scroll to the bottom of the page and there is an option called Default catalog view, change that from Grid to List.
There will be an option for users on the shop page to change the view from List to Grid. To hide this option add the following to the CSS:
安装插件后转到您的仪表板：Woocommerce -> 设置 -> 产品 -> 滚动到页面底部，有一个名为 的选项Default catalog view，将其从网格更改为列表。商店页面上将有一个选项供用户将视图从列表更改为网格。要隐藏此选项，请将以下内容添加到 CSS：
.gridlist-toggle
{
display: none !important;
}
回答by Ernest Sawyer
I just solved the same problem.
我刚刚解决了同样的问题。
This is my solution how to PERNAMENTLY force WooCommerce to show product catalog only as List View.
这是我如何永久强制 WooCommerce 将产品目录仅显示为列表视图的解决方案。
JS
JS
// This will remove class="grid" on page load and add class="list" to your product view
$(document).ready(function(){
$('.browse-view ul#products').removeClass('grid').addClass('list');
});
JS -- Test with Woocommerce v4.0.1
JS -- 使用 Woocommerce v4.0.1 进行测试
// -- Last Rev. (2020-04) --
jQuery(function($){
$('.woocommerce ul.products').removeClass('grid').addClass('list');
});
CSS
CSS
/* This will hide grid/list switcher in toolbar*/
.view-mode{display:none!important;}
回答by Олег Балашкевич
Another way to do this is use this plugin: https://wordpress.org/plugins/gridlist-view-for-woocommerce/After install go to settings WooCommerce -> Grid/List ViewIn Buttons tabchange Default styleto Listand uncheck all in Buttons displayIn Products Count tabuncheck Use products count
另一种方式做，这是使用这个插件：https://wordpress.org/plugins/gridlist-view-for-woocommerce/安装后去设置WooCommerce - >格/列表查看在按钮选项卡改变默认的风格，以列表并取消所有按钮显示在产品计数选项卡中取消选中使用产品计数
回答by Loc Le Xuan
My solution can switch grid to list view as default on products page. You can try this:
我的解决方案可以在产品页面上将网格切换为默认列表视图。你可以试试这个：
- Connect to your FTP/public_html/wp-content/YOUR_THEME/woocommerce/global/
- Edit wrapper-start.php
You will see this code
$shop_view = shopme_get_meta_value('shop_view'); if (empty($shop_view)) { $shop_view = 'view-grid'; } if (!empty( $shop_view ) ) { $wrapper_classes[] = $shop_view; }Replace "view-grid" to "list_view_products"
- 连接到您的 FTP/public_html/wp-content/YOUR_THEME/woocommerce/global/
- 编辑 wrapper-start.php
你会看到这个代码
$shop_view = shopme_get_meta_value('shop_view'); if (empty($shop_view)) { $shop_view = 'view-grid'; } if (!empty( $shop_view ) ) { $wrapper_classes[] = $shop_view; }将“view-grid”替换为“list_view_products”
