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

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

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

Как вставить видео в описание товара WooCommerce через визуальный редактор

Самый простой способ — вставить видео прямо в описание товара через редактор WordPress:

1. Перейдите в админке WooCommerce в Товары > Все товары.
2. Откройте нужный товар для редактирования.
3. В поле Описание нажмите кнопку Добавить медиафайл и загрузите видео или вставьте ссылку на видео из YouTube, Vimeo и др.
4. Если видео на стороннем сервисе, можно просто вставить URL видео в отдельной строке — WordPress автоматически преобразует его в встроенный видео плеер.

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

Добавление видео в описание товара через кастомное поле и шаблон

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

Шаг 1. Создайте кастомное поле для видео

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

Шаг 2. Добавьте код в файл functions.php вашей темы или дочерней темы

add_action('woocommerce_single_product_summary', 'wpvideo_add_video_to_product_description', 20);
function wpvideo_add_video_to_product_description() {
    global $product;
    $video_url = get_post_meta($product->get_id(), 'product_video_url', true);
    if (!empty($video_url)) {
        echo '<div class="wpvideo-product-video" style="margin-top:20px;">';
        echo wp_oembed_get($video_url);
        echo '</div>';
    }
}

Этот код добавит встроенный видеоплеер под описанием товара (приоритет 20 — после цены и краткого описания).

Как проверить работу

• Откройте страницу товара на сайте.
• Проверьте, что видео отображается и корректно воспроизводится.
• Если видео не показывается, проверьте URL и что плагин oEmbed не отключен.

Чек-лист для добавления видео в описание товара WooCommerce без плагинов

• Добавьте видео через визуальный редактор (вставьте URL или медиафайл).
• Для повторного использования — создайте кастомное поле product_video_url.
• Добавьте код для вывода видео в шаблон через хук woocommerce_single_product_summary.
• Проверьте, что видео корректно подгружается и адаптивно отображается.
• Тестируйте на разных устройствах и браузерах.

Частые ошибки при добавлении видео в описание товара WooCommerce

• Видео не отображается: возможно, URL видео некорректен, или сервис не поддерживает oEmbed. Проверьте ссылку вручную.
• Видео отображается плохо на мобильных: отсутствие адаптивности. Добавьте CSS:

  .wpvideo-product-video iframe { max-width: 100%; height: auto; }

• Видео не загружается из-за политики CORS: используйте официальные видеохостинги (YouTube, Vimeo).
• Видео ломает верстку: убедитесь в правильности HTML и CSS контейнера.

Оптимизация и безопасность при добавлении видео в WooCommerce

Для ускорения загрузки и безопасности:

• Используйте сторонние видеохостинги вместо хранения видео на сервере — это снизит нагрузку и трафик.
• Добавьте атрибуты loading="lazy" для iframe через фильтр, чтобы видео загружалось по мере прокрутки.
• Ограничьте ввод URL видео через кастомное поле, чтобы избежать XSS-атак — применяйте esc_url при выводе.

Пример добавления ленивой загрузки для видео в WooCommerce

add_filter('embed_oembed_html', 'wpvideo_lazy_load_embed', 10, 4);
function wpvideo_lazy_load_embed($html, $url, $attr, $post_ID) {
    if (strpos($html, '<iframe') !== false) {
        $html = str_replace('<iframe', '<iframe loading="lazy"', $html);
    }
    return $html;
}

Таблица сравнения способов добавления видео в описание товара WooCommerce