• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Огибание картинки товара

kuzmacska

Новичок
Подскажите, пожалуйста, как сделать огибание картинки товара его описанием (заголовком,ценой, кнопкой купить и описанием с артикулом) Все перегуглил, не получается..Снимок.jpg
 

Антон

Новичок
По умолчанию в wpcommerce, "текст огибает картинку".
Смотрите css шаблона темы.
Как вариант, не достаточная ширина
.content {

}
или как у вас называется класс, отвечающий за контент.
вот и не помещается.
 

rikitiki

Специалист
Местный
Не обтекает а делит карточку товара примерно пополам. На малых разрешениях контент медиазапросами уводится под изображение.
 

rikitiki

Специалист
Местный
Немного не в тему но выложу здесь, чтобы не создавать новый топик.
Вопрос обтекания описания картинок в карточках товаров интересен.
В Woocommerce это никак не реализовано. И если дополнительных миниатюр много или описание длинное то могут образоваться пустоты, а это выглядит не рационально.
Взгляните например на карточку товара моего сайта, где много дополнительных миниатюр:
http://innka.info/product/ukreplyayushhaya-syvorotka-dlya-resnic-i-brovej-mary-kay/
В ней пространное описание товара я вывел в кратком дескрипшине. При этом слева, если раскрыть спойлер, образуется большой пробел. Однако если я выведу описание в полной форме, то есть в табе, то пробел будет под кнопкой "Добавить в корзину". Для выравнивания и изъятия пробела пришлось часть текста спрятать под спойлер. Смотрится конечно лучше, но при его раскрытии образуется пустота.
По умолчанию Woocommerce делит наверху карточку товара на две части. То есть дивы флоатами разнесены в разные стороны. Каждый имеет ширину 48% В левом диве размещается картинка и дополнительные миниатюры, а в правом название товара, цена, кнопка "Добавить в корзину" и краткое описание. Эти элементы размещены во внутренних дивах правого дива.
Если удастся изъять краткое описание из внутреннего дива и разместить его отдельно, например в теге обычного абзаца, то огибание текстом картинок будет.
В онлайн-редакторе я набросал простенький код, как это должно выглядеть:
http://codepen.io/anon/pen/eGvHK
Можно конечно сделать описание в форме полного дескрипшина, но опять-таки нужно избавиться от размещения его в диве.
 
Последнее редактирование:

Drm

Новичок
Немного не в тему но выложу здесь, чтобы не создавать новый топик.
Вопрос обтекания описания картинок в карточках товаров интересен.
В Woocommerce это никак не реализовано. И если дополнительных миниатюр много или описание длинное то могут образоваться пустоты, а это выглядит не рационально.
Взгляните например на карточку товара моего сайта, где много дополнительных миниатюр:
http://innka.info/product/ukreplyayushhaya-syvorotka-dlya-resnic-i-brovej-mary-kay/
В ней пространное описание товара я вывел в кратком дескрипшине. При этом слева, если раскрыть спойлер, образуется большой пробел. Однако если я выведу описание в полной форме, то есть в табе, то пробел будет под кнопкой "Добавить в корзину". Для выравнивания и изъятия пробела пришлось часть текста спрятать под спойлер. Смотрится конечно лучше, но при его раскрытии образуется пустота.
По умолчанию Woocommerce делит наверху карточку товара на две части. То есть дивы флоатами разнесены в разные стороны. Каждый имеет ширину 48% В левом диве размещается картинка и дополнительные миниатюры, а в правом название товара, цена, кнопка "Добавить в корзину" и краткое описание. Эти элементы размещены во внутренних дивах правого дива.
Если удастся изъять краткое описание из внутреннего дива и разместить его отдельно, например в теге обычного абзаца, то огибание текстом картинок будет.
В онлайн-редакторе я набросал простенький код, как это должно выглядеть:
http://codepen.io/anon/pen/eGvHK
Можно конечно сделать описание в форме полного дескрипшина, но опять-таки нужно избавиться от размещения его в диве.
Если честно читал не очень внимательно, но похоже знаю, как решить проблему.

Необходимо перенести хук с описанием ниже в шаблон. Напишите в скайп Drm1804 помогу решить
 
Сверху Снизу