Как добавить пользовательский код в WooCommerce

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

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

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

Зачем добавлять и настраивать код в WooCommerce?

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

Будь то изменение текста «Перейти к оформлению заказа», удаление кнопок « Добавить в корзину » или изменение внешнего вида вашего сайта, вам нужно будет использовать пользовательские функции и использовать крючки WooCommerce. Разработчики и все, кто знаком с кодированием, знают, насколько важно уметь правильно добавлять фрагменты кода. Это позволяет вам не только редактировать свой магазин, но и добавлять в него функциональные возможности. Хорошей новостью является то, что природа WooCommerce и WordPress с открытым исходным кодом делает этот процесс гораздо более доступным.

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

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

Как добавить пользовательский код в WooCommerce

Есть разные способы добавить фрагменты кода в WooCommerce :

1. Со встроенным редактором тем WordPress
2. Использование специального плагина
3. Использование FTP для доступа к файлам темы
4. Путем настройки файлов шаблона WooCommerce
5. Создав новый пользовательский плагин

Давайте рассмотрим каждый метод шаг за шагом.

ПРИМЕЧАНИЕ . Все эти методы требуют редактирования основных файлов, что сопряжено с некоторыми рисками. Вот почему, прежде чем начать, рекомендуется сделать резервную копию вашего сайта.

1) Добавить пользовательский с помощью встроенного редактора WordPress

Метод по умолчанию для добавления пользовательского кода в WooCommerce — использование встроенного редактора тем. Вы можете получить доступ к functions.php и добавить PHP-код прямо в него. Однако, если в коде есть ошибки или вы удалите часть кода, ваш сайт может серьезно пострадать. Вот почему мы рекомендуем использовать дочернюю тему и добавить дополнительный уровень безопасности.

Чтобы открыть файл functions.php в редакторе тем, выберите « Внешний вид» > «Редактор тем» на панели инструментов . Затем нажмите на functions.php на боковой панели Theme Files справа.

Добавление пользовательского кода в файл functions.php

Теперь вы можете добавить собственный код в WooCommerce из редактора тем. Для этой демонстрации мы изменим текст по умолчанию «Нет товаров в корзине» на «Ваша корзина в настоящее время пуста, мы рекомендуем проверить наши рекомендуемые продукты!»:

 remove_action('woocommerce_cart_is_empty', 'wc_empty_cart_message', 10);
add_action('woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10);

функция quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Ваша корзина пуста, мы рекомендуем проверить наши рекомендуемые продукты!', 'woocommerce' ) ) );
эхо $html. '</p></div>';
}

Просто вставьте этот скрипт в редактор тем и обновите файл, чтобы применить изменения.

Посмотрите на переднюю часть, и вы должны увидеть что-то вроде этого:

Добавление кода — это одно, но также важно понимать, как код работает.

Приведенный выше код добавляет настраиваемый хук WooCommerce, который применяет определенное действие, чтобы заменить сообщение о пустой корзине по умолчанию пользовательским сообщением, которое мы добавили в код. Чтобы изменить текст, просто замените текст сообщения в этой строке:

 $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Ваша корзина пуста, мы рекомендуем проверить наши рекомендуемые продукты!', 'woocommerce' ) ) );

Если вы хотите узнать больше о настройке сообщения « Нет товаров в корзине » и извлечь из этого максимальную пользу, ознакомьтесь с этим полным руководством.

Как упоминалось ранее, добавление кода таким способом быстро и легко, но сопряжено с большим количеством рисков. Например, использование неправильного кода может привести к поломке или сбою вашего веб-сайта. Кроме того, могут возникнуть проблемы совместимости с вашим пользовательским кодом, которые могут повлиять на некоторые функции, плагины или темы. Более того, если вы добавите свой код в файл function.php родительской темы, а затем измените или обновите свою тему, вы можете потерять добавленный пользовательский код.

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

2) Добавить код с помощью плагинов

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

Для нашей демонстрации мы будем использовать плагин Code Snippets. Это один из самых популярных плагинов для добавления пользовательского кода на любой сайт.

Сначала установите плагин, открыв панель администратора WP и выбрав « Плагины» > «Добавить новый» . Воспользуйтесь строкой поиска в правом верхнем углу и найдите фрагменты кода . Затем нажмите « Установить » и, наконец, активируйте плагин.

После активации вы готовы добавить код и настроить свой магазин WooCommerce. Перейдите в раздел Фрагменты > Добавить новый , чтобы добавить новый код.

Назовите свой фрагмент кода и добавьте свой код в раздел « Код ». Для демонстрации мы будем использовать приведенный ниже код, чтобы скрыть кнопку «Добавить в корзину».

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); 

После этого вы можете решить, хотите ли вы запускать код на всем веб-сайте или выбирать между его запуском на серверной части или только на интерфейсе. Кроме того, вы можете запустить этот код только один раз.

Точно так же вы также можете установить приоритет для своего кода и добавить описание фрагмента, а также теги.

После настройки всех деталей нажмите « Сохранить изменения » или « Сохранить изменения и активировать », чтобы добавить новый код.

Если вы хотите деактивировать или активировать свой код по отдельности, перейдите в раздел « Фрагменты» > «Все фрагменты» , и вы сможете отдельно отключить или включить любой из ваших фрагментов.

3) Добавить пользовательский код с помощью FTP-клиента

Если все эти параметры недоступны для вас и вам необходимо вручную добавить собственный код в магазин WooCommerce, возможно, вам придется сделать это с помощью FTP-клиента . Существует несколько инструментов, но для этого урока мы будем использовать FileZilla.

ПРИМЕЧАНИЕ . Мы НЕ рекомендуем этот метод, если вы не привыкли использовать FTP-клиент или настраивать сервер и его файлы. Более того, для этого может потребоваться доступ к вашей cPanel и FTP . Перепутывание этих файлов может иметь серьезные последствия для вашего веб-сайта, поэтому мы настоятельно рекомендуем вам придерживаться вышеуказанных методов, если вы хотите снизить риск, связанный с добавлением пользовательского кода на ваш сайт.

Сначала откройте FileZilla или предпочитаемый вами FTP-клиент и подключите его к своему веб-сайту. Затем найдите файлы темы в каталоге вашего сайта. Обычно они находятся в каталоге /wp-content/themes на вашем сервере. Нажмите на папку вашей текущей темы или дочерней темы, которую вы можете настроить.

Откройте папку с вашей темой, щелкните правой кнопкой мыши файл functions.php внутри нее, а затем нажмите View/Edit.

Здесь, используя редактор файлов, вы можете вставить код в конец файла и сохранить его. Для этого мы будем использовать тот же код, что и выше, чтобы скрыть кнопку «Добавить в корзину»:

 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30); 

Еще одна интересная альтернатива добавлению кода — настройка файлов шаблонов WooCommerce.

4) Добавьте код, настроив файлы шаблонов WooCommerce.

Редактирование шаблонов — один из самых быстрых способов настройки всех элементов вашего магазина WooCommerce и всех его страниц. Это включает в себя вашу страницу оформления заказа, страницу продукта, страницу магазина и многие другие.

Хорошей новостью является то, что вы можете редактировать файлы шаблонов WooCommerce, как указано выше, используя встроенный редактор плагинов WordPress. Чтобы получить к нему доступ, на панели администратора выберите « Плагины» > «Редактор плагинов» .

Затем используйте раскрывающийся список « Выбрать плагины » в правом верхнем углу, выберите WooCommerce и нажмите « Выбрать».

Это обновит список файлов плагинов ниже, которые вы можете использовать для настройки файлов и шаблонов WooCommerce. Для нашей демонстрации мы отредактируем страницу «Спасибо» на странице оформления заказа . Итак, в списке файлов плагинов выберите « Оформить заказ» > «thankyou.php» .

Затем прокрутите вниз и измените текст полученного заказа , заменив текст в этой строке:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Спасибо. Ваш заказ получен.', 'woocommerce' ), нулевой ); // phpcs:игнорировать WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

Например, чтобы изменить сообщение о полученном заказе на что-то вроде «Спасибо за покупку у нас. Скоро вы получите письмо с инструкциями.», вставьте этот код:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Спасибо за покупку у нас. Вскоре вы получите письмо относительно инструкции..', 'woocommerce' ), null ); // phpcs:игнорировать WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> 

Здесь мы только что обновили текст хука, сделав его более подходящим для наших нужд. Если вас устраивают изменения, нажмите « Обновить файл» .

Если вы хотите узнать больше о настройке файлов шаблонов, ознакомьтесь с нашим руководством по настройке файлов шаблонов WooCommerce.

5) Добавьте код, создав новый пользовательский плагин

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

Кроме того, это может быть отличным решением, если вам также нужно управлять несколькими сайтами. Вы можете просто прикрепить функцию к сайтам с помощью плагина вместо того, чтобы вручную добавлять на них код.

Кроме того, сам WordPress позволяет довольно легко создавать и использовать новые плагины. Все, что вам нужно сделать, это просто создать новую папку плагинов в каталоге вашего веб-сайта и добавить несколько кодов в ее PHP-файл. Во-первых, вам нужно сначала подключиться к вашему сайту с помощью FTP . Мы будем использовать Filezilla для нашего руководства, но процесс должен быть аналогичен для любого другого FTP-клиента.

Однако, прежде чем начать, мы настоятельно рекомендуем сделать резервную копию вашего веб-сайта.

Создание новой папки плагина для добавления пользовательского кода в WooCommerce

После того, как вы подключили свой сайт к FTP, откройте директорию вашего сайта. Затем перейдите в папку /wp-content/plugins .

Теперь создайте новый каталог в папке плагинов, назовите его в соответствии с вашим кодом и разверните его. Для нашей демонстрации мы назовем его Remove-Add-To-Cart .

Затем щелкните правой кнопкой мыши папку, чтобы выбрать « Создать новый файл ». Здесь вам нужно создать файл .php с тем же именем, что и ваша папка. Итак, мы назовем наш файл Remove-Add-to-Cart.php.

После создания файла откройте его, щелкнув правой кнопкой мыши и выбрав View/Edit .

Далее мы добавим несколько строк кода, чтобы добавить к нему имя плагина, описание и имя автора:

 <?php
/**
* Название плагина: Удалить Добавить в корзину
* Описание: Добавление плагина удаления добавления в корзину
* Автор: Сиджал Шреста
* Версия: 1.0
*/

/* Поместите свои фрагменты ниже здесь. */
/* Поместите свои фрагменты выше здесь. */
?> 

Добавление пользовательского кода в новый плагин

Теперь вы можете начать добавлять свой собственный код в плагин. Вам нужно добавить собственный код между разделом /*Поместите сюда свои фрагменты */. Напоминаем, что эти строки являются просто комментариями, поэтому они не повлияют на ваш код, и вы можете удалить их, если хотите.

 <?php
/**
* Название плагина: Удалить Добавить в корзину
* Описание: Добавление плагина удаления добавления в корзину
* Автор: Сиджал Шреста
* Версия: 1.0
*/

/* Поместите свои фрагменты ниже здесь. */

remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
/* Поместите свои фрагменты выше здесь. */
?> 

Затем сохраните файл, и вы должны увидеть, что плагин указан на панели администратора WP на странице « Плагины ».

Активируйте плагин, и ваш пользовательский код должен работать идеально. Вы также можете заархивировать папку плагина, если хотите, и использовать ее для установки на разных сайтах. Просто загрузите папку с FTP-клиента и сожмите ее.

Затем вы можете использовать этот zip-файл для установки плагина на любой веб-сайт. Если вам нужна дополнительная помощь, у нас также есть подробная инструкция по установке плагина WordPress вручную.

Какой метод следует использовать для добавления пользовательского кода?

Мы видели разные методы, но какой из них лучше всего подходит для добавления фрагментов? Хотя использование FTP-клиента и доступ к вашим файлам вручную могут быть довольно быстрыми и простыми, при добавлении пользовательских кодов таким образом могут возникнуть значительные риски. Вот почему, чтобы свести к минимуму риски, мы рекомендуем вместо этого использовать специальный плагин пользовательского кода , особенно если у вас нет продвинутых навыков кодирования.

Этот метод намного менее рискован и может иметь дополнительные преимущества, такие как:

• Возможность отслеживать различные коды и включать/отключать их в любое время
• Добавление конфликтующего кода и включение/отключение их альтернативно, если это необходимо
• Проверка на совместимость с темой/установками
• Легче отлаживать и устранять проблемы

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

Рекомендации по добавлению пользовательского кода в WooCommerce

1) Использование дочерних тем

Использование дочерней темы — это одна из первых вещей, которую мы рекомендуем, если вы собираетесь добавить собственный код в файл functions.php . Независимо от кода, который вы редактируете или добавляете, с дочерней темой вы гарантируете, что сможете отменить любые изменения в любое время, не изменяя файлы основной темы.

Кроме того, при изменении кода и изменении таблиц стилей важно учитывать, что если вы обновите свою тему WordPress , вы можете потерять все изменения. Это связано с тем, что ваш файл funcitons.php будет перезаписан обновлением темы и удалит весь ваш пользовательский код. Вот почему добавление кода в родительскую тему не рекомендуется.

С дочерней темой вы гарантируете, что не потеряете свои настройки даже после обновления родительской темы. Кроме того, если ваша тема сломается, вы всегда можете отменить свои изменения и начать все сначала.

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

Создание дочерней темы с помощью плагина

Создание дочерней темы с помощью плагина — простой и удобный процесс для начинающих. Есть много плагинов, которые вы можете использовать. Для этой демонстрации мы будем использовать мастер дочерних тем .

Сначала откройте панель администратора WP и перейдите в «Плагины» > «Добавить новый» . Затем используйте меню поиска в правом верхнем углу, чтобы найти мастер дочерних тем. Нажмите « Установить» , а затем нажмите « Активировать» , как только кнопка переключится.

Затем вы можете получить доступ к функциям плагина, нажав « Инструменты»> «Мастер дочерней темы».

Чтобы создать новую дочернюю тему, используйте поле родительской темы , чтобы выбрать тему, для которой вы хотите создать дочернюю тему. Для нашей демонстрации мы будем использовать тему Storefront .

Затем добавьте детали, такие как заголовок, описание, URL-адрес и т. д. Когда вы закончите, нажмите «Создать дочернюю тему» , и все готово.

Теперь переключитесь на свою дочернюю тему, перейдя в « Внешний вид»> «Темы » на боковой панели и нажав « Активировать » на только что созданной дочерней теме.

Вот и все! Теперь вы можете свободно добавлять свой код в файл function.php только что созданной дочерней темы.

2) Использование плагинов резервного копирования WordPress и настройка резервного копирования

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

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

Для получения дополнительной информации ознакомьтесь с нашим специальным руководством по созданию резервных копий в WordPress.

3) Изучение того, как работает код и как используются хуки и функции WooCommerce.

Большая часть пользовательского кода для WooComerce использует хуки для выполнения определенных действий или изменения определенных элементов. Вот почему было бы неплохо узнать, как работают эти фильтры и как они применяются к вашему веб-сайту, прежде чем создавать собственный код. Это не только предотвращает использование неполного или неисправного кода, но и гарантирует, что вы сможете настроить его так, чтобы он лучше работал в соответствии с вашими потребностями.

Например, давайте посмотрим на этот фрагмент, который отключает покупку, если вы не вошли в систему:

 add_action('woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
функция quadlayers_block_admin_purchase($block) {
если (is_user_logged_in()): вернуть истину;
иначе: вернуть ложь;
конец;
}

функция quadlayers_add_message(){
if ( !is_user_logged_in() ):echo '<H2>ПОЖАЛУЙСТА, ВОЙДИТЕ, ЧТОБЫ ПРИОБРЕСТИ ЭТОТ ПРОДУКТ</h2>';
конец;
}

Вот как здесь работают хуки WooCommerce:

• Хук действия используется для печати сообщения с помощью функции QuadLayers_add_message , тогда как хук фильтра использует функцию quadlayers_block_admin_purchase для отключения кнопки «Добавить в корзину».
• Оператор IF используется в обеих этих функциях, чтобы проверить, вошел ли пользователь в систему или нет.
• Хук woocommerce_is_purchasable применяется, если условный оператор IF возвращает true
• Мы также применили дополнительный CSS, чтобы изменить стиль текста сообщения, а также добавить собственные цвета.

Давайте добавим это в файл function.php нашей дочерней темы:

Это дает нам этот результат на переднем конце:

Если вы хотите узнать, как работает пользовательский код WooCommerce, ознакомьтесь с нашим руководством по использованию хуков WC.

Вывод

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

В этом руководстве мы рассмотрели различные способы добавления фрагментов кода:

• Используя встроенный редактор тем для редактирования файла functions.php
• С помощью специального плагина WordPress для добавления пользовательских фрагментов кода.
• Использование FTP для доступа к файлу function.php вручную
• Использование редактора плагинов для ручного редактирования шаблонов WooCommerce
• Использование FTP для создания нового плагина с пользовательским кодом.

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

Вы добавили фрагменты кода в свой магазин WooCommerce? Какой метод вы использовали? Знаете ли вы какие-либо другие способы, которые мы должны добавить? Дайте нам знать в комментариях ниже!

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

• Как программно редактировать страницу продукта WooCommerce
• Редактировать страницу моей учетной записи WooCommerce программно
• Как программно редактировать страницу магазина WooCommerce