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

Настройка сетки товаров

Тема в разделе "Вопросы новичков", создана пользователем MrAlex, 24 авг 2014.

  1. MrAlex

    MrAlex

    Сообщения:
    5
    Симпатии:
    2
    Баллы:
    3
    Здравствуйте. Столкнулся с такой проблемой, что не могу найти, как настроить сетку товаров. Из-за разницы в длинне назаваний товаров кнопка "Добавить в корзину" смещается вниз у элементов с длинным названием и остается на месте у элементов с коротким. Получается очень некрасивая "лесенка". Я уверен, что с этой проблемой сталкивались многие. Прошу помощи в решении этой проблемы. Заранее огромное спасибо :)
    [​IMG]
     
  2. Labunsky

    Labunsky

    Сообщения:
    96
    Симпатии:
    14
    Баллы:
    8
    Может попробовать использовать краткое описание товара, ~120-130 знаков (с пробелом).

    [​IMG]
     
    Последнее редактирование: 26 авг 2014
  3. MrAlex

    MrAlex

    Сообщения:
    5
    Симпатии:
    2
    Баллы:
    3
    Большое спасибо за предложенный вариант, но он к сожалению мне не подходит. Как мне кажется, должно быть какое-то решение со стороны кода.
     
  4. redjek

    redjek Местный

    Сообщения:
    155
    Симпатии:
    36
    Баллы:
    28
    это конечно ооочень индивидуально, для каждых тем, Но в свое время решил просто, в заголовок добавлять <br>&nbsp;
    Тоесть, смотрите какой самый длинный заголовок, например на 4 строчки, значит в самый короткий, надо вставить 3 раза <br>&nbsp;
    Это просто если товаров несколько десятков, а вот если пара тысяч,.. тут надо уж думать чтото другое =)
     
  5. MrAlex

    MrAlex

    Сообщения:
    5
    Симпатии:
    2
    Баллы:
    3
    У меня товаров не так много и из всех варинатов решения ваш наиболее простой. Спасибо!
     
  6. redjek

    redjek Местный

    Сообщения:
    155
    Симпатии:
    36
    Баллы:
    28
    Кстати, есть еще вариант, но опать же, это сугубо индивидуально для каждой темы темы,
    в редакторе стилей найти стиль заголовка( Например .products .product-title или .product_item), и установить ему высоту height: 50px;
     
    • Нравится Нравится x 1
  7. MrAlex

    MrAlex

    Сообщения:
    5
    Симпатии:
    2
    Баллы:
    3
    Опробую ваш метод и отпишусь. Сегодня обнаружил, что при использовании <br>&nbsp; сетка хорошо выглядит в десктопной версии, но ломается в планшетной и мобильной версии сайта
     
  8. MrAlex

    MrAlex

    Сообщения:
    5
    Симпатии:
    2
    Баллы:
    3
    Проблема решилась путем добавления в style.css дочерний темы следующего кода:
    Код:
    ul.products li.product h3 {height: 70px; line-height: 20px}
     
    • Нравится Нравится x 2
    • Не согласен Не согласен x 2
    • Информативно Информативно x 1
  9. Grollem

    Grollem

    Сообщения:
    141
    Симпатии:
    47
    Баллы:
    28
    это плохой вариант решения выставлять фиксированную высоту и высоту строк.
    Правильное решение должно быть таким
    <div ваш родительский блок>
    <div class = "img_title">Картинка и заголовок</div>
    <div class = 'after_price'>Цена и кнопка куиить</div>
    </div>

    Нужно изменить разметку как я показал и применить следующие стили
    родитльский блок {
    position:relative;
    height:500px; // или любая по вашему желанию
    }
    .after_price {
    position:absolute;
    bottom:0}
    В этом случае цена и кнопка будут всегда прижаты к низу карточки товара.
    А заголовки могут быть любой длины.
     
    • Нравится Нравится x 2
  10. idev.bot

    idev.bot

    Сообщения:
    1
    Симпатии:
    0
    Баллы:
    1
    привет!!! подскажите для чайника по подробнее как решить проблему
     
  11. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Чтобы Вам подсказать, Вы должны подробнее описать проблему и привести ссылку на "проблемную" страницу.
     
  12. prandros

    prandros

    Сообщения:
    9
    Симпатии:
    1
    Баллы:
    3
    Можете мне подсказать?
    http://themify.me/demo/themes/ultra/shop/
    Вот работаю с этим шаблоном,если нужно могу файлы дать!
    Как вывести товары ровно?
     
  13. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Всё на весь экран - пример выравнивания. На широкоформатном мониторе 1920х1080px получилось аж девять колонок. :)
     
    Последнее редактирование: 21 фев 2016
  14. -Vladislav-

    -Vladislav- Местный

    Сообщения:
    212
    Симпатии:
    50
    Баллы:
    28
    - ограничить только одной строкой с троеточием (селектор может отличаться):
    Код:
    // Этот CSS также добавляет троеточие ... в конце каждого заголовка товара
    
    .woocommerce ul.products li.product h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    - ограничить заданным количеством символов:
    Код:
    // Примечание: этот простой код PHP можно поместить в свой файл functions.php темы
    
    add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
    
    function shorten_woo_product_title( $title, $id ) {
    if ( is_shop() && get_post_type( $id ) === 'product' ) {
    return substr( $title, 0, 15 ); // измените последнее значение на нужное вам количество символов
    } else {
    return $title;
    }
    }
    Использовал у себя первый вариант, вариант с количеством символов не решил проблему - на разных девайсах не угадать сколько строк будет.

    источник: wpincode.com/kak-ukorotit-zagolovki-tovarov-v-woocommerce/
     
  15. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Второй вариант на php вообще не подходит, так как подрезка должна осуществляться браузером.
    Есть ещё вариант на jQuery, типа dotdotdot.
    http://dotdotdot.frebsite.nl/
    Сейчас специально установил js скрипт, настроенный на подрезку в две строки с троеточием, в пример выше.
    Когда товара мало, то скрипт справляется, хотя видно что режет с запозданием
    http://innka.info/shirokoformatnaya-vitrina-woocommerce/
    Но когда товара на странице много, то скрипт не успевает всё просчитать.
    http://innka.info/vsyo-na-ves-ekran/
    В моём Файерфоксе через некоторое время останавливается и пишет "Сценарий не отвечает". При этом часть товара внизу остаётся с неподрезанным текстом. Chrome и Opera кое-как справляются и со значительным запозданием доводят сценарий до конца.
    Пересчёт возобновляется, если изменить ширину окна браузера. Скрипт вновь пересчитывает количество знаков под новую ширину.
     
    Последнее редактирование: 21 фев 2016
  16. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
  17. sam325

    sam325

    Сообщения:
    29
    Симпатии:
    4
    Баллы:
    3
    • Нравится Нравится x 1
    • Согласен Согласен x 1
  18. intman

    intman

    Сообщения:
    72
    Симпатии:
    2
    Баллы:
    8
    А что здесь имеется ввиду под термином <div ваш родительский блок> ?
     
  19. intman

    intman

    Сообщения:
    72
    Симпатии:
    2
    Баллы:
    8
    Если вам в меру дорог это шаблон - поменяйте его на SG Window. Там нет это проблемы вот смотрите
     
  20. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Если заголовки под товарами в одну строчку ужимать, так и будет всё ровно.