中心 WooCommerce 档案页面和单个产品页面答案

【问题标题】：Center WooCommerce archives page and single product pages中心 WooCommerce 档案页面和单个产品页面
【发布时间】：2018-06-20 18:06:11
【问题描述】：

我网站的商店页面是使用 woocommerce.php 文件制作的，商店页面本身很好，但我只想将产品居中。

有没有办法做到这一点？

此外，在从商店页面单击时，在单个产品视图中，产品的图像和描述很大并且位置不正确。

有没有办法为单个产品图片和描述设置样式？

这里是the live link 我的网站。

【问题讨论】：

rewindrecordings.co.uk/shop 这是页面，我现在唯一的问题是似乎有一个不可见的侧边栏将产品推向左侧？
您需要发布在您的问题中显示问题的标记，而不是您的网站，一旦解决此问题，您的网站就会更改，并且将来不会帮助任何人。 minimal reproducible example

【解决方案1】：

您可以在这两种方式之间进行选择：

1) CSS 方式 — 您应该需要将此 CSS 规则添加到活动主题的 styles.css 文件中：

@media only screen and (min-width: 992px) {
    .woocommerce center > .col-md-10 {
        margin: 0 8.33333333% !important;
    }
}

这应该可以解决您在所有 WooCommerce 页面上的居中问题

2) HTML结构方式——这个问题可以在你的html结构中解决。

其实你得到了这个：

<div id="primary" class="col-md-12 mb-xs-24">
    <center>
        <div class="col-md-10">

你应该需要这个：

<div id="primary" class="col-md-12 mb-xs-24">
    <div class="col-md-12">

这将使容器内的显示为 100%，而不是左侧的 83%。

正如 Rob 在 cmets 中建议的那样，您应该删除过时的 <center> html 标记...

【讨论】：