Изменить место вывода блока рекомендованных товаров

[dangler]

Здравствуйте!

Доброго вечера!

У меня woocomerce с темой Storefront.

Я бы хотел изменить вид страницы отдельного товара, а конкретно добавить фон под карточкой товара. Если бы вся информация о товаре была в одном блоке, то можно было бы добавить css для этого блока.

Однако, сейчас отдельный товар выводится так:
<div class="product">
<div class="images"></div>
<div class="summary"></div>
<div class="woocommerce-tabs"></div>
<div class="related products"></div>
</div>

То есть, если задать фон в css основного блока product, то фон появится и под рекомендованными товарами тоже. А мне нужно, чтобы фон был только под фотографией товара с ценой и описанием, а рекомендованные товары уже были отдельно.
Для этого нужно вынести div related из div product, чтобы стало так:
<div class="product">
<div class="images"></div>
<div class="summary"></div>
<div class="woocommerce-tabs"></div>
</div>
<div class="related products"></div>

Подскажите, пожалуйста, как это можно сделать?

 

[rikitiki]

Для этого нужно вынести div related из div product, чтобы стало так:
<div class="product">
<div class="images"></div>
<div class="summary"></div>
<div class="woocommerce-tabs"></div>
</div>
<div class="related products"></div>

Непонятно, почему по такой схеме див развёрнут по высоте, когда таб есть
http://xarod.tk/product/testovyj-tovar-2/
и сжат, когда таба нет
http://xarod.tk/product/testovyj-tovar-1/

 

[dangler]

rikitiki , а как у вас получилось добавить этот еще один div <div class="zzz"> , можете рассказать?
В какой файл вы добавляли его вывод?
Я смотрел в файле \wp-content\plugins\woocommerce\templates\single-product.php - там нет ни одного дива, только вызовы функций. Куда же div вставлять?

 

[dangler]

А по вашему вопросу - почему блок не развернут по высоте - это потому что div'ы внутри него него со свойством float: left;
У меня так бывало в практике, надо просто добавить перед закрытием этого блока пустой div со свойством clear: both; , который закроет эти float и даст блоку нормально растянуться

 

[rikitiki]

http://innka.info/woocommerce-izmenenie-stilya-kartochki-tovara/
А div я с помощью overflow: hidden; растянул. Тоже хорошо работает.

 

[dangler]

rikitiki, спасибо, теперь разобрался!