增加 Woocommerce 商店页面内容区域的宽度，保留侧边栏

Posted 2023-03-06

【中文标题】增加 Woocommerce 商店页面内容区域的宽度，保留侧边栏

【英文标题】：Increase width of content area on Woocommerce shop page, keep sidebar

【发布时间】：2018-04-17 09:55:00

【问题描述】：

我一直在试图弄清楚如何增加将内容区域和侧边栏作为一个整体包围的包装的宽度，以便它占据更多的边。我想显示每行至少 4 个产品的大图像。

我尝试更改样式表中的包装器宽度以及网格类的大小，但是侧边栏会下降到底部，或者即使我将其设置为每行 4 个产品，产品也不会留在同一行。

我已经尝试弄乱我能找到的所有 CSS 宽度，但似乎没有任何效果。

有没有人知道如何解决这个问题。我发现的每一个解决方案似乎都不适合我。谢谢。

我的网站是 www.Lucidwerx.com

.wrapper,
.layout-boxed margin-left:auto;margin-right:auto

.gridsmargin-left:-30px
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12display:inline;float:left;margin-left:30px
.grid-12margin-right:0

.grid-4:nth-child(3n+1) clear:left;
.grid-8 .grid-4:nth-child(3n+1),
.grid-8 .grid-2:nth-child(3n+1) clear:none;
.grid-8 .grid-4:nth-child(odd),
.grid-8 .grid-2:nth-child(4n+1) clear:left;

/* Grid 1080px */
.wrapperwidth:1050px
.grid-1width:60px.grid-2width:150px.grid-3width:240px.grid-4width:330px.grid-5width:420px.grid-6width:510px.grid-7width:600px.grid-8width:690px.grid-9width:780px.grid-10width:870px.grid-11width:960px.grid-12width:1500px
.layout-boxed max-width:1500px;

/* Grid 960px (mediaqueries) */
@media only screen and (min-width: 960px) and (max-width: 1199px) 
.wrapperwidth:930px
.grid-1width:50px.grid-2width:130px.grid-3width:210px.grid-4width:290px.grid-5width:370px.grid-6width:450px.grid-7width:530px.grid-8width:610px.grid-9width:690px.grid-10width:770px.grid-11width:850px.grid-12width:910px
.layout-boxed max-width:990px;


/*Grid 750px (mediaqueries)*/ 
@media only screen and (min-width: 751px) and (max-width: 959px) 
.wrapperwidth:700px
.gridsmargin-left:-20px
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12margin-left:20px
.grid-1width:40px.grid-2width:100px.grid-3width:160px.grid-4width:220px.grid-5width:280px.grid-6width:340px.grid-7width:400px.grid-8width:460px.grid-9width:520px.grid-10width:580px.grid-11width:640px.grid-12width:680px
.layout-boxed max-width:730px;


/* Mobile (mediaqueries) */
@media only screen and (max-width: 750px)
.grids,
.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9,.grid-10,.grid-11,.grid-12width:100%;margin-left:0;margin-right:0
htmlfont-size:1.125em
body-webkit-text-size-adjust:none 


@media only screen and (min-width: 480px) and (max-width: 750px) 
.wrapperwidth:417px


@media only screen and (max-width: 479px) 
.wrapperwidth:273px   


@media only screen and (max-width: 240px) 
.wrapperwidth:200px   


[class*="grid-"] .wrapperwidth:100%

我想我终于把它变成了我想要的样子。我用这个：

.wrapper 
    width: 80%;


.woocommerce ul.products li.product, .woocommerce-page ul.products li.product 
 width: 29%;
 

.sidebar 
    width: 60%;


@media only screen and (max-width: 736px) 

       .woocommerce ul.products li.product, .woocommerce-page ul.products li.product
        
                width: 98% !important;
        

【参考方案1】：

我无法正确测试此代码，因为您只添加了 3 个产品，但这里有一些 CSS 可以改善您的页面布局。理想情况下，您可能需要修改页面模板并更改用于产品和小部件列的类，以便为产品提供更多空间并使过滤器更小。目前，产品被包装在“grid-8”类中。下面的代码将为您提供一些改进，您可以使用这些值。我还添加了一个媒体查询，以便在较小的屏幕设备上全屏显示产品。将其插入您的 style.css 或通过您正在使用的任何主题的控制台。

.wrapper 
    width: 95% !important;

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product 
    width: 22% !important;

【讨论】：

很抱歉。我添加了一个附加产品并发布了似乎在控制它的 css。我查看了 grid-8 类信息，它确实显示了一个固定像素，我尝试增加宽度大小，但它看起来仍然不正确。此外，媒体查询大小似乎已经存在。

是的，这取决于您希望它在移动设备上每行显示多少个产品，目前看起来每行显示 2 个。我将产品列表的宽度更改为 22%，它显示 4 列产品，但这取决于您的桌面分辨率。 imageshack.com/a/img924/7395/fNVXGV.png

我插入了你的代码，它在我的屏幕上是这样的：https://i.imgur.com/F3cGHmy.png - 图像看起来更小，并且一直向左移动。

是的，就像我说的那样，您需要修改模板并更改网格类，以便它们占据产品的大部分空间。目前它对产品使用 grid-8 类，但如果您使用 grid-10，它看起来会好得多。唯一的问题是您的屏幕分辨率看起来超高，并且主题使用静态像素宽度而不是百分比，因此您会在大分辨率上看到很多空白。附上它在我的 13 英寸笔记本电脑上的样子 imageshack.com/a/img922/8052/mDpx83.png