В работе с интернет-магазинами на базе WooCommerce часто возникает задача расширить функционал вариативных товаров за счёт добавления пользовательских полей. Например, нужно добавить поле с дополнительной информацией для каждой вариации — артикул производителя, уникальные характеристики, или даже специальные цены и метки. В этой статье рассмотрим, как оптимально добавить и вывести пользовательские поля для вариативных товаров без существенного снижения производительности сайта.
Что такое вариативные товары и зачем нужны пользовательские поля?
Вариативный товар — это товар с набором вариаций (разных модификаций), например цвет, размер, материал. Каждая вариация — отдельный продукт с собственным SKU, ценой и запасом.
Пользовательские поля позволяют добавить к вариациям дополнительную информацию, которой нет в стандартном наборе WooCommerce. Например, можно добавить поле «Производитель», «Срок изготовления», «Уникальный идентификатор» или другие данные, важные для бизнеса.
Без правильной оптимизации добавление таких полей может привести к замедлению загрузки страниц, так как WooCommerce загружает все вариации и их мета-данные. Поэтому важно реализовать решение, которое будет эффективно работать на больших каталогах.
Добавление пользовательских полей к вариациям через хук wpelement_add_variation_fields
Для добавления пользовательских полей к вариациям используем хук woocommerce_variation_options_pricing. Ниже пример функции, которая добавляет кастомное текстовое поле «Артикул производителя» в админку вариаций.
function wpelement_add_variation_fields( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array(
'id' => 'wpelement_manufacturer_sku['.$loop.']',
'label' => __('Артикул производителя', 'woocommerce'),
'desc_tip' => true,
'description' => __('Введите артикул производителя для этой вариации', 'woocommerce'),
'value' => get_post_meta( $variation->ID, 'wpelement_manufacturer_sku', true ),
) );
}
add_action( 'woocommerce_variation_options_pricing', 'wpelement_add_variation_fields', 10, 3 );Этот код добавит поле на страницу редактирования вариаций товара в админке WooCommerce.
Сохранение данных пользовательских полей вариаций
После добавления поля важно сохранить введённые данные. Для этого используем хук woocommerce_save_product_variation:
function wpelement_save_variation_fields( $variation_id, $i ) {
if ( isset( $_POST['wpelement_manufacturer_sku'][ $i ] ) ) {
update_post_meta( $variation_id, 'wpelement_manufacturer_sku', sanitize_text_field( $_POST['wpelement_manufacturer_sku'][ $i ] ) );
}
}
add_action( 'woocommerce_save_product_variation', 'wpelement_save_variation_fields', 10, 2 );Этот код сохранит данные из текстового поля для каждой вариации.
Вывод пользовательских полей на странице товара
Чтобы вывести значение пользовательского поля на странице товара, например под выбором вариации, используем JavaScript и AJAX для загрузки данных динамически, чтобы не перегружать страницу.
Пример кода в теме (файл functions.php или кастомный плагин):
function wpelement_enqueue_variation_script() {
if ( is_product() ) {
wp_enqueue_script( 'wpelement-variation-script', get_template_directory_uri() . '/js/wpelement-variation.js', array('jquery'), '1.0', true );
wp_localize_script( 'wpelement-variation-script', 'wpelement_ajax', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
}
add_action( 'wp_enqueue_scripts', 'wpelement_enqueue_variation_script' );
function wpelement_get_variation_meta() {
$variation_id = intval( $_POST['variation_id'] );
if ( $variation_id ) {
$manufacturer_sku = get_post_meta( $variation_id, 'wpelement_manufacturer_sku', true );
wp_send_json_success( array( 'manufacturer_sku' => $manufacturer_sku ) );
}
wp_send_json_error();
}
add_action( 'wp_ajax_wpelement_get_variation_meta', 'wpelement_get_variation_meta' );
add_action( 'wp_ajax_nopriv_wpelement_get_variation_meta', 'wpelement_get_variation_meta' );В JS-файле wpelement-variation.js добавляем обработчик изменения вариации:
jQuery(document).ready(function($){
$('.variations_form').on('woocommerce_variation_select_change', function(){
var variation_id = $('input[name="variation_id"]').val();
if(variation_id) {
$.post(wpelement_ajax.ajax_url, {
action: 'wpelement_get_variation_meta',
variation_id: variation_id
}, function(response){
if(response.success) {
$('#wpelement_manufacturer_sku_display').text(response.data.manufacturer_sku);
} else {
$('#wpelement_manufacturer_sku_display').text('');
}
});
}
});
});И выводим на страницу товара HTML-элемент для отображения:
<div id="wpelement_manufacturer_sku_display" style="margin-top:10px; font-weight:bold;"></div>Оптимизация производительности при большом количестве вариаций
Если у товара сотни вариаций, загрузка всех мета-данных сразу может замедлить страницу. Чтобы избежать этого, используйте AJAX-загрузку данных, как показано выше, и избегайте вызова get_post_meta для всех вариаций сразу.
Также рекомендуем чистить и оптимизировать базу данных, удалять неиспользуемые вариации и кэшировать результаты AJAX-запросов на стороне сервера, если данные не меняются часто.
Для дополнительной оптимизации можно использовать плагин Clearfy Pro, который позволяет управлять лишними мета-данными и оптимизировать загрузку WooCommerce.
Заключение
Добавление пользовательских полей к вариативным товарам — частая задача в WooCommerce. Важно не только добавить функционал, но и сделать это эффективно, чтобы не ухудшить производительность сайта. Используйте хуки WooCommerce для добавления и сохранения полей, AJAX для динамического вывода и оптимизируйте работу с мета-данными.
Если нужно расширить функционал вариаций и упростить управление, советуем обратить внимание на специализированные плагины из каталога WPShop, которые помогут автоматизировать многие рутинные задачи.