Как добавить пользовательское текстовое поле Woocommerce на страницу продукта

Опубликовано: 2020-09-21

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

WooCommerce — это мощное решение для электронной коммерции для WordPress, которое с годами завоевало популярность. По оценкам, WooCommerce поддерживает более 42% всех доступных интернет-магазинов.

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

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

Если вы выполните быстрый поиск в Интернете, многие люди предоставят вам сложные решения, которые трудно реализовать. В этом кратком руководстве я поделюсь фрагментом кода PHP, который добавит эту функциональность на вашу страницу продукта.

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

Более того, если вы ищете более простой способ добавления настраиваемых полей, то плагин Product Extras for WooCommerce станет для вас лучшим решением. Тем не менее, это премиальный плагин, и вам придется платить 59 долларов в год. Дополнительные возможности продукта для плагина WooCommerce

Зачем добавлять настраиваемые поля на страницу продукта?

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

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

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

Шаги по добавлению пользовательского текстового поля Woocommerce на страницу продукта

Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница редактора тем, найдите файл функций темы, в который мы добавим функцию, которая добавит настраиваемое поле WooCommerce на страницу продукта .
Добавьте следующий код в файл functions.php :

 /**

 * @snippet Добавить поле ввода для продуктов - WooCommerce

 */

// --------------------------------------------------------

// 1. Показать пользовательское поле ввода выше Добавить в корзину

add_action('woocommerce_before_add_to_cart_button', 'njengah_product_add_on', 9 );

функция njengah_product_add_on() {

    $value = isset($_POST['custom_text_add_on'] )? sanitize_text_field($_POST['_custom_text_add_on']): '';

    echo '<div><label>Настраиваемое текстовое дополнение <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $значение. '"></p></div>';

}

// --------------------------------------------------------

// 2. Выдать ошибку, если пользовательское поле ввода пусто

add_filter('woocommerce_add_to_cart_validation', 'njengah_product_add_on_validation', 10, 3);

функция njengah_product_add_on_validation ($ пройдено, $ product_id, $ количество) {

   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {

      wc_add_notice('Пользовательское текстовое дополнение является обязательным полем', 'ошибка');

      $пройдено = ложь;

   }

   вернуть $пройдено;

}

// --------------------------------------------------------

// 3. Сохранение пользовательского значения поля ввода в данные элемента корзины

add_filter('woocommerce_add_cart_item_data', 'njengah_product_add_on_cart_item_data', 10, 2);

функция njengah_product_add_on_cart_item_data($cart_item, $product_id){

    если( isset($_POST['custom_text_add_on'] )) {

        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );

    }

    вернуть $cart_item;

}

// --------------------------------------------------------

// 4. Отобразить значение пользовательского поля ввода @ Корзина

add_filter('woocommerce_get_item_data', 'njengah_product_add_on_display_cart', 10, 2);

функция njengah_product_add_on_display_cart($data, $cart_item) {

    если ( isset($cart_item['custom_text_add_on'] ) ){

        $данные[] = массив(

            'name' => 'Пользовательское текстовое дополнение',

            'value' => sanitize_text_field($cart_item['custom_text_add_on'] )

        );

    }

    вернуть $данные;

}

// --------------------------------------------------------

// 5. Сохраняем значение пользовательского поля ввода в метате элемента заказа

add_action('woocommerce_add_order_item_meta', ' njengah_product_add_on_order_item_meta', 10, 2);

функция njengah_product_add_on_order_item_meta($item_id, $values) {

    если ( ! пусто ($values['custom_text_add_on'] )) {

        wc_add_order_item_meta($item_id, 'Пользовательское текстовое дополнение', $values['custom_text_add_on'], true );

    }

}

// --------------------------------------------------------

// 6. Отобразить значение пользовательского поля ввода в таблице заказов

add_filter('woocommerce_order_item_product', ' njengah_product_add_on_display_order', 10, 2);

функция njengah_product_add_on_display_order($cart_item, $order_item){

    если( isset( $order_item['custom_text_add_on'] ) ){

        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];

    }

    вернуть $cart_item;

}

// --------------------------------------------------------

// 7. Отображать значение пользовательского поля ввода в письмах с заказами

add_filter('woocommerce_email_order_meta_fields', 'njengah_product_add_on_display_emails');

функция njengah_product_add_on_display_emails($fields) {

    $fields['custom_text_add_on'] = 'Пользовательское текстовое дополнение';

    вернуть $поля;

}

Чтобы увидеть результат , просто обновите страницу продукта, и вы должны увидеть это:

Если пользователь не ввел данные, будет отображаться ошибка, пока пользователь не добавит пользовательский текст, как показано ниже: ошибка, если пользователь не ввел данные

Пользовательское примечание также появится в деталях заказа , как показано здесь: настраиваемый текстовый аддон в корзине

Как работает код

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

Вывод

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