Woocommerce 的显示问题答案

【问题标题】：Display issue with WoocommerceWoocommerce 的显示问题
【发布时间】：2019-09-03 18:51:21
【问题描述】：

我在 WP 的附加 CSS 中添加了以下代码：

.woocommerce-page.woocommerce-page ul.products li.product:hover a.add_to_cart_button, 
.woocommerce ul.products li.product:hover a.add_to_cart_button, 
.woocommerce-page ul.products li.product:hover a.add_to_cart_button {
    display: block;
    bottom: 0;
}

.woocommerce-page.woocommerce-page ul.products li.product a.add_to_cart_button {
    display: block !important;
    position: relative;
    bottom: 0;
    text-align: center;
    margin: 0;
    left: auto;
    top: auto;
    text-align: center;
    float: none;
}

.woocommerce-page.woocommerce ul.products li.product, 
.woocommerce-page.woocommerce-page ul.products li.product {
    text-align: center;
}

.woocommerce .button.product_type_simple{
    width: 100%;
    float: none;
}

当查看 Shop 或 Categories 时，此代码显示正常：

https://www.brighteroils.com/shop/

但是主页页面上的项目显示不正确，我一直在摸不着头脑。

https://www.brighteroils.com/homepage/

感谢任何帮助/指针（这是我的第一篇文章）...

【问题讨论】：

标签： css wordpress woocommerce product

【解决方案1】：

.woocommerce ul.products li.product:hover a.add_to_cart_button{
    display: block;
    bottom: 0;
}

.woocommerce ul.products li.product a.add_to_cart_button {
    display: block !important;
    position: relative;
    bottom: 0;
    text-align: center;
    margin: 0;
    left: auto;
    top: auto;
    text-align: center;
    float: none;
}

.woocommerce ul.products li.product, 
    text-align: center;
}

.woocommerce .button.product_type_simple{
    width: 100%;
    float: none;
}

.woocommerce li.product a {
    text-align: center;
}

您的主页没有 .woocommerce-page 类，并且两个页面都有公共类 .woocommerce 所以我更换了它。它工作正常。您可以在控制台中对其进行测试。看截图：https://prnt.sc/nbeipi

【讨论】：

嘿，谢谢。非常感谢您回复并发送您的代码。

【解决方案2】：

主页的css是

 .woocommerce ul.products li.product .price

主页没有 woocommerce-page 类，您的产品页面上有一个附加到正文的类，称为 woocommerce-page。主页

 <body>

没有那个类。

【讨论】：

【解决方案3】：

将此添加到其他 CSS 中：

.woocommerce ul.products li.product .price {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    text-align: center;
}

h2.woocommerce-loop-product__title {
    text-align: center !important;
}

.woocommerce ul.products li.product a.button {
    float: none !important;
    margin-right: 0px !important;
    width: 100% !important;
}

【讨论】：

您好，感谢您花时间回复我的第一篇文章。欣赏它。谢谢