Как добавить форму на страницу товара WooCommerce

Опубликовано: 2021-07-21

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

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

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

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

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

WooCommerce добавить форму на страницу продукта

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

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

Давайте приступим к делу.

Шаги по добавлению формы на страницу продукта WooCommerce

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

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

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_fields_before_add_to_cart' );
function njengah_fields_before_add_to_cart( ) {
	?&gt;
	&lt;table&gt;
		&lt;tr&gt;
			&lt;td&gt;
				&lt;?php _e( "Name:", "aoim"); ?&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;td&gt;
				&lt;?php _e( "Message:", "aoim"); ?&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card"&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/table&gt;
	&lt;?php
}
/**
 * Add data to cart item
 */
add_filter( 'woocommerce_add_cart_item_data', 'njengah_cart_item_data', 25, 2 );
function njengah_cart_item_data( $cart_item_meta, $product_id ) {
	if ( isset( $_POST ['customer_name'] ) &amp;&amp; isset( $_POST ['customer_message'] ) ) {
		$custom_data  = array() ;
		$custom_data [ 'customer_name' ]    = isset( $_POST ['customer_name'] ) ?  sanitize_text_field ( $_POST ['customer_name'] ) : "" ;
		$custom_data [ 'customer_message' ] = isset( $_POST ['customer_message'] ) ? sanitize_text_field ( $_POST ['customer_message'] ): "" ;
		$cart_item_meta ['custom_data']     = $custom_data ;
	}
		return $cart_item_meta;
}
/**
 * Display the custom data on cart and checkout page
 */
add_filter( 'woocommerce_get_item_data', 'njengah_item_data' , 25, 2 );
function njengah_item_data ( $other_data, $cart_item ) {
	if ( isset( $cart_item [ 'custom_data' ] ) ) {
		$custom_data  = $cart_item [ 'custom_data' ];
				$other_data[] =   array( 'name' =&gt; 'Name',
					 'display'  =&gt; $custom_data['customer_name'] );
		$other_data[] =   array( 'name' =&gt; 'Message',
					 'display'  =&gt; $custom_data['customer_message'] );
	}
		return $other_data;
}
/**
 * Add order item meta
 */
add_action( 'woocommerce_add_order_item_meta', 'njengah_order_item_meta' , 10, 2);
function njengah_order_item_meta ( $item_id, $values ) {
	if ( isset( $values [ 'custom_data' ] ) ) {
		$custom_data  = $values [ 'custom_data' ];
		wc_add_order_item_meta( $item_id, 'Name', $custom_data['customer_name'] );
		wc_add_order_item_meta( $item_id, 'Message', $custom_data['customer_message'] );
	}
}

Это результат на странице продукта:
Вот результат на странице корзины:
Вот результат на странице оформления заказа:
Это результат на странице сведений о заказе:
Это результат на странице редактирования заказа:

Подведение итогов

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

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

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

Как добавить форму на страницу товара WooCommerce

WooCommerce добавить форму на страницу продукта

Шаги по добавлению формы на страницу продукта WooCommerce

Подведение итогов

Похожие статьи