Проблема с отображением в Woocommerce - PullRequest
Новая
       14

Проблема с отображением в Woocommerce

0 голосов
/ 13 апреля 2019

Я добавил следующий код для дополнительного CSS в WP: 

.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/

Но отображение элементов на странице на главной странице не отображается правильно, и я почесал голову, почему это не так.

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

Любая помощь / указатели оценены (это мой первый пост) ...

Ответы [ 3 ]

1 голос
/ 13 апреля 2019 
.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

0 голосов
/ 13 апреля 2019

добавить это к дополнительному 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;
}
0 голосов
/ 13 апреля 2019

CSS для домашней страницы будет 

 .woocommerce ul.products li.product .price

На домашней странице нет класса woocommerce-page, к которому на вашей странице товаров прикреплен класс, который называется телом woocommerce-page.Домашняя страница 

 <body>

не имеет этого класса.

...