WooCommerce. 每行产品的变化量是多少

大家好，本教程展示了如何更改WooCommerce商店中产品列的数量.

WooCommerce. 每行产品的变化量是多少

你可以把产品放在你的 Homepage using a shortcode. 您还可以看到产品显示在 Category 页面或主页面 Shop page.

为了改变列的数量 Homepage，你应该按照以下步骤:

1. 打开你的WordPress管理面板，导航到 Pages > All Pages;

2. Select Home 从可用页面列表中:

   

3. 向下滚动页面内容以找到相应的 shortcode 并编辑列数:

   

4. 保存更改并检查 Homepage.

如果您增加/减少列和页面的数量 layout 看起来坏了，请遵循以下步骤:

1. Connect to your FTP 沿着这条路走 wp-content /主题/ themeXXXXX /风格.less:

   

2. Open the style.less 带有代码的文件 editor 寻找产品列的响应式CSS代码 layout:

   					@media (min-width: 1200px) {
   						width: 270px;
   						margin-left: 30 px;
   					}
   					@media (min-width: 768px) and (max-width: 979px) {
   						width: 166px;
   						margin-left: 20 px;
   						padding-bottom: 10 px;
   					}
   					@media (max-width: 767px){
   						width: 31%;
   						margin-left: 2%;
   
   					}
   					@media (max-width: 650px){
   						padding-bottom: 10 px;
   					}
   					@media (max-width: 480 px) {
   						width: 47%;
   						Margin: 0 % 20px;
   						显示:inline-block;
   						vertical-align:最高;
   						float: none;
   					}
   					@media (max-width: 320 px) {
   						width: 100%;
   						margin-left: 0;
   						display: block;
   					}
   

3. 你可以改变不同的设备布局的宽度，使列适合:

   

4. 保存更改并重新将文件上传到服务器.

的列数 Category 页面，请按照以下步骤操作:

1. 打开你的WordPress管理面板，导航到 Appearance > Editor;

2. 找到名为 custom-function.php under your child theme:

   

3. Press Ctrl+F 并在上述文件中查找以下文本: 更改列数;

4. 您将看到以下部分代码，您可以在其中编辑列的数量:

   //修改列数
   		// ---------------------
   		Add_filter ('loop_shop_columns'， 'tm_product_columns'， 5);
   		tm_product_columns($columns) {
   			If (is_shop() || is_product_category() || is_product_tag()) {
   				$columns = 3;
   				返回列美元;
   			}
   		}
   

   

5. 保存更改并检查 website.

请随时查看下面的详细视频教程:

WooCommerce. 每行产品的变化量是多少