如何在woocommerce商店页面中制作5个或更多产品列

时间:2021-05-23 20:15:00

I made a woocommerce custom theme from psd. I need to show auto colums or 5 or more colums. I search a lot but found 4 max colums. So, Anyone please tell me, How can I make auto colums or 5 more colums in woocommerce shop or archive page?

我从psd制作了一个woocommerce自定义主题。我需要显示自动列或5个或更多列。我搜索了很多,但发现了4个最大的colums。那么,有人请告诉我,如何在woocommerce商店或存档页面中制作自动列或5个以上的列?

Regards Tariq

1 个解决方案

#1


You can change the number of columns via the loop_shop_columns filter.

您可以通过loop_shop_columns过滤器更改列数。

add_filter( 'loop_shop_columns', 'so_30113923_shop_columns' );
function so_30113923_shop_columns(){
  return 5;
}

Keep in mind that this only changes the HTML classes and specifically where the first and last classes are printed (last is on every 5th element now instead of 4th). WooCommerce's CSS styles still have widths for 4 columns, so you will need to write custom CSS rules for your new columns.

请记住,这只会更改HTML类,特别是打印第一个和最后一个类的位置(最后是每个第5个元素而不是第4个元素)。 WooCommerce的CSS样式仍然有4列的宽度,因此您需要为新列编写自定义CSS规则。

#1


You can change the number of columns via the loop_shop_columns filter.

您可以通过loop_shop_columns过滤器更改列数。

add_filter( 'loop_shop_columns', 'so_30113923_shop_columns' );
function so_30113923_shop_columns(){
  return 5;
}

Keep in mind that this only changes the HTML classes and specifically where the first and last classes are printed (last is on every 5th element now instead of 4th). WooCommerce's CSS styles still have widths for 4 columns, so you will need to write custom CSS rules for your new columns.

请记住,这只会更改HTML类,特别是打印第一个和最后一个类的位置(最后是每个第5个元素而不是第4个元素)。 WooCommerce的CSS样式仍然有4列的宽度,因此您需要为新列编写自定义CSS规则。