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

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

Добавление пользовательских полей в WooCommerce для продукта

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

Создание собственной пользовательской разметки для продукта только в порядке, когда вы создаете пользовательский макет в METABOX. Но, если вы только собираетесь использовать регулярные поля, а затем использовать функцию поля продукта в WooCommerce. Это будет намного проще для вас, чтобы создать много полей продукта с помощью WooCommerce API в WordPress.

Давайте узнаем о этих функциях.

Текстовое поле

Текст является основным полем ввода, которое может принимать различные типы, такие как  текст, номер, дата и т.д. Все, что поддерживает HTML5, вы можете добавить туда. Но, не используйте его, если вы собираетесь добавить поля выбора или  флажок. Есть две другие функции для этого. Имя функции для добавления ввода текста в поле продукта WooCommerce это woocommerce_wp_text_input.

<?php
$args = array(
  'label' => '', // Текст надписи
  'placeholder' => '',
  'class' => '',
  'style' => '',
  'wrapper_class' => '',
  'value' => '', // если пусто, полученные от Мета, где ID - это meta_key
  'id' => '', // требуется
  'name' => '', //имя набор из ID, если пустой
  'type' => '',
  'desc_tip' => '',
  'data_type' => '',
  'custom_attributes' => '', // массив атрибутов 
  'description' => ''
);
woocommerce_wp_text_input( $args );

Поле флажок

Входной флажок принимает некоторые другие параметры, и создается с помощью функции woocommerce_wp_checkbox. Параметр cbvalue является значением, которое сохраняет положение флажка. Это значение будет соответствовать параметра value. Если они имеют такое же значение, то поле флажка будет установлено.

<?php
$args = array(
  'label' => '', // Текст надписи
  'class' => '',
  'style' => '',
  'wrapper_class' => '',
  'value' => '', // если пусто, полученные от Мета, где ID - это meta_key
  'id' => '', // требуется
  'name' => '', // имя набор из ID, если пустой
  'cbvalue' => '',
  'desc_tip' => '',
  'custom_attributes' => '', // массив атрибутов
  'description' => ''
);
woocommerce_wp_checkbox( $args );

Поле радио

Для того, чтобы создать поле радио, нам нужно будет использовать функцию woocommerce_wp_radio. Для того, чтобы создать различные варианты радио, вам нужно будет использовать параметр options. Это будет ассоциативный массив, где key будет значение и value будет текст этого поля.

<?php
$args = array(
  'label' => '', // Текст надписи
  'class' => '',
  'style' => '',
  'wrapper_class' => '',
  'value' => '', // если пусто, полученные от Мета, где ID - это meta_key
  'id' => '', // требуется
  'name' => '', // имя набор из ID, если пустой
  'options' => '', // Варианты радио, массив
  'desc_tip' => '', 
  'description' => ''
);
woocommerce_wp_radio( $args );

Поле Textarea

Поле TextArea осуществляется с помощью функции woocommerce_wp_textarea_input. Параметры почти такие же, как и для ввода текста, но мы также можем задать строки и столбцы в параметрах rows и cols.

<?php
$args = array(
  'label' => '', // Текст надписи
  'placeholder' => '',
  'class' => '',
  'style' => '',
  'wrapper_class' => '',
  'value' => '', // если пусто, полученные от Мета, где ID - это meta_key
  'id' => '', // требуется
  'name' => '', //имя набор из ID, если пустой
  'rows' => '',
  'cols' => '',
  'desc_tip' => '',
  'custom_attributes' => '', // массив атрибутов 
  'description' => ''
);
woocommerce_wp_textarea_input( $args );

 Поле выбора

Поле выбора имеет что – то подобное с полем радио. Параметр options будет использован для создания всех вариантов. Функция, которая будет создавать поле выбора является woocommerce_wp_select.

<?php
$args = array(
  'label' => '', // Текст надписи
  'class' => '',
  'style' => '',
  'wrapper_class' => '',
  'value' => '', // Если пусто, полученные от Мета, где ID - это meta_key
  'id' => '', // требуется
  'name' => '', //имя набор из ID, если пустой
  'options' => '', // Варианты для выбора, массив
  'desc_tip' => '',
  'custom_attributes' => '', // массив атрибутов 
  'description' => ''
);
woocommerce_wp_select( $args );

Скрытые поля

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

<?php
$args = array(
  'value' => '',
  'class' => '',
  'id' => ''
);
woocommerce_wp_hidden_input( $args );

По умолчанию вкладки продукта

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

• General
• Inventory
• Shipping
• Linked Products
• Attributes
• Variations
• Advanced

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

Вкладка Общие

• woocommerce_product_options_pricing
• woocommerce_product_options_downloads
• woocommerce_product_options_tax
• woocommerce_product_options_general_product_data

Вкладка Inventory

• woocommerce_product_options_sku
• woocommerce_product_options_stock
• woocommerce_product_options_stock_fields
• woocommerce_product_options_stock_status
• woocommerce_product_options_sold_individually
• woocommerce_product_options_inventory_product_data

Вкладка Доставка

• woocommerce_product_options_dimensions
• woocommerce_product_options_shipping

Вкладка Сопутствующая продукция

• woocommerce_product_options_related

Атрибуты

• woocommerce_product_options_attributes

Вариации

• woocommerce_variable_product_bulk_edit_actions

Продвинутый

• woocommerce_product_options_reviews
• woocommerce_product_options_advanced

Пример

Ниже приведен пример общей вкладки и некоторых полей пользовательских продуктов в WooCommerce.

<?php
add_action( 'woocommerce_product_options_pricing', 'my_woo_custom_price_field' );
/**
* Add a Christmas Price field
**/
function my_woo_custom_price_field() {
  
  $field = array(
    'id' => 'christmas_price',
    'label' => __( 'Новогодняя цена', 'textdomain' ),
    'data_type' => 'price' // Настраиваемые форматы наших полей, как поле цена
  );
  
  woocommerce_wp_text_input( $field );
}
add_action( 'woocommerce_product_options_general_product_data', 'my_woo_custom_fields' );
/**
* Добавления поля выбора внизу
*/
function my_woo_custom_fields() {
  $select_field = array(
    'id' => 'my_select',
    'label' => __( 'Выбор', 'textdomain' ),
    'options' => array(
      'value1' => __( 'Текст 1', 'textdomain' ),
      'value2' => __( 'Текст 2', 'textdomain' )
    )
  );
  woocommerce_wp_select( $select_field );
}

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

Некоторые дополнения или решения также потребует дополнительных вкладок продукта. Мы можем добавить вкладки пользовательских продуктов с помощью фильтра или действия:

• Фильтр: woocommerce_product_data_tabs
• Действие: woocommerce_product_write_panel_tabs

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

Сейчас мы покажем вам способы, как добавить вкладки.

Пользовательская вкладка с фильтром

При добавлении вкладки с помощью фильтра, необходимо определить label, target и class. Целью будет атрибут id нашей панели.

<?php
add_filter( 'woocommerce_product_data_tabs', 'my_custom_tab' );
/**
* Добавление пользовательской вкладки
*/
function my_custom_tab( $tabs ) {
  
  $tabs['custom_tab'] = array(
    'label'  => __( 'Моя пользовательская вкладка', 'textdomain' ),
    'target' => 'the_custom_panel',
    'class'  => array(),
  );
  
  return $tabs;
}

Пользовательская вкладка с действиями

При определении нашей пользовательской вкладки с действием, мы должны создать всю разметку. Это означает, что добавление элемента li, а также с целью а в качестве значения в href.

<?php
add_action( 'woocommerce_product_write_panel_tabs', 'my_custom_tab_action' );
/**
* Добавление пользовательской вкладки
*/
function my_custom_tab_action() {
  ?>
  <li class="custom_tab">
    <a href="#the_custom_panel">
      <span><?php _e( 'Моя пользовательская вкладка', 'textdomain' ); ?></span>
    </a>
  </li>
  <?php
}

Пользовательские панели

Так как наши пользовательские позиции определены, мы также должны добавить панель, которая будет отображаться при нажатии нашей вкладки. Мы добавляем пользовательскую панель, зацепив в woocommerce_product_data_panels.

<?php
add_action( 'woocommerce_product_data_panels', 'custom_tab_panel' );
function custom_tab_panel() {
  ?>
  <div id="the_custom_panel" class="panel woocommerce_options_panel">
    <div class="options_group">
      <?php  
        $field = array(
          'id' => 'my_custom_input',
          'label' => __( 'Пользовательский ввод', 'textdomain' ),
        );
        woocommerce_wp_text_input( $field );
      ?>
    </div>
  </div>
<?php
}

Не забудьте добавить такое же значение в атрибуте , id которого вы определили как target.

Сохранение пользовательских полей продукта в WooCommerce

Последняя часть , которую мы также должны определить, как сохранить наше поле продукта. Для сохранения продукта, необходимо использовать действие woocommerce_process_product_meta.

<?php
add_action( 'woocommerce_process_product_meta', 'save_custom_field' );
function save_custom_field( $post_id ) {
  
  $custom_field_value = isset( $_POST['my_custom_input'] ) ? $_POST['my_custom_input'] : '';
  
  $product = wc_get_product( $post_id );
  $product->update_meta_data( 'my_custom_input', $custom_field_value );
  $product->save();
}

Мы просто получаем объект WC_Product, а затем обновляем/добавляем новые метаданные. После этого мы вызываем метод, save() чтобы сохранить все новые изменения.

Вывод

Поскольку WooCommerce использует API WordPress Plugin, вы можете настроить все возможные детали. Чтобы добавить пользовательские поля продукта в WooCommerce, вы можете использовать различные действия и фильтры для достижения цели. В этой статье вы узнали много о пользовательских полей и действия/фильтр продукта, который вы можете использовать.

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

(Пока оценок нет)

Загрузка...