Как удалить и изменить атрибуты HTML в WooCommerce без плагинов

Проблема: ненужные или лишние атрибуты HTML в шаблонах WooCommerce

WooCommerce по умолчанию добавляет в HTML своих шаблонов множество атрибутов, которые не всегда нужны или мешают кастомизации, например, data-product-id, aria-* или классы, которые усложняют стилизацию. Часто возникает задача убрать или изменить эти атрибуты без использования дополнительных плагинов, чтобы не нагружать сайт и сохранить контроль над кодом.

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

Для анализа HTML WooCommerce используйте инструменты разработчика браузера (Chrome DevTools, Firefox Inspector). На странице товара, каталога или корзины:

• Выделите интересующий элемент — например, кнопку «Добавить в корзину».
• Изучите атрибуты, которые добавлены автоматически — обратите внимание на data-*, aria-*, классы.
• Проверьте, не ломается ли функционал после удаления атрибутов (например, AJAX или доступность).

Пример: кнопка добавления в корзину содержит атрибут data-product_id, который можно убрать, если не используется кастомным JavaScript.

Пошаговое решение: удаление и изменение атрибутов через хуки и переопределение шаблонов

1. Удаление атрибутов через фильтры WooCommerce

WooCommerce позволяет фильтровать HTML элементов с помощью хуков. Например, чтобы убрать data-product_id из кнопки добавления в корзину, можно использовать фильтр woocommerce_loop_add_to_cart_link:

add_filter('woocommerce_loop_add_to_cart_link', 'custom_remove_data_product_id', 10, 2);
function custom_remove_data_product_id($html, $product) {
    // Убираем data-product_id из кнопки
    $html = preg_replace('/\sdata-product_id="\d+"/', '', $html);
    return $html;
}

2. Изменение атрибутов в шаблонах

Для более глубоких изменений полезно переопределить шаблон WooCommerce в вашей теме. Например, для кнопки добавления в корзину:

• Скопируйте файл woocommerce/templates/loop/add-to-cart.php в your-theme/woocommerce/loop/add-to-cart.php.
• Отредактируйте HTML — удалите или измените нужные атрибуты.

Пример удаления aria-label в шаблоне:

<?php
// Исходный код кнопки
?>
<button class="button" data-product_id="<?php echo esc_attr( $product->get_id() ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Add "%s" to your cart', 'woocommerce' ), $product->get_name() ) ); ?>">
    <?php echo esc_html( $product->add_to_cart_text() ); ?>
</button>

<!-- Изменённый код -->
<button class="button">
    <?php echo esc_html( $product->add_to_cart_text() ); ?>
</button>

3. Изменение атрибутов формы товара

Форма добавления в корзину также генерируется с атрибутами. Для их изменения используйте фильтр woocommerce_product_add_to_cart_url и woocommerce_product_add_to_cart_text для изменения URL и текста, а для атрибутов формы — переопределение шаблонов.

Проверка результата после внедрения

Чтобы убедиться в успешном удалении или изменении атрибутов:

• Обновите страницу с продуктом или каталогом.
• Откройте инструменты разработчика и проверьте HTML элементов, которые вы меняли.
• Убедитесь, что нужных атрибутов нет или они изменены.
• Проверьте функционал — добавление в корзину, фильтры, AJAX, доступность.

Частые ошибки и как их исправить

• Удаление критичных атрибутов — например, data-product_id может использоваться скриптами. Если после удаления кнопка перестала работать, восстановите атрибут.
• Ошибки в регулярных выражениях — неправильное удаление через preg_replace может повредить HTML. Проверяйте регулярки на тестовых данных.
• Не переопределены шаблоны — изменения в плагине WooCommerce могут перезаписать ваши файлы. Используйте дочернюю тему и следите за обновлениями.

Практические советы по безопасности и производительности

• Избегайте отключения атрибутов aria-*, если не уверены — они важны для доступности (WCAG).
• Не удаляйте data-* атрибуты, если на них завязаны скрипты, это может сломать функционал.
• Для производительности лучше переопределять шаблоны, чем использовать регулярные выражения на каждом рендере.
• Тестируйте изменения на staging-сайте перед внедрением на продакшен.

Сравнение способов удаления атрибутов в WooCommerce