Cómo agregar un formulario a la página del producto WooCommerce

Publicado: 2021-07-21

WooCommerce Agregar formulario a la página del producto ¿Desea agregar un formulario personalizado en la página del producto? Siga leyendo, ya que esta publicación tiene como objetivo proporcionarle una solución.

WooCommerce continúa impulsando muchas tiendas porque es flexible para la personalización. Por ejemplo, es posible que desee agregar información adicional a la página de su producto. La mejor manera de implementar esto es agregando campos personalizados a los productos.

Los campos personalizados también se denominan meta del elemento. Se pueden mostrar en la página del carrito, la página de pago y también en los correos electrónicos. El meta del artículo del carrito es cuando la información recopilada en los campos de productos adicionales se agrega a los productos en el carrito y se puede guardar para el pedido.

Por lo tanto, necesitamos una solución que agregue campos de datos personalizados a la página del producto y agregue esta información al meta del artículo del carrito. Después de eso, los datos recopilados se muestran en el carrito, el pago y los detalles del pedido.

Sin embargo, WooCommerce no tiene una solución integrada para agregar esta función. Esto significa que necesitamos crear un fragmento de código personalizado para lograrlo. Recomendamos complementos solo cuando desee un cambio importante en su sitio.

WooCommerce Agregar formulario a la página del producto

En el tutorial de hoy, compartiremos un fragmento de código personalizado que creamos para agregar un formulario que contiene dos campos. Crearemos un campo de nombre y mensaje y mostraremos los datos de los campos como Meta del artículo del carrito y Meta del artículo del pedido. Esto significa que se mostrará durante todo el ciclo del pedido.

Antes de continuar, recomendamos instalar o crear un tema secundario. Esto se debe a que modificaremos algunos de los archivos principales. El tema hijo asegurará que los cambios no se pierdan durante una actualización.

Entremos directamente en ello.

Pasos para agregar un formulario a la página del producto de WooCommerce

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para agregar un formulario a la página del producto WooCommerce .
Agregue el siguiente código al archivo 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'] );
	}
}

Este es el resultado en la página del producto:
Este es el resultado en la página del carrito:
Este es el resultado en la página de pago:
Este es el resultado en la página de detalles del pedido:
Este es el resultado en la página de orden de edición:

Terminando

En el tutorial de hoy, compartimos una solución personalizada que creamos para agregar un formulario en la página del producto. Los datos recopilados aparecerán a lo largo de los detalles del pedido, como hemos demostrado en esta publicación.

Sin embargo, debe tener mucho cuidado al editar los archivos principales de su tienda WooCommerce. Si comete algún error, se mostrará un error.

Esperamos que esta solución le haya ayudado a comprender cómo funciona el ciclo de pedidos.

Cómo agregar un formulario a la página del producto WooCommerce

WooCommerce Agregar formulario a la página del producto

Pasos para agregar un formulario a la página del producto de WooCommerce

Terminando

Artículos similares