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

Решено Как изменить размер кнопки и как выровнять сетку категорий

Deviw

Новичок
http://orshamedia.by/shop/
Здравствуйте. Как изменить ширину кнопки "Добавить в корзину" чтоб не выезжала?И как изменить высоту блока с информацией о товаре . Желательно что и куда вписывать. Спасибо
 

Вложения

  • 1.png
    1.png
    144.4 KB · Просмотры: 41

qwer

Специалист
Местный
http://orshamedia.by/shop/
Здравствуйте. Как изменить ширину кнопки "Добавить в корзину" чтоб не выезжала?И как изменить высоту блока с информацией о товаре . Желательно что и куда вписывать. Спасибо

Учить CSS.
Вам нужно не только кнопку поправить, но и отображение товаров на разных устройствах.
Посжимайте окно браузера и поймёте что я имею в виду.
А править это всё нужно будет в style.css файле вашей текущей темы.

Классы отвечающие за вашу кнопку ниже
Код:
.woocommerce #review_form #respond .form-submit input, .woocommerce-page #review_form #respond .form-submit input, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce-page ul.products li.product a.add_to_cart_button {
/**Тут нужно прописать новые стили для кнопки, за размер кнопки отвечает свойство width**/
}
Даже не знаю что и сказать.
Удачи!
 

Deviw

Новичок
Если бы я хорошо знал CSS я бы не просил помощи на форуме "Новичков".
 

qwer

Специалист
Местный
Если бы я хорошо знал CSS я бы не просил помощи на форуме "Новичков".

Я не пыталась вас обидеть.
Просто это достаточно распространенный вопрос, который является основами изучения HTML и СSS.
И поиск смог бы вам помочь решить ваш вопрос.

Не по теме:
У вас прописаны стили:
Код:
.woocommerce ul.products li.product {
    width: 16%;
}
Настоятельно рекомендую убрать их - они ломают всю вёрстку.
На расширении 320 (одно из самых популярных на мобильных устройствах)
Было(когда включен стиль width: 16%):
upload_2017-4-18_17-17-24.png
Стало(когда выключить стиль width: 16%. Удобно для пользователя, который будет просматривать сайт с телефона):
upload_2017-4-18_17-21-38.png
Где править кнопку я прописала в прошлом ответе, а так же, добавила и классы, которые отвечают за вашу кнопку.
А править это всё нужно будет в style.css файле вашей текущей темы.
Классы отвечающие за вашу кнопку ниже
Код:
.woocommerce #review_form #respond .form-submit input, .woocommerce-page #review_form #respond .form-submit input, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce-page ul.products li.product a.add_to_cart_button {
/**Тут нужно прописать новые стили для кнопки, за размер кнопки отвечает свойство width**/
}
Просто размер вы сами подберите, какой будет отвечать вашим запросам.
Мне понравилось когда я выставила 146px;
и убрала width: 16%;
Смотрите:
upload_2017-4-18_17-24-18.png
И вот, если выставить для кнопки 150px;
и оставить width: 16%;
upload_2017-4-18_17-26-44.png
Но опять же, нужно играться и смотреть как оно будет если, например, зайти с другого браузера.

Обратите внимание на первый вложенный скрин, этот стиль ломает всю вёрстку вашего вывода товаров. Если оставлять width: 16% придётся прописывать медиазапросы для разных разрешений экранов, тестировать, менять, менять, менять и ещё раз менять.
Надеюсь, смогла помочь.
Удачи!
 
Последнее редактирование:

tgv

Новичок
Сверху Снизу