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

Вывод кнопки или цены на одном уровне

Тема в разделе "Вопросы, советы и доработки.", создана пользователем Юрий Николаевич, 22 июл 2015.

  1. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    День добрый ! Подскажите , как вывести на витрине товара , кнопку или цену на одном уровне не зависимо от длины названия. Где то на форуме ,уже как будто встречал, но не могу найти .
     
  2. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Так чего на одном уровне выводить? Непонятно. Если ценник и кнопку в корзину, то гляньте через файербаг, как сделано в этой приятной темке:
    http://themes.fruitfulcode.com/fruitful/shop/
     
  3. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Спасибо ! Но цены находятся на разных уровнях. А мне надо пускай внутри увеличенный отступ , но чтобы внешние границы и цена ( или кнопка, или то или другое, ведь кнопу спрятать можно) были на одном уровне
     
  4. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Да, многим это не нравится. Длина заголовков в витрине не ограничивается. Поэтому вертикальное положение того что ниже заголовков будет зависеть от длины заголовков.
    Единственное решение это сделать фиксированную высоту под заголовки или ограничить их определённым количеством строк с многоточием на конце. К сожалению в CSS такое можно сделать одной строкой, а для подрезки большего количества строк нужен скрипт. Подрезка с помошью php по количеству букв не прокатывает из-за того что ширина товаров в витрине относительная.
     
    Последнее редактирование: 22 июл 2015
  5. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Нашел подсказку, но как ее осуществить , поменять разметку не знаю
    http://wpcommerce.ru/threads/nastrojka-setki-tovarov.1081/

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

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


    Кто может помогите !!!!!!!!!!!!!!!!!!
     
  6. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Вопрос нужно ставить исключительно в контексте конкретной темы, т.к. это зависит от того как сверстана тема.
    Дайте ссылку на используемую вами тему, а лучше на ваш сайт.
     
  7. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Тема wordpress customizr. Подскажите
     
  8. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Попробовал предложенный принцип на теме customizr. Выглядит так http://take.ms/Gc3zz
    Давайте ссылку на страницу вашего сайта с товарами, подскажу.
     
  9. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
  10. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    1. Устанавливаем фиксированную высоту блока товара
    HTML:
    .woocommerce ul.products li.product {
      width: 21%;
      height: 355px; /* указать свою высоту */
    }
    2. Блоки с кнопкой "Добавить в корзину" и цена прижимаем к нижнему краю.
    HTML:
    .woocommerce ul.products li.product .price {
      position: absolute;
      bottom: 50px;
      left: 40px;
    }
    HTML:
    .woocommerce ul.products li.product .button {
      position: absolute;
      bottom: 0;
    }
    Конечный результат выглядит так http://take.ms/514Bo
     
    Последнее редактирование: 27 сен 2015
    • Нравится Нравится x 3
  11. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Спасибо ! Но ..... увеличивается и расстояние между блоками категорий на витрине категорий и магазина. Я с этим уже 5 часов бъюсь !!!!!!!!!!! Сделаешь одно ,летит другое (((((((((((((
     
  12. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Про какое расстояние идет речь? Покажите на примере на своем сайте после применения вышеуказанных стилей.
     
  13. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Почему то задаваемая высота для блока товара , используется и для блока категории
     

    Вложения:

  14. searchingman

    searchingman Местный

    Сообщения:
    1.634
    Симпатии:
    552
    Баллы:
    113
    Вместо
    .woocommerce li.product {
    height: 355px; /* указать свою ширину */
    }
    используйте
    .woocommerce-page li.type-product {
    height: 355px;
    }
    Тогда высота будет применяться только к товарам.
     
    • Нравится Нравится x 1
    • Согласен Согласен x 1
  15. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    ГРОМАДНОЕ СПАСИБО !!!!!!!!! Я уже сообразил , что .woocommerce-page а вот li.type-product я никак не мог найти. И где Вы нашли!!!!!!!!!! СПАСИБО !!!!!!!!
     
  16. rikitiki

    rikitiki Местный

    Сообщения:
    749
    Симпатии:
    184
    Баллы:
    43
    Поправьте пожалуйста - там при разрешении менее 768px ширина 48% должна быть.
     
    Последнее редактирование: 24 июл 2015
    • Нравится Нравится x 2
  17. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Спасибо за подсказку ! А где подправить :) ???
     
  18. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Rikitiki спасибо Вам , не один раз выручаете великолепными ответами.СПАСИБО!
     
  19. Юрий Николаевич

    Юрий Николаевич

    Сообщения:
    145
    Симпатии:
    3
    Баллы:
    18
    Вечер добрый ! Но к сожалению не все. Оказалось ,что при выводе товара шорткодом "klass" вывода товара другой . И заданная высота не распространяется. Так что можете представить , какая получилась картина при выводе нового товара.Но оказалось и не сложно , хотя немножко попотел .
    Необходимо добавить
    .woocommerce li.type-product {
    height: 365px;
    }
    Ну пока все ( да я увидел откуда type-product :) )
     
  20. ArtemZhyg

    ArtemZhyg

    Сообщения:
    49
    Симпатии:
    2
    Баллы:
    8
    Все это надо вставлять в style.css темы?