Como adicionar o campo de texto personalizado do Woocommerce na página do produto

Neste post, mostrarei uma solução muito simples para adicionar o campo de texto personalizado do WooCommerce na página do produto. Esses campos personalizados também são chamados de complementos de produto e incluem campos de texto, campos de seleção, caixas de seleção e assim por diante. A principal razão para adicionar isso é permitir que o cliente insira informações adicionais e personalizadas sobre um produto a um custo.

WooCommerce é uma poderosa solução de comércio eletrônico para WordPress que ganhou popularidade ao longo dos anos. Estima-se que o WooCommerce abasteça mais de 42% de todas as lojas online disponíveis.

Essa é uma porcentagem muito grande e se você está procurando uma loja online fácil de configurar e gerenciar, o WooCommerce é a melhor opção para você. É uma solução gratuita e de código aberto, que evoluiu para uma solução de comércio eletrônico muito competente para sites baseados em WordPress.

Campo de texto personalizado Woocommerce na página do produto

Se você fizer uma busca rápida na internet, muitas pessoas vão te fornecer soluções complexas e difíceis de implementar. Neste breve tutorial, compartilharei um trecho de código PHP que adicionará essa funcionalidade à sua página do produto.

Ao final deste tutorial, os usuários da sua loja virtual poderão adicionar uma nota personalizada a cada produto. Se o campo personalizado não for preenchido, ele gerará um erro.

Além disso, se você estiver procurando uma maneira mais simples de adicionar campos personalizados, o plug-in Product Extras for WooCommerce será a melhor solução para você. No entanto, é um plugin premium e você terá que pagar uma taxa anual de $ 59.

Por que você adicionaria campos personalizados na página do produto?

A principal razão para fazer isso é melhorar a retenção de clientes, o que provavelmente aumentará as vendas, pois os clientes poderão adicionar uma nota personalizada ao pedido.

Por exemplo, um cliente pode querer embrulho de presente ou cartões de felicitações personalizados no produto e pode adicionar a nota personalizada no produto.

Com tudo isso colocado na mesa, vamos dar uma olhada nas etapas que você precisa seguir para adicionar um campo de texto personalizado na página do produto em sua loja WooCommerce. A página do produto padrão se parece com isso:

Etapas para adicionar o campo de texto personalizado do Woocommerce na página do produto

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 onde adicionaremos a função que adicionará o campo personalizado do WooCommerce na página do produto .
3. Adicione o seguinte código ao arquivo functions.php :

 /**

 * @snippet Adicionar um campo de entrada aos produtos - WooCommerce

 */

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

// 1. Mostrar campo de entrada personalizado acima de Adicionar ao carrinho

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

function njengah_product_add_on() {

    $valor = isset($_POST['custom_text_add_on']) ? higieniza_texto_campo( $_POST['_custom_text_add_on']): '';

    echo '<div><label>Complemento de texto personalizado <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $valor . '"></p></div>';

}

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

// 2. Lança erro se o campo de entrada personalizado estiver vazio

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

function njengah_product_add_on_validation( $passado, $product_id, $qty ){

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

      wc_add_notice( 'O complemento de texto personalizado é um campo obrigatório', 'error' );

      $aprovado = falso;

   }

   retorno $passou;

}

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

// 3. Salve o valor do campo de entrada personalizado nos dados do item do carrinho

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

function njengah_product_add_on_cart_item_data( $cart_item, $product_id ){

    if( isset( $_POST['custom_text_add_on'] ) ) {

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

    }

    return $cart_item;

}

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

// 4. Exibe o valor do campo de entrada personalizado @ Carrinho

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

function njengah_product_add_on_display_cart( $data, $cart_item ) {

    if ( isset( $cart_item['custom_text_add_on'] ) ){

        $dados[] = array(

            'name' => 'Complemento de texto personalizado',

            'valor' => sanitizar_texto_campo( $cart_item['custom_text_add_on'])

        );

    }

    retorna $dados;

}

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

// 5. Salve o valor do campo de entrada personalizado na meta do item do pedido

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

function njengah_product_add_on_order_item_meta( $item_id, $values) {

    if (! empty( $values['custom_text_add_on'])) {

        wc_add_order_item_meta( $item_id, 'Suplemento de texto personalizado', $values['custom_text_add_on'], true );

    }

}

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

// 6. Exibe o valor do campo de entrada personalizado na tabela de pedidos

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

function njengah_product_add_on_display_order( $cart_item, $order_item ){

    if( isset( $order_item['custom_text_add_on'] ) ){

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

    }

    return $cart_item;

}

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

// 7. Exibe o valor do campo de entrada personalizado em e-mails de pedidos

add_filter( 'woocommerce_email_order_meta_fields', 'njengah_product_add_on_display_emails');

function njengah_product_add_on_display_emails( $fields ) {

    $fields['custom_text_add_on'] = 'Suplemento de texto personalizado';

    retornar $ campos;

}

4. Para ver o resultado , basta atualizar a página do produto e você deverá ver isto:

Se um usuário não tiver inserido os detalhes, um erro será exibido até que o usuário adicione o texto personalizado conforme mostrado abaixo:

A nota personalizada também aparecerá nos detalhes do pedido , conforme mostrado aqui:

Como o código funciona

Primeiro, o código mostra o campo de entrada personalizado acima de Adicionar ao carrinho e, em seguida, um erro é adicionado se o campo de entrada personalizado estiver vazio. Em seguida, o valor do campo de entrada personalizado é salvo e exibido no carrinho, item do pedido, tabela de pedidos e nos e-mails do pedido.

Conclusão

Neste post, forneci uma solução mais simples para os usuários não tão experientes em tecnologia que envolvem o uso de um plugin. Em seguida, compartilhei um trecho de código PHP que deve ser colocado no arquivo functions.php para exibir o complemento do cliente no carrinho, item do pedido, tabela de pedidos e nos e-mails do pedido. Espero que este post tenha ajudado você a adicionar o campo de texto personalizado do WooCommerce na página do produto.

Artigos semelhantes

1. Como definir produtos relacionados personalizados no WooCommerce
2. Como usar os Hooks personalizados do WordPress do_action & apply_filters com exemplos
3. Como remover o menu de downloads Minha página de conta WooCommerce
4. Como obter métodos de pagamento no WooCommerce » Exemplo de código
5. Como ocultar produtos sem imagem no WooCommerce
6. Como remover o efeito de zoom na imagem do produto WooCommerce
7. Como adicionar categorias aos produtos WooCommerce
8. Como remover marcadores da lista não ordenada no WordPress
9. Como adicionar um campo extra no formulário de checkout do WooCommerce
10. Como alterar o procedimento de check-out no WooCommerce
11. Como adicionar produtos Woocommerce a partir do frontend
12. Como contar itens adicionados ao carrinho Código de contagem de carrinho WooCommerce
13. Como alterar o texto do botão de checkout no WooCommerce [Place Order]
14. 5 trechos de código de paginação do WordPress com exemplos [simples a avançado]
15. Como alterar o texto do estoque no WooCommerce
16. Como redirecionar usuários do WooCommerce após o registro por funções
17. Como obter o ID do pedido no Woocommerce
18. Como remover Hash # de URLs do WordPress com truque simples
19. Como adicionar descrição após o preço no WooCommerce
20. Como alterar o aviso 'Adicionado ao carrinho' do WooCommerce