Удаляем классы «first» и «last» в WooCommerce
Опубликовано: 06.09.2018
Сейчас уже можно с уверенностью сказать, лучший плагин электронной коммерции для WordPress это WooCommerce. Он имеет практически весь набор функций современного интернет-магазина, позволяя продавать абсолютно любые продукты. Не требуя при этом каких-то усилий в настройке.
WooCommerce достаточно легко интегрируется в любую тему WordPress. Вся интеграция чаще всего сводится к простой кастомизации CSS . В очень редких случаях вносятся какие-то правки в механизм работы плагина. Разумеется, речь идёт не о внесении изменений в код плагина. Все изменения осуществляются с помощью фильтров, которые создаются в файле functions.php активной, а еще лучше дочерней темы. Правильнее же всего будет создать и вынести все фильтры в новый плагин. В этом случае изменения сохранятся даже при смене темы.
Создание правильных заголовокв на videohive
Одной из проблем, которая не всегда решается с помощью CSS, является стилизация страницы списка товаров. WooCommerce по-умолчанию отображает товары в 4-колоночной сетке. Проблема возникает, когда нужно отобразить товары в 3-колоночной сетке, например. WooCommerce использует собственную HTML-разметку и стили сетки, присваивая первому и последнему элементу каждого ряда соответствующие классы: first и last . И если нужно перейти на ту же 3-колоночную сетку, задачу так просто решить не удастся даже с помощью псевдоклассов CSS. Мы столкнёмся со взаимоисключающими параграфами.
[CMS Made Simple] Удаление всех гиперссылок со страницы
Самым простым и оптимальным решением будет удаление классов «first» и «last» с помощью небольшого фильтра. Который, как уже говорилось выше, можно разместить в functions.php или вынести в функциональный плагин сайта.
add_filter( 'post_class', 'prefix_post_class', 21 ); function prefix_post_class( $classes ) { if ( 'product' == get_post_type() ) { $classes = array_diff( $classes, array( 'first', 'last' ) ); } return $classes; }Фильтр очень прост, срабатывает только для типа записей «Products», т. е. товаров WooCommerce.
После удаления классов, элементы можно стилизовать в нужный вид средствами CSS. Никаких преград для этого больше нет. Например, для вывода товаров в 3 колонки, можно для всех элементов задать float:left и, задействуя псевдокласс :nth-child(4n+1) , присваивать каждому четвёртому элементу clear:both . Который, как известно, запрещает обтекания, перенося элемент на новую строку.
Всё самое новое и интересное я публикую в своём Телеграм-канале . Подписывайтесь!