Single Product круглый товар?
Всем привет, подскажите пожалуйста как сделать круглые товары в карточке открытова товара?
Дополнительно:
Контейнеру с картинкой задайте стили
border: 1px solid #000; border-radius: 50%; overflow: hidden; |
border: 1px solid #000; border-radius: 50%; overflow: hidden;
Это пример.
border, border-radius, padding обертке
Ещё научиться отличать товар от картинки.
Но вопрос понятен в целом, ответ дали.)
Ответы:
В общем случае
body.single-product еще-какие-то-селекторы img { border-radius: 50%; border: solid 3px #C4D6D3; padding: 10px; } |
body.single-product еще-какие-то-селекторы img { border-radius: 50%; border: solid 3px #C4D6D3; padding: 10px; }
А конкретизирующие селекторы зависят от конкретной реализации темы.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если речь о том, чтобы изображение товара на single product было круглым, это решается CSS-ом. Нужно задавать круг не только самой картинке, но и её контейнеру, чтобы лишние части изображения обрезались. Иначе картинка может иметь border-radius, но внутри галереи WooCommerce останутся прямоугольные обёртки.
Пример:
.single-product .woocommerce-product-gallery__image { border-radius: 50%; overflow: hidden; aspect-ratio: 1 / 1; } .single-product .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
Если нужно сделать круглыми миниатюры галереи:
.single-product .flex-control-thumbs img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
Важный момент: круг хорошо выглядит только на квадратных изображениях. Если исходные фото товара прямоугольные,
object-fit: coverобрежет края. Для каталога это может быть нормально, но для товаров, где важна форма/детали, лучше использовать мягкое скругление, напримерborder-radius: 16px, а не круг.Не правьте файлы WooCommerce ради такой задачи. Добавьте CSS в дочернюю тему, custom CSS темы или отдельный маленький плагин стилей. После правки проверьте мобильную карточку товара и лайтбокс: некоторые галереи подменяют изображение через JS, и стили нужно применять к актуальным классам темы.