尝试在产品页面上编辑容器答案

【问题标题】：Trying to edit the Container on Product Pages尝试在产品页面上编辑容器
【发布时间】：2016-06-20 17:54:57
【问题描述】：

我目前正在尝试在此页面上编辑 div.container：http://honestabe.ca/ininkk/product/cant-recycle-wasted-time/

我希望容器内的产品图片较大，但也希望有足够的空间用于侧边栏小部件（购物车和搜索栏）。

这是我在自定义 CSS 中使用的当前代码，我希望该解决方案仅适用于当前存在并将在未来创建的产品页面。

.content-left.page-with-sidebar.col-sm-8.col-md-9.col-lg-8 {
  width: 1200px;
  height: 400px;
}
.content-right.col-sm-4.col-md-3.col-lg-3.col-lg-offset-1 {
  margin: 0px;
}
.single.single-product.row {
  width: 1600px;
  height: 600px;
}
.single.single-product.postid-49.container {
  width: 1600px;
  margin: 20px;
}

如果有人可以提供帮助，那就太好了。提前致谢！

【问题讨论】：

标签： css wordpress woocommerce containers webpage

【解决方案1】：

Wordpress 非常适合将 CSS 应用到某些页面、页面类型、帖子类型等。它根据内容向正文添加一个类。以下是链接页面的正文类列表：

<body class="single single-product postid-49 woocommerce woocommerce-page wpb-js-composer js-comp-ver-4.11.2 vc_responsive">

如果您希望所有这些内容仅适用于 product 页面，我建议您将给定的 CSS 修改为：

body.product .content-left.page-with-sidebar.col-sm-8.col-md-9.col-lg-8{
width: 1200px;
height: 400px;}

body.product .content-right.col-sm-4.col-md-3.col-lg-3.col-lg-offset-1{
margin: 0px;}

body.product .single.single-product.row{
width: 1600px;
height: 600px;}

body.product .single.single-product.postid-49.container{
width: 1600px;
margin: 20px;}

但是，我必须警告您——在查看了您拥有的这些 CSS 声明之后，您可能遇到了麻烦。

例如类 .postid-49 只适用于一种产品；不是全部。

另外，如果这是任何特定目标，我认为您将在网站的响应能力方面遇到问题。

【讨论】：

如果您现在可以查看，您会发现我使用了您给我的代码，但实际上我只是在尝试编辑产品页面，以便单个产品图像更大比现在的大小。我想知道是否有任何方法可以做到这一点？ woocommerce 设置中给出的选项不起作用，因此 CSS 是唯一的方法。这就是我弄乱容器的原因。不过，感谢您抽出宝贵时间回答我的问题，非常感谢您的帮助！
你的评论让我相信你还没有理解我发布的答案，或者没有仔细阅读。