{"id":3962,"date":"2014-12-17T11:38:32","date_gmt":"2014-12-17T13:38:32","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3962"},"modified":"2014-12-17T11:38:32","modified_gmt":"2014-12-17T13:38:32","slug":"como-adicionar-campos-personalizados-no-checkout-do-woocommerce","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/como-adicionar-campos-personalizados-no-checkout-do-woocommerce\/","title":{"rendered":"Como adicionar campos personalizados no “checkout” do Woocommerce"},"content":{"rendered":"

Sem d\u00favida, o Woocommerce \u00e9 un\u00e2nime em quest\u00e3o e-commerce com WordPress, s\u00e3o mais de 5 milh\u00f5es de Downloads e diversos plugins para estender suas funcionalidades.<\/p>\n

Diante deste gigante do e-commerce, as vezes \u00e9 necess\u00e1rio personalizar um pouco e \u00e9 isto que vamos ensinar, como criar novos campos na tela de fechamento de pedido. Criar campos personalizados no Woocommerce pode parecer complicado, mas, vamos mostrar uma maneira f\u00e1cil, r\u00e1pida e sem a necessidade de utilizar mais plugins.<\/p>\n

O que vamos precisar fazer \u00e9:<\/p>\n

    \n
  1. Criar o campo na tela de Checkout<\/li>\n
  2. Validar o novo campo<\/li>\n
  3. Salvar o valor do novo campo no banco de dados<\/li>\n
  4. Mostrar o campo na tela gerencial de pedidos<\/li>\n<\/ol>\n

     <\/p>\n

    Vamos come\u00e7ar, acesse a pasta do seu tema e edite o arquivo functions.php, adicione no final os c\u00f3digos citados.<\/p>\n

     <\/p>\n

    1 – Criar o campo na tela de Checkout<\/h2>\n
    add_action( 'woocommerce_after_order_notes', 'novo_campo_woocommerce' );\n \nfunction novo_campo_woocommerce( $checkout ) {\n \n    echo '<div id=\"novo_campo_woocommerce\"><h2>' . __('Novo campo, informa\u00e7\u00e3o de teste') . '<\/h2>';\n \n    woocommerce_form_field( 'novo_campo', array(\n        'type'          => 'text',\n        'class'         => array('novo_campo form-row-wide'),\n        'label'         => __('Campo de Teste'),\n        'placeholder'   => __('Digite suas informa\u00e7\u00f5es aqui'),\n        ), $checkout->get_value( 'novo_campo' ));\n \n    echo '<\/div>';\n \n}<\/pre>\n
     <\/p>\n
    Exemplo de como ficar\u00e1 na tela de Checkout.<\/p>\n
    \"planos-de-revenda-hostgator\"<\/p>\n
     <\/p>\n
    2\u00a0–\u00a0Validar o novo campo<\/h2>\n
    O pr\u00f3ximo passo agora \u00e9 validar o campo conforme nossa necessidade.<\/p>\n
    add_action('woocommerce_checkout_process', 'validar_novo_campo_woocommerce');\n \nfunction validar_novo_campo_woocommerce() {\n\n    if ( empty( $_POST['novo_campo']) )\n        wc_add_notice( __( 'Obrigat\u00f3rio o preenchimento.' ), 'error' );\n}<\/pre>\n
     <\/p>\n
    Exemplo de mensagem de erro retornada.<\/p>\n
    \"exemplo-mensagem-de-erro\"<\/p>\n
     <\/p>\n
    3\u00a0– Salvar o novo valor no banco de dados<\/h2>\n
    add_action( 'woocommerce_checkout_update_order_meta', 'novo_campo_checkout_order' );\n \nfunction novo_campo_checkout_order( $order_id ) {\n    if ( ! empty( $_POST['novo_campo'] ) ) {\n        update_post_meta( $order_id, 'Novo Campo', sanitize_text_field( $_POST['novo_campo'] ) );\n    }\n}<\/pre>\n
     <\/p>\n
    4\u00a0–\u00a0Mostrar o campo na tela de gerenciamento<\/h2>\n
    add_action( 'woocommerce_admin_order_data_after_billing_address', 'mostrar_novo_campo', 10, 1 );\n \nfunction mostrar_novo_campo($order){\n    echo '<p><strong>'.__('Novo Campo').':<\/strong> ' . get_post_meta( $order->id, 'Novo Campo', true ) . '<\/p>';\n}<\/pre>\n
     <\/p>\n
    Exemplo de como aparecer\u00e1 na tela de gerenciamento de pedido, campo destacado com a cor amarela<\/span>.<\/p>\n
    \"exemplo-tela-gerencial\"<\/p>\n
     <\/p>\n
    Tamb\u00e9m \u00e9 poss\u00edvel remover os campos que n\u00e3o s\u00e3o\u00a0necess\u00e1rios, vamos postar esta dica amanh\u00e3.<\/p>\n","protected":false},"excerpt":{"rendered":"
    As vezes \u00e9 necess\u00e1rio personalizar um pouco o Checkout do Woocommerce e \u00e9 isto que vamos ensinar, como criar novos campos na tela de fechamento de pedido.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,28,30],"tags":[36,667],"class_list":["post-3962","post","type-post","status-publish","format-standard","hentry","category-dicas","category-tutoriais","category-wordpress-2","tag-adicionar-campos-woocommerce","tag-woocommerce-checkout"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3962"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3962\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}