Как в WooCommerce сделать изображение на карточке товара круглым?
Здравствуйте, подскажите пожалуйста как сделать изображение на карточке товара круглым.
Вот верстка
<div class="col-md-4 col-sm-4 mb-60"> <div class="shop-container align-center alt-2"> <a href="images/shop/img-1@2x.jpg" class="lightbox mfp-image"> <div class="shop-media"> <div class="shop-img"> <img src="images/shop/img-1.jpg" data-at2x="images/shop/img-1@2x.jpg" alt> </div> <div class="label-new label-left font-alt">New</div> </div> </a> <a href="shop-single-item.html"><h3 class="shop-title font-alt">Luxury Spa</h3></a> <div class="shop-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="shop-price font-alt"> $ 69<span>99</span> </div> <p>Phasellus tristique diam turpis, vitae rhoncus mi ultricies vel</p> <a href="shop-cart.html" class="button small">Add to cart</a> </div> </div> |
<div class="col-md-4 col-sm-4 mb-60"> <div class="shop-container align-center alt-2"> <a href="images/shop/img-1@2x.jpg" class="lightbox mfp-image"> <div class="shop-media"> <div class="shop-img"> <img src="images/shop/img-1.jpg" data-at2x="images/shop/img-1@2x.jpg" alt> </div> <div class="label-new label-left font-alt">New</div> </div> </a> <a href="shop-single-item.html"><h3 class="shop-title font-alt">Luxury Spa</h3></a> <div class="shop-stars"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> <div class="shop-price font-alt"> $ 69<span>99</span> </div> <p>Phasellus tristique diam turpis, vitae rhoncus mi ultricies vel</p> <a href="shop-cart.html" class="button small">Add to cart</a> </div> </div>
Дополнительно:
Изменять .css файлы, давно не пользовался Woo, но скорее всего этого не сделать без правок в стилях
Ответы:
С помощью css, пропиши в стилях темы
.shop-img img{
border-radius: 100px;
}
- такой стиль есть, именно в woocommerce не отабражается так как надо
- Rivers86lis, значит не применяется. Исправляй правило что бы применялся.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Круглое изображение делается CSS-свойством
border-radius: 50%, но оно будет выглядеть кругом только если сама область изображения квадратная. Если картинка прямоугольная, получится овал. Поэтому нужно задать одинаковую ширину и высоту и включитьobject-fit: cover..shop-img { width: 220px; height: 220px; margin: 0 auto; overflow: hidden; border-radius: 50%; } .shop-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
Если это именно карточка товара WooCommerce, селекторы могут быть другими. Часто подходит так:
.woocommerce ul.products li.product a img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; border-radius: 50%; }
Если стиль "есть, но не применяется", значит его перебивает другой CSS или селектор не попадает в реальную разметку WooCommerce. Проверьте элемент через DevTools: правый клик по картинке → Inspect → вкладка Styles. Там будет видно, какой CSS применяется и какое правило зачёркнуто.
Для быстрой проверки можно временно усилить селектор:
body.woocommerce ul.products li.product a img { border-radius: 50% !important; }
!importantлучше не оставлять как постоянное решение, но он помогает понять, что проблема именно в приоритете CSS. После проверки сделайте более точный селектор и уберите!important.