Как изменять WooCommerce. Эпизод #1. Введение: файлы, хуки, фильтры

  Как изменять WooCommerce 7 комментариев

Теоретические выкладки, о структуре файлов WooCommerce и о том, как правильно изменять WooCommerce через хуки. Вводное видео, о том как работают хуки в WooCommerce, какими инструментами пользоваться и правильно изменять файлы.

Инструменты

Для правки кода требуется использовать редакторы кода. Так как в них есть подсветка кода и очень удобно вносить правки или писать код с нуля.

В видео весь код правится через PhpStorm это не просто редактор, а целая система. Очень крутая, но платная. Хотя можно скачать или триальную версию, или пользоваться бетой совершенно бесплатно.

к содержанию

Бесплатные редакторы

Пользоваться можно любым, главное, чтобы удобно было. Рекомендую VS Code — при правильной настройке будет не хуже PhpStorm

к содержанию

Как правильно добавлять код

Существует два способа:

  • через дочернюю тему
  • через специальный плагин

Все это делается для того, что бы при обновлении темы все ваши изменения сохранились.

Дочерняя тема

Дочернюю тему можно сделать самостоятельно или использовать плагин. Как сделать самостоятельно смотрите в видео

Еще удобно дочернюю тему сделать через плагин. Например, плагин Child Theme Configurator позволит прямо из админки создать дочернюю тему. После использования плагин можно удалить.

к содержанию

Специальный плагин

Другой способ вносить изменения использовать специальные плагины. Например, плагин Code Snippets позволяет делать подобные вставки. Или можно использовать пустой плагин. Об использовании пустого плагина, можно узнать в этой статье.

Всегда внимательно копируйте код сниппетов и делайте бекапы, не ленитесь.

к содержанию

Где смотреть документацию по WooCommerce

Нигде) Расписанной документации как таковой нет. Можно посмотреть то, что есть на официальном сайте

Без поллитры в ней не разобраться)

Предпочитаю смотреть код WooCommerce на GitHub, а если установить расширение Octotree для браузера Хром, то становится очень удобно просматривать файлы.

К тому же, на GitHub есть еще Wiki по WooCommerce, в которой подробно расписаны некоторые моменты. Это бывает полезно.

к содержанию

Как работают хуки в WordPress 

Хуки или события и фильтры — это основная событийная модель работы WordPress. Не забываем, что WooCommerce — это плагин для WordPress. Для внесения изменений в WooCommerce чаще всего используются фильтыы и события.

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

Небольшое видео, для понимя работы хуков

По теме хуков еще рекомендую почитать статьи:

к содержанию

Как изменять (переопределять) файлы WooCommerce

Для безопасного изменения или переопределения файлов, отвечающих за вывод контента WooCommerce, достаточно скопировать файлы из папки /templates/ самого плагина в папку /woocommerce/ вашей темы или дочерней темы. Если в вашей дочерней теме нет папки /woocommerce/, то создайте ее. Теперь для внесения изменений достаточно скопировать нужный файл.

Полный путь к папке шаблонов из корня сайта /wp-content/plugins/woocommerce/templates/

Пример: чтобы переопределить уведомление о заказе администратора, скопируйте: wp-content/plugins /woocommerce/templates/emails/admin-new-order.php в wp-content/themes/yourtheme /woocommerce/emails/admin-new-order.php

Скопированный файл будет переопределять файл шаблона WooCommerce по умолчанию.

Предупреждение: не редактируйте эти файлы в самом ядре плагине, так как они перезаписываются в процессе обновления, и любые настройки будут потеряны.

Источник: Template structure & Overriding templates via a theme

к содержанию

Примеры использования хуков

Включение поддержки WooCommerce в теме

Поддержка в теме включается только на хуке after_setup_theme. Это важно!

Базовое включение поддержки WooCommerce

/**
 * @snippet       Включение поддержки WooCommerce в теме
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_action( 'after_setup_theme', 'mywoo_add_woocommerce_support' );
function mywoo_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

Включение поддержки WooCommerce с передачей

/**
 * @snippet       Включение поддержки WooCommerce в теме с настройками
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_action( 'after_setup_theme', 'mywoo_add_woocommerce_support' );
function mywoo_add_woocommerce_support() {
    add_theme_support( 'woocommerce', array(
        'thumbnail_image_width' => 150,
        'single_image_width'    => 300,

        'product_grid'          => array(
            'default_rows'    => 3,
            'min_rows'        => 2,
            'max_rows'        => 8,
            'default_columns' => 4,
            'min_columns'     => 2,
            'max_columns'     => 5,
        ),
    ) );
}

Это установка значений по умолчанию

  • thumbnail_image_width и single_image_width — размер изображений
  • product_grid — параметры сетки вывода товаров на страницах архивов

Подключение zoom, swipe, lightbox

/**
 * @snippet       Включение поддержки zoom, swipe, lightbox WooCommerce в теме
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

к содержанию

Отключение стилей WooCommerce

/**
 * @snippet       Полное отключение стилей WooCommerce
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
/**
 * @snippet       Частичное отключение стилей
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_filter( 'woocommerce_enqueue_styles', 'woocust_dequeue_styles' );
function woocust_dequeue_styles( $enqueue_styles ) {

	unset( $enqueue_styles['woocommerce-general'] );    // Отключение основных стилей
	unset( $enqueue_styles['woocommerce-layout'] );        // Отключение сетки
	unset( $enqueue_styles['woocommerce-smallscreen'] );    // Отключение адаптивности

	return $enqueue_styles;
}
к содержанию

Загрузка файлов CSS и JavaScript WooCommerce только на страницах магазина 

/**
 * @snippet       Подключение стилей и скриптов только на страницах магазина
 * @how-to-woo    https://wpruse.ru/courses/how-to-change-woocommerce/
 * @sourcecode    https://wpruse.ru/?p=3439
 * @testedwith    WooCommerce 3.6
 */
add_action( 'wp_enqueue_scripts', 'woocust_manage_woocommerce_styles', 99 );
function woocust_manage_woocommerce_styles() {

	if ( function_exists( 'is_woocommerce' ) ) {
		if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
			wp_dequeue_style( 'woocommerce-layout' );
			wp_dequeue_style( 'woocommerce-smallscreen' );
			wp_dequeue_style( 'woocommerce-general' );
			wp_dequeue_style( 'evolution-woostyles' );
			wp_dequeue_script( 'wc_price_slider' );
			wp_dequeue_script( 'wc-single-product' );
			wp_dequeue_script( 'wc-add-to-cart' );
			wp_dequeue_script( 'wc-cart-fragments' );
			wp_dequeue_script( 'wc-checkout' );
			wp_dequeue_script( 'wc-add-to-cart-variation' );
			wp_dequeue_script( 'wc-single-product' );
			wp_dequeue_script( 'wc-cart' );
			wp_dequeue_script( 'wc-chosen' );
			wp_dequeue_script( 'woocommerce' );
			wp_dequeue_script( 'prettyPhoto' );
			wp_dequeue_script( 'prettyPhoto-init' );
			wp_dequeue_script( 'jquery-blockui' );
			wp_dequeue_script( 'jquery-placeholder' );
			wp_dequeue_script( 'fancybox' );
			wp_dequeue_script( 'jqueryui' );
		}
	}
}
к содержанию

Заключение

Это вводная часть. В ней разобрали какими инструментами пользоваться, как вносить код и некоторые другие вещи.

Как изменять WooCommerce через хуки смотрите в видео выше по таймкоду 8:32. С этого времени как раз начинаются примеры кода.

Удачи в изменении WooCommerce! Вопросы, предложения пишите в комментариях, и не забудьте расшарить эту статью в соцсетях! Вам это ничего не стоит, а меня будет мотивировать)

5 3 голоса
Рейтинг статьи

Подписаться
Уведомить о
guest
7 комментарев
Новые
Старые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
7
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x