Como adicionar formulário à página do produto WooCommerce

Deseja adicionar um formulário personalizado na página do produto? Continue lendo, pois este post visa fornecer uma solução para você.

O WooCommerce continua a alimentar muitas lojas porque é flexível para personalização. Por exemplo, você pode querer adicionar algumas informações extras à página do seu produto. A melhor maneira de implementar isso é adicionando campos personalizados aos produtos.

Os campos personalizados também são chamados de meta do item. Eles podem ser exibidos na página do carrinho, na página de checkout e nos e-mails também. A meta do item do carrinho é quando as informações coletadas nos campos de produtos extras são adicionadas aos produtos no carrinho e podem ser salvas para o pedido.

Portanto, precisamos de uma solução que adicione campos de dados personalizados à página do produto e adicione essas informações à meta do item do carrinho. Depois disso, os dados coletados são exibidos no carrinho, no checkout e nos detalhes do pedido.

No entanto, o WooCommerce não possui uma solução integrada para adicionar esse recurso. Isso significa que precisamos criar um snippet de código personalizado para conseguir isso. Recomendamos plugins apenas quando você deseja uma grande mudança em seu site.

WooCommerce Adicionar formulário à página do produto

No tutorial de hoje, compartilharemos um trecho de código personalizado que criamos para adicionar um formulário contendo dois campos. Teremos um campo de nome e mensagem e exibiremos os dados dos campos como meta do item do carrinho e meta do item do pedido. Isso significa que ele será exibido durante todo o ciclo do pedido.

Antes de prosseguirmos, recomendamos instalar ou criar um tema filho. Isso ocorre porque estaremos modificando alguns dos arquivos principais. O tema filho garantirá que as alterações não sejam perdidas durante uma atualização.

Vamos direto ao assunto.

Etapas para adicionar um formulário à página do produto WooCommerce

Aqui estão os passos que você precisa seguir:

1. Faça login no seu site WordPress e acesse o Dashboard como usuário administrador.
2. No menu Dashboard, clique em Appearance Menu > Theme Editor Menu . Quando a página Theme Editor for aberta, procure o arquivo de funções do tema para adicionar a função para adicionar um formulário à página do produto WooCommerce .
3. Adicione o seguinte código ao arquivo php :

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_fields_before_add_to_cart' );
function njengah_fields_before_add_to_cart( ) {
	?>
	<table>
		<tr>
			<td>
				<?php _e( "Name:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card">
			</td>
		</tr>
		<tr>
			<td>
				<?php _e( "Message:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card">
			</td>
		</tr>
	</table>
	<?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'] ) && 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' => 'Name',
					 'display'  => $custom_data['customer_name'] );
		$other_data[] =   array( 'name' => 'Message',
					 'display'  => $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'] );
	}
}

4. Este é o resultado na página do produto:
5. Este é o resultado na página do carrinho:
6. Este é o resultado na página de checkout:
7. Este é o resultado na página de detalhes do pedido:
8. Este é o resultado na página de ordem de edição:

Empacotando

No tutorial de hoje, compartilhamos uma solução personalizada que criamos para adicionar um formulário na página do produto. Os detalhes coletados aparecerão ao longo dos detalhes do pedido, conforme demonstramos neste post.

No entanto, você deve ter muito cuidado ao editar os arquivos principais da sua loja WooCommerce. Se você cometer algum erro, um erro será exibido.

Esperamos que esta solução tenha ajudado você a entender como funciona o ciclo de pedidos.

Artigos semelhantes

1. Como migrar do Shopify para o WooCommerce
2. Como alterar as mensagens de erro do WooCommerce Checkout
3. WooCommerce Criar página de produto único personalizado
4. Como definir a largura total da página do produto do tema WooCommerce Storefront
5. Como enviar e-mail na mudança de status no WooCommerce
6. Como obter o ID do pedido na página de checkout WooCommerce
7. Como alterar o placeholder do código de cupom WooCommerce
8. Como adicionar uma caixa de pesquisa no topo da página Storefront Theme
9. Como adicionar campos de produtos personalizados WooCommerce
10. Como adicionar uma nova coluna na página de pedidos do WooCommerce
11. Como adicionar a calculadora de envio WooCommerce na página do carrinho
12. Como adicionar taxonomia personalizada aos produtos WooCommerce
13. Como adicionar classificação por estrelas ao produto WooCommerce
14. Como ocultar as taxas de envio se o frete grátis estiver disponível WooCommerce
15. Como traduzir a página de checkout do WooCommerce
16. Como acessar o banco de dados WooCommerce
17. Como obter o produto atual WooCommerce
18. Os 30 melhores plug-ins de formulário do WordPress » Melhor plug-in de formulário do WordPress
19. Como configurar o WooCommerce Compre um e ganhe um
20. Como criar uma página de login no WordPress sem usar o plug-in