Удаляем классы «first» и «last» в WooCommerce

20 октября 2016 190

Сейчас уже можно с уверенностью сказать, лучший плагин электронной коммерции для WordPress это WooCommerce. Он имеет практически весь набор функций современного интернет-магазина, позволяя продавать абсолютно любые продукты. Не требуя при этом каких-то усилий в настройке.

Kwork: Все онлайн-услуги по 500 руб.
Kwork: Все онлайн-услуги по 500 руб.

WooCommerce достаточно легко интегрируется в любую тему WordPress. Вся интеграция чаще всего сводится к простой кастомизации CSS. В очень редких случаях вносятся какие-то правки в механизм работы плагина. Разумеется, речь идёт не о внесении изменений в код плагина. Все изменения осуществляются с помощью фильтров, которые создаются в файле functions.php активной, а еще лучше дочерней темы. Правильнее же всего будет создать и вынести все фильтры в новый плагин. В этом случае изменения сохранятся даже при смене темы.

Одной из проблем, которая не всегда решается с помощью CSS, является стилизация страницы списка товаров. WooCommerce по-умолчанию отображает товары в 4-колоночной сетке. Проблема возникает, когда нужно отобразить товары в 3-колоночной сетке, например. WooCommerce использует собственную HTML-разметку и стили сетки, присваивая первому и последнему элементу каждого ряда соответствующие классы: first и last. И если нужно перейти на ту же 3-колоночную сетку, задачу так просто решить не удастся даже с помощью псевдоклассов CSS. Мы столкнёмся со взаимоисключающими параграфами.

Удаляем классы «first» и «last» в WooCommerce

Самым простым и оптимальным решением будет удаление классов «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. Который, как известно, запрещает обтекания, перенося элемент на новую строку.

Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе WordPress.

Комментарии

Разгоните свой WordPress

Хостинг-провайдер номер один в России — REG.RU

Подробнее