• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

Решено Огромная картинка в карточке товара

Image CMS

Yarichka

Новичок
#1
Здравствуйте, кто может помогите. Создала магазин, все отладила, единственное с чем не могу справится это огромное фото в карточке товара и некорректное размещение блоков в ней. Вот пример http://meduvsim.vn.ua/product/litne_riznotravia/
Все что ранее прочитала не помогло, либо не смогла понять как реализовать. Если кто знает решение, помогите пожалуйста или может скиньте ссылку на решенную тему.
Я очень-очень новичок, поэтому буду благодарна за разъяснения какой файл открывать и что в нем править, стандартные решения из админки уже все перепробовала.
 

searchingman

Гуру
Местный
#2
1. Смотрите заданные размеры для "Изображение единичного товара" (WooCommerce -> Настройки -> Товары -> Отображение -> Изображение товара).
2. Чтобы блок с ценой был расположен рядом с блоком картинки, нужно для него убрать свойство 'clear:both', т.е. сделать 'clear:none'. Подробнее решение проблемы смотрите на скриншоте.
 
Последнее редактирование:

Yarichka

Новичок
#3
1. Смотрите заданные размеры для "Изображение единичного товара" (WooCommerce -> Настройки -> Товары -> Отображение -> Изображение товара).
2. Чтобы блок с ценой был расположен рядом с блоком картинки, нужно для него убрать свойство 'clear:both', т.е. сделать 'clear:none'. Подробнее решение проблемы смотрите на скриншоте.
Спасибо, но это, к сожалению, не помогало. Я пробовала менять эти настройки в разных вариациях. Плагин восстановления изображений запускала, также перезаливала картинки после изменения настроек. Становилось только хуже: картинка делалась расплывчатой и нечеткой, но такой же большой.
Последнее, что я делала это в файле woocommerce-layout.css
woocommerce img,.woocommerce-page img{height:auto;max-width:100%}. вместо 100% поставила 48%. Это помогло, но все фото стали меньше, ровно в половину места которое занимали. И получилось только хуже
 

searchingman

Гуру
Местный
#6
Спасибо, но это, к сожалению, не помогало. Я пробовала менять эти настройки в разных вариациях. Плагин восстановления изображений запускала, также перезаливала картинки после изменения настроек. Становилось только хуже: картинка делалась расплывчатой и нечеткой, но такой же большой.
Последнее, что я делала это в файле woocommerce-layout.css
woocommerce img,.woocommerce-page img{height:auto;max-width:100%}. вместо 100% поставила 48%. Это помогло, но все фото стали меньше, ровно в половину места которое занимали. И получилось только хуже
Ваша реальная картинка имеет размер 105px x 150px. Вот при этих размерах она не будет "расплывчатой".
Вы увеличиваете размер блока картинки до 300 x 492px. Поэтому она расплывается.
Подготовьте нормальные изображения под нужный размер.

Да, и редактировать файлы плагина (\wp-content\plugins\woocommerce\assets\css\woocommerce-layout.css ) категорически не рекомендуется, т.к. он может перезаписаться при следующем обновлении плагина. Для этого есть файл стилей вашей темы, т.е. style.css
 

Yarichka

Новичок
#7
Ваша реальная картинка имеет размер 105px x 150px. Вот при этих размерах она не будет "расплывчатой".
Вы увеличиваете размер блока картинки до 300 x 492px. Поэтому она расплывается.
Подготовьте нормальные изображения под нужный размер.

Да, и редактировать файлы плагина (\wp-content\plugins\woocommerce\assets\css\woocommerce-layout.css ) категорически не рекомендуется, т.к. он может перезаписаться при следующем обновлении плагина. Для этого есть файл стилей вашей темы, т.е. style.css
Благодарю. Но исходный размер картинок 1112*1590. Когда я выставляю размер для картинки товара в настройках woocommerce больше, фото наоборот становится четче.
Мне кажется что здесь дело не в фотографиях а в настройках разметки самой страницы. Вот только я не знаю, где их можно изменить ((
 

Yarichka

Новичок
#8
По сути дела фото пусть бы оставалось таким, мне бы подтянуть название товара и цену на тот пробел, который посередине.
 

searchingman

Гуру
Местный
#10
По сути дела фото пусть бы оставалось таким, мне бы подтянуть название товара и цену на тот пробел, который посередине.
В style.css своей темы в конец вставьте код
HTML:
.type-product .entry-summary {
    clear:none;
}
Блок с ценой должен встать рядом с картинкой.