Выбрать хостинг
Написать статью
Делаем своё поле в карточке товара Woocommerce
Шаг первый. Подключаемся по ftp к сайту, заходим в файл темы
functions.php
и добавляем вот такой код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | add_action('woocommerce_product_options_general_product_data', function () { woocommerce_wp_text_input([ 'id' => '_custom_product_link', 'label' => 'Ссылка на товар Ozon', 'desc_tip' => 'true', 'description' => 'Введите ссылку на Ozon.', 'type' => 'url' ]);});// Сохраняем значениеadd_action('woocommerce_process_product_meta', function ($post_id) { if (isset($_POST['_custom_product_link'])) { update_post_meta($post_id, '_custom_product_link', esc_url($_POST['_custom_product_link'])); }}); |
Указанный код добавляет поле в админке карточки товара во вкладке «Основные»
Теперь надо вывести непосредственно в доступной для всех пользователей в карточке товара созданное поле и красиво оформить конечно же)
всё в тот же файл: functions.php добавляем вот такой код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // Создаем шорткод для вывода ссылкиfunction dim_custom_product_link() { global $product; if (!$product) return ''; $custom_link = get_post_meta($product->get_id(), '_custom_product_link', true); if ($custom_link) { return '<div class="dim-right1"> <a class="dim-ozon" href="' . esc_url($custom_link) . '" rel="nofollow" target="_blank"> <img decoding="async" class="dim-img-ozon" src="/wp-content/uploads/2025/03/ozon_icon.webp" alt="Купить на Ozon" width="30"> Купить на Ozon → </a> </div>'; } return '';}add_shortcode('dim_ozon_link', 'dim_custom_product_link'); |
и ещё стили надо добавить, которые и создадут красоту:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .dim-right1 { display: flex;}.dim-ozon { border-radius: 3px; margin-left: auto; color: #2359f4; font-weight: 600; display: inline-block; background: #e8effd; width: max-content; padding: 4px;} |
Стили можно добавить в файл темы style.css или же в дополнительные стили (customizer → доп. CSS)
Почему я сделал вывод через шорткод? Дело в том, что я использовал для создания магазина популярную и очень функциональную Премиум тему Woodmart, а она позволяет гибко изменять карточку товара без какого-либо дополнительного программирования. Всё делается в рамках визуального редактора WPBakery Page Builder — это удобно для пользователей, ну в смысле для админа сайта / магазина. Так проще самому править сайт, если потребуется не привлекая к работе программистов / web-мастеров и т.д. (речь об админе, которому передаётся готовый проект)