Question

我在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;
}

当查看“商店”或“类别”时，此代码显示正常：

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

但是主页上页面上项目的显示无法正确显示，我一直在why不休。

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

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

Answer 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

Answer 2

首页的CSS为

 .woocommerce ul.products li.product .price

主页上没有woocommerce类页面，该页面在您的产品页面上具有与woocommerce-page正文相连的类。主页

 <body>

没有该课程。

Answer 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;
}

Woocommerce的显示问题

3 个答案: