Entretanto, com o novo widget de Finaliza\u00e7\u00e3o de Compra no Elementor Pro<\/a>, \u00e9 poss\u00edvel agora personalizar completamente a p\u00e1gina de finaliza\u00e7\u00e3o de compra utilizando a interface visual do Elementor e op\u00e7\u00f5es sem c\u00f3digo. Este widget funciona em conjunto com os widgets de Carrinho<\/a> e Minha Conta<\/a> do Elementor para auxiliar na concep\u00e7\u00e3o de todas as p\u00e1ginas essenciais de sua loja.<\/p>\n\n Neste tutorial, o senhor aprender\u00e1 como utilizar o widget de Finaliza\u00e7\u00e3o de Compra do Elementor<\/a> Pro para personalizar e otimizar a p\u00e1gina de finaliza\u00e7\u00e3o de compra de sua loja sem a necessidade de sair do Elementor.<\/p>\n\n Subsequentemente, compartilharemos dicas adicionais sobre como utilizar os ganchos de a\u00e7\u00e3o do WooCommerce para personalizar ainda mais a p\u00e1gina de finaliza\u00e7\u00e3o de compra. <\/p>\n\n Embora n\u00e3o seja necess\u00e1rio utilizar c\u00f3digo ao empregar o widget de Finaliza\u00e7\u00e3o de Compra do Elementor Pro, estes ganchos de a\u00e7\u00e3o podem ser \u00fateis caso o senhor deseje adicionar conte\u00fado personalizado \u00e0 sua p\u00e1gina de finaliza\u00e7\u00e3o de compra, como um conjunto de selos de confian\u00e7a que aparecem abaixo dos campos de cart\u00e3o de cr\u00e9dito.<\/p>\n\n Caso prefira assistir a um tutorial em v\u00eddeo, o senhor pode assistir ao v\u00eddeo acima sobre como utilizar o widget de Finaliza\u00e7\u00e3o de Compra do Elementor. <\/p>\n\n Caso contr\u00e1rio, continue lendo para o tutorial completo baseado em texto que acompanha o v\u00eddeo, bem como algumas dicas extras sobre o uso de ganchos de a\u00e7\u00e3o do WooCommerce que n\u00e3o abordamos no v\u00eddeo.<\/p>\n\n A p\u00e1gina de finaliza\u00e7\u00e3o de compra do WooCommerce \u00e9 a p\u00e1gina onde os compradores finalizam seus pedidos inserindo seus endere\u00e7os, detalhes de contato, informa\u00e7\u00f5es de cobran\u00e7a e assim por diante.<\/p>\n\n Trata-se de uma p\u00e1gina essencial para qualquer loja, portanto \u00e9 importante que o senhor a otimize para convers\u00f5es e a torne o mais amig\u00e1vel poss\u00edvel para o usu\u00e1rio.<\/p>\n\n Com o widget de Finaliza\u00e7\u00e3o de Compra do Elementor, o senhor pode personalizar completamente a p\u00e1gina de finaliza\u00e7\u00e3o de compra de sua loja diretamente a partir do Elementor. Isso o auxilia a criar um design consistente com o restante de sua loja e otimizar detalhes-chave em sua p\u00e1gina.<\/p>\n\n O senhor poder\u00e1 alterar cores e tipografia<\/a>, ajustar espa\u00e7amento, modificar o texto da se\u00e7\u00e3o e do formul\u00e1rio, e muito mais. O senhor pode fazer altera\u00e7\u00f5es em toda a finaliza\u00e7\u00e3o de compra ou habilitar op\u00e7\u00f5es granulares para aplicar estilos diferentes a partes espec\u00edficas de sua finaliza\u00e7\u00e3o de compra.<\/p>\n\n Por exemplo, se o senhor desejar chamar a aten\u00e7\u00e3o para o campo de cupom, pode adicionar cores especiais, uma borda, e assim por diante \u2014 tudo sem a necessidade de c\u00f3digo.<\/p>\n\n Agora, passaremos para um guia detalhado sobre como o senhor pode utilizar o widget de Finaliza\u00e7\u00e3o de Compra no Elementor Pro<\/a> para personalizar a p\u00e1gina de finaliza\u00e7\u00e3o de compra de sua loja.<\/p>\n\n Novamente, caso prefira visualizar este tutorial em formato de v\u00eddeo, \u00e9 poss\u00edvel assist\u00ed-lo acima. Ambos os tutoriais cont\u00eam as mesmas informa\u00e7\u00f5es.<\/p>\n\n Quando se cria uma loja WooCommerce<\/a>, o WooCommerce automaticamente gera uma p\u00e1gina de finaliza\u00e7\u00e3o de compra para sua loja que utiliza o shortcode de finaliza\u00e7\u00e3o de compra do WooCommerce<\/a>.<\/p>\n\n Neste tutorial, voc\u00ea pode utilizar essa mesma p\u00e1gina por quest\u00f5es de simplicidade. Contudo, ao inv\u00e9s de depender do shortcode do WooCommerce, voc\u00ea editar\u00e1 a p\u00e1gina no Elementor e adicionar\u00e1 o widget de Finaliza\u00e7\u00e3o de Compra.<\/p>\n\n Para iniciar, acesse a lista de P\u00e1ginas<\/strong> em seu painel administrativo do WordPress e localize a p\u00e1gina de finaliza\u00e7\u00e3o de compra. O WooCommerce automaticamente a marcar\u00e1 com um identificador que diz “P\u00e1gina de Finaliza\u00e7\u00e3o de Compra”.<\/p>\n\n Ao encontrar a p\u00e1gina correta, clique no bot\u00e3o Editar<\/strong> para abrir o editor do WordPress. <\/p>\n\n Uma vez dentro do editor, clique no bot\u00e3o Editar com Elementor<\/strong> para habilitar o Elementor para esta p\u00e1gina e iniciar o editor do Elementor.<\/p>\n\n Ao abrir a p\u00e1gina de carrinho padr\u00e3o no Elementor, voc\u00ea dever\u00e1 ver um design bastante simples. Os \u00fanicos elementos na p\u00e1gina ser\u00e3o o shortcode [woocommerce_checkout] dentro de um widget de Editor de Texto do Elementor.<\/p>\n\n Para utilizar o Elementor para controlar sua finaliza\u00e7\u00e3o de compra, voc\u00ea primeiro dever\u00e1 deletar o widget\/shortcode existente:<\/p>\n\n Em seguida, adicione o widget de Finaliza\u00e7\u00e3o de Compra do Elementor em seu lugar. Ap\u00f3s adicionar o widget de Finaliza\u00e7\u00e3o de Compra, voc\u00ea ver\u00e1 uma pr\u00e9via ao vivo da p\u00e1gina de finaliza\u00e7\u00e3o de compra diretamente no editor.<\/p>\n\n Nota<\/strong> – visto que o editor do Elementor lhe proporciona uma pr\u00e9via visual que corresponde perfeitamente ao que os visitantes de seu website ver\u00e3o, voc\u00ea desejar\u00e1 adicionar alguns itens ao seu carrinho de compras para que possa visualizar como o processo real de finaliza\u00e7\u00e3o de compra se apresenta. Eis o que voc\u00ea precisa fazer:<\/p>\n\n Uma vez recarregado o Elementor, esses itens dever\u00e3o aparecer no resumo de finaliza\u00e7\u00e3o de compra enquanto voc\u00ea trabalha em seu design.<\/p>\n\n Agora, \u00e9 o momento de iniciar a personaliza\u00e7\u00e3o.<\/p>\n\n Para come\u00e7ar, abra as configura\u00e7\u00f5es para o widget de Finaliza\u00e7\u00e3o de Compra na barra lateral do Elementor.<\/p>\n\n Vamos primeiramente percorrer todas as configura\u00e7\u00f5es na aba de Conte\u00fado do widget.<\/p>\n\n Primeiramente, voc\u00ea pode utilizar a \u00e1rea de configura\u00e7\u00f5es Geral<\/strong> para escolher entre um layout de uma coluna ou duas colunas para sua p\u00e1gina de finaliza\u00e7\u00e3o de compra.<\/p>\n\n Se optar por um layout de duas colunas, voc\u00ea tamb\u00e9m pode tornar a coluna direita fixa. Se habilitar a coluna direita fixa, voc\u00ea obt\u00e9m uma op\u00e7\u00e3o adicional para adicionar um deslocamento, o que ajuda a evitar que seu cabe\u00e7alho se sobreponha \u00e0 coluna.<\/p>\n\n A se\u00e7\u00e3o Detalhes de Faturamento e Envio<\/strong> permite que voc\u00ea personalize os detalhes do formul\u00e1rio de faturamento e envio.<\/p>\n\n Voc\u00ea ver\u00e1 esses campos juntos se configurar os detalhes de faturamento e envio para serem os mesmos nas configura\u00e7\u00f5es do WooCommerce. Voc\u00ea pode habilitar isto acessando WooCommerce \u2192 Configura\u00e7\u00f5es \u2192 Envio<\/strong> e selecionando For\u00e7ar envio para o endere\u00e7o de faturamento do cliente<\/strong>. Caso contr\u00e1rio, voc\u00ea os ver\u00e1 separadamente.<\/p>\n\n Primeiramente, voc\u00ea pode definir o t\u00edtulo da se\u00e7\u00e3o e o alinhamento para esta se\u00e7\u00e3o.<\/p>\n\n Em seguida, voc\u00ea pode abrir as configura\u00e7\u00f5es para cada campo individual para personalizar os r\u00f3tulos e espa\u00e7os reservados.<\/p>\n\n A se\u00e7\u00e3o Informa\u00e7\u00f5es Adicionais<\/strong> permite que voc\u00ea personalize esta \u00e1rea da p\u00e1gina de finaliza\u00e7\u00e3o de compra. Por padr\u00e3o, \u00e9 aqui que os compradores podem deixar notas especiais sobre o pedido, embora voc\u00ea possa ver detalhes adicionais dependendo da configura\u00e7\u00e3o de sua loja.<\/p>\n\n Assim como com as outras se\u00e7\u00f5es de sua p\u00e1gina de finaliza\u00e7\u00e3o de compra, voc\u00ea pode personalizar o alinhamento e os r\u00f3tulos desta se\u00e7\u00e3o.<\/p>\n\n Ou, voc\u00ea tamb\u00e9m tem a op\u00e7\u00e3o de ocultar esta se\u00e7\u00e3o da p\u00e1gina de finaliza\u00e7\u00e3o de compra, o que pode ser \u00fatil se os compradores n\u00e3o precisarem deixar notas personalizadas.<\/p>\n\n As configura\u00e7\u00f5es de Seu Pedido<\/strong> permitem que voc\u00ea personalize a parte do resumo do pedido na finaliza\u00e7\u00e3o de compra. Se voc\u00ea utilizar um layout de duas colunas, esta se\u00e7\u00e3o aparecer\u00e1 no topo da coluna direita. Em um layout de uma coluna, ela aparecer\u00e1 abaixo dos detalhes de faturamento e envio.<\/p>\n\n As configura\u00e7\u00f5es de Cupom<\/strong> tamb\u00e9m permitem que Vossa Senhoria personalize o t\u00edtulo e o alinhamento da se\u00e7\u00e3o de cupons. N\u00e3o obstante, Vossa Senhoria tamb\u00e9m obt\u00e9m uma op\u00e7\u00e3o para personalizar o texto do link para aplica\u00e7\u00e3o do c\u00f3digo do cupom. Isto pode auxiliar Vossa Senhoria a criar uma experi\u00eancia mais otimizada e amig\u00e1vel para os compradores que est\u00e3o aplicando cupons.<\/p>\n\n As configura\u00e7\u00f5es de Pagamento<\/strong> permitem que Vossa Senhoria altere o alinhamento do bot\u00e3o de compra e tamb\u00e9m personalize a mensagem e o texto do link dos termos e condi\u00e7\u00f5es.<\/p>\n\n A fim de visualizar a mensagem dos termos e condi\u00e7\u00f5es, ser\u00e1 necess\u00e1rio que Vossa Senhoria tenha configurado a p\u00e1gina de termos e condi\u00e7\u00f5es nas configura\u00e7\u00f5es do WooCommerce. Para simplificar o processo, Vossa Senhoria pode selecionar esta p\u00e1gina sem sair do Elementor:<\/p>\n\n Caso Vossa Senhoria permita checkout de convidados nas configura\u00e7\u00f5es do WooCommerce, tamb\u00e9m obter\u00e1 uma \u00e1rea de configura\u00e7\u00f5es adicional denominada Cliente Recorrente<\/strong> que permite personalizar a mensagem que solicita aos clientes recorrentes que fa\u00e7am login em suas contas existentes.<\/p>\n\n Em seguida, Vossa Senhoria pode passar para a aba Estilo<\/strong> nas configura\u00e7\u00f5es do widget de Checkout para personalizar ainda mais o estilo e o design da p\u00e1gina de checkout, incluindo garantir que ela corresponda ao restante do design da sua loja.<\/p>\n\n Aqui est\u00e3o as op\u00e7\u00f5es gerais de design que Vossa Senhoria pode configurar nas diferentes \u00e1reas de configura\u00e7\u00f5es…<\/p>\n\n Nas configura\u00e7\u00f5es de Se\u00e7\u00f5es<\/strong>, Vossa Senhoria pode controlar o estilo geral de todas as diferentes partes do checkout. <\/p>\n\n Por exemplo, se Vossa Senhoria alterar a cor de fundo, isso afetar\u00e1 o fundo de todas as se\u00e7\u00f5es. Vossa Senhoria tamb\u00e9m pode ajustar a borda e o espa\u00e7amento conforme necess\u00e1rio.<\/p>\n\n Nas configura\u00e7\u00f5es de Typografia<\/strong>, Vossa Senhoria pode personalizar as cores e a tipografia da maioria dos textos na sua p\u00e1gina de checkout, incluindo t\u00edtulos, t\u00edtulos secund\u00e1rios, descri\u00e7\u00f5es, mensagens, bot\u00f5es de r\u00e1dio, caixas de sele\u00e7\u00e3o e mais.<\/p>\n\n O \u00fanico elemento de tipografia que Vossa Senhoria n\u00e3o pode personalizar aqui s\u00e3o os seus formul\u00e1rios, o que ser\u00e1 feito na pr\u00f3xima se\u00e7\u00e3o.<\/p>\n\n Nas configura\u00e7\u00f5es de Formul\u00e1rios<\/strong>, Vossa Senhoria pode controlar tudo sobre os formul\u00e1rios e campos de formul\u00e1rio da sua p\u00e1gina de checkout, o que afeta principalmente os campos de faturamento\/envio e o formul\u00e1rio de cupom.<\/p>\n\n Vossa Senhoria pode ajustar o espa\u00e7amento entre colunas e linhas para os v\u00e1rios campos do formul\u00e1rio. Vossa Senhoria tamb\u00e9m pode personalizar a tipografia de r\u00f3tulos e campos, bem como ajustar espa\u00e7amento, bordas e fundos. <\/p>\n\n Al\u00e9m disso, Vossa Senhoria tamb\u00e9m obt\u00e9m uma op\u00e7\u00e3o para estilizar o bot\u00e3o de cupom, assim como qualquer outro bot\u00e3o em seu site.<\/p>\n\n Em Resumo do Pedido<\/strong>, Vossa Senhoria pode controlar as linhas, o que afeta o espa\u00e7amento na lista de itens no carrinho do comprador.<\/p>\n\n Vossa Senhoria tamb\u00e9m pode controlar as cores e a tipografia dos diferentes itens do resumo. Por exemplo, Vossa Senhoria poderia usar uma configura\u00e7\u00e3o de tipografia para os itens e outra diferente para os totais do pedido.<\/p>\n\n Nas configura\u00e7\u00f5es de Bot\u00e3o de Compra<\/strong>, Vossa Senhoria pode personalizar completamente o bot\u00e3o de compra, incluindo tipografia, cores, espa\u00e7amento, bordas e mais.<\/p>\n\n Este \u00e9 provavelmente o bot\u00e3o mais importante na p\u00e1gina de checkout, ent\u00e3o Vossa Senhoria desejar\u00e1 garantir que ele seja chamativo e corresponda ao restante do seu design.<\/p>\n\n Por \u00faltimo, o item Personalizar<\/strong> permite que Vossa Senhoria adicione controles de estilo individuais para partes espec\u00edficas da sua p\u00e1gina de checkout. Vossa Senhoria pode adicion\u00e1-los para as seguintes \u00e1reas:<\/p>\n\n Por exemplo, Vossa Senhoria pode desejar fazer com que o resumo do pedido se destaque do restante da p\u00e1gina de checkout adicionando uma borda personalizada. <\/p>\n\n Vossa Senhoria poderia fazer isso habilitando as configura\u00e7\u00f5es de personaliza\u00e7\u00e3o para a \u00e1rea de resumo do pedido e configurando-as de acordo com suas prefer\u00eancias. <\/p>\n\n Agora que Vossa Senhoria terminou de personalizar a p\u00e1gina de checkout para usu\u00e1rios de desktop, desejar\u00e1 mudar para o modo responsivo<\/a>, para verificar se \u00e9 necess\u00e1rio fazer algum ajuste para visitantes em dispositivos m\u00f3veis ou tablets.<\/p>\n\n Como ocorre com todos os designs que Vossa Senhoria cria com o Elementor, o design da sua p\u00e1gina de checkout \u00e9 responsivo por padr\u00e3o. <\/p>\n\n N\u00e3o obstante, \u00e9 poss\u00edvel tamb\u00e9m utilizar os controles m\u00f3veis do Elementor para ajustar o design, caso seja necess\u00e1rio. Tudo o que se faz necess\u00e1rio \u00e9 procurar pelo \u00edcone de dispositivo ao lado das configura\u00e7\u00f5es que podem ser modificadas para diferentes aparelhos.<\/p>\n\n Por exemplo, pode-se desejar ajustar ligeiramente o espa\u00e7amento de diferentes elementos para o design m\u00f3vel.<\/p>\n\n Esta \u00faltima etapa \u00e9 inteiramente opcional, mas \u00e9 digno de nota que tamb\u00e9m se pode controlar atribui\u00e7\u00f5es-chave de p\u00e1ginas do WooCommerce a partir de a \u00e1rea de Configura\u00e7\u00f5es do Site do Elementor<\/a>.<\/p>\n\n Isto poderia ser \u00fatil caso tenha-se criado uma nova p\u00e1gina para a finaliza\u00e7\u00e3o de compra, ao inv\u00e9s de utilizar a p\u00e1gina padr\u00e3o criada pelo WooCommerce.<\/p>\n\n Pode-se acessar estas op\u00e7\u00f5es a partir da aba WooCommerce<\/strong> na \u00e1rea regular de Configura\u00e7\u00f5es do Site. Encontrar-se-\u00e1 a op\u00e7\u00e3o do WooCommerce sob a se\u00e7\u00e3o Configura\u00e7\u00f5es<\/strong>.<\/p>\n\n Para personaliza\u00e7\u00f5es adicionais \u00e0 p\u00e1gina de finaliza\u00e7\u00e3o de compra do WooCommerce, pode-se utilizar c\u00f3digo e fazer uso dos numerosos ganchos de a\u00e7\u00e3o de finaliza\u00e7\u00e3o de compra do WooCommerce. <\/p>\n\n Isto pode ser especialmente \u00fatil se se deseja adicionar novo conte\u00fado \u00e0 p\u00e1gina de finaliza\u00e7\u00e3o de compra, como inserir selos de confian\u00e7a abaixo do bot\u00e3o de pagamento.<\/p>\n\n O aspecto positivo desta abordagem \u00e9 que ainda funcionar\u00e1 com o widget de Finaliza\u00e7\u00e3o de Compra do Elementor, o que o torna um excelente complemento ao Elementor para altera\u00e7\u00f5es adicionais.<\/p>\n\n Os ganchos de a\u00e7\u00e3o do WordPress essencialmente permitem que se utilize PHP para injetar conte\u00fado em diferentes partes da p\u00e1gina de finaliza\u00e7\u00e3o de compra. Por exemplo, poder-se-ia adicionar uma nova mensagem de texto, incluir uma imagem (talvez um selo de confian\u00e7a), e assim por diante.<\/p>\n\n No total, o WooCommerce oferece 16 diferentes ganchos de a\u00e7\u00e3o para a p\u00e1gina de finaliza\u00e7\u00e3o de compra.<\/p>\n\n Os primeiros nove ganchos est\u00e3o sempre dispon\u00edveis:<\/p>\n\n Os \u00faltimos sete ganchos podem ou n\u00e3o estar dispon\u00edveis dependendo das configura\u00e7\u00f5es do WooCommerce. Por exemplo, se n\u00e3o se habilitou o registro na p\u00e1gina de finaliza\u00e7\u00e3o de compra, n\u00e3o ser\u00e1 poss\u00edvel utilizar o gancho de a\u00e7\u00e3o relacionado ao formul\u00e1rio de registro:<\/p>\n\n Para compreender onde estes ganchos adicionar\u00e3o conte\u00fado \u00e0 p\u00e1gina de finaliza\u00e7\u00e3o de compra, o Business Bloomer mant\u00e9m um excelente guia visual para cada localiza\u00e7\u00e3o<\/a>:<\/p>\n\n Para injetar conte\u00fado com um gancho de a\u00e7\u00e3o, ser\u00e1 necess\u00e1rio adicionar um trecho de c\u00f3digo ao arquivo functions.php<\/strong> de seu tema filho<\/a> ou via um plugin como o Code Snippets<\/a>. <\/p>\n\n Dado que se estar\u00e1 adicionando c\u00f3digo ao site, recomenda-se veementemente realizar um backup<\/a> antes de prosseguir e\/ou testar as altera\u00e7\u00f5es em um site de teste<\/a> primeiramente.<\/p>\n\n Primeiramente, escolha a localiza\u00e7\u00e3o do gancho onde se deseja adicionar conte\u00fado. <\/p>\n\n Por exemplo, suponhamos que se deseje adicionar um conjunto de selos de confian\u00e7a abaixo do bot\u00e3o “Finalizar Pedido”. Para isso, utilizar-se-ia o gancho woocommerce_review_order_after_submit<\/strong>.<\/p>\n\n Ent\u00e3o, adicionar-se-ia um trecho de c\u00f3digo como este:<\/p>\n\n add_action( ‘action_name’, ‘your_function_name’ );<\/p>\n\n function your_function_name() {<\/p>\n\n \/\/ Seu c\u00f3digo<\/p>\n\n }<\/p>\n\n Por exemplo, para adicionar uma imagem de selo de confian\u00e7a, o c\u00f3digo poderia se parecer com isto:<\/p>\n\n add_action( ‘woocommerce_review_order_after_submit’, ‘display_trust_badges’ );<\/p>\n\n function display_trust_badges() {<\/p>\n\n echo ‘ ;}<\/p>\n\n Abaixo, pode-se observar que os selos de confian\u00e7a aparecem abaixo do bot\u00e3o de finalizar pedido, mesmo ao trabalhar com o widget de Finaliza\u00e7\u00e3o de Compra na interface do Elementor:<\/p>\n\n Antes de tornar as altera\u00e7\u00f5es em sua p\u00e1gina de finaliza\u00e7\u00e3o de compra ativas, recomenda-se veementemente testar tudo para assegurar-se de que n\u00e3o haja problemas. Afinal, qualquer coisa que interfira na p\u00e1gina de finaliza\u00e7\u00e3o de compra de sua loja ter\u00e1 um efeito negativo direto em seu resultado financeiro.<\/p>\n\n Muitos m\u00e9todos de pagamento do WooCommerce incluem modos de teste que voc\u00ea pode utilizar para submeter pedidos. Isso \u00e9 verdade tanto para o plugin oficial de gateway do Stripe<\/a> quanto para o plugin oficial de gateway do PayPal<\/a>, bem como para o WooCommerce Payments<\/a>. Todos os links na frase anterior o direcionar\u00e3o \u00e0 p\u00e1gina de documenta\u00e7\u00e3o apropriada para a funcionalidade de teste daquele gateway.<\/p>\n\n Ou, voc\u00ea tamb\u00e9m pode utilizar o plugin gratuito WC Order Test<\/a>, que adiciona um novo gateway de pagamento denominado “Order Test”. Voc\u00ea pode configurar este gateway acessando WooCommerce \u2192 Configura\u00e7\u00f5es \u2192 Pagamentos<\/strong>.<\/p>\n\n Uma vez que voc\u00ea tenha habilitado um gateway de pagamento de teste, voc\u00ea pode submeter alguns pedidos de teste para assegurar-se de que todos os campos de finaliza\u00e7\u00e3o de compra estejam funcionando e que nenhuma de suas altera\u00e7\u00f5es de conte\u00fado ou design interfira no processo de finaliza\u00e7\u00e3o de compra.<\/p>\n\n Recomendamos que se realize testes tanto em dispositivos desktop quanto em dispositivos m\u00f3veis.<\/p>\n\n Com o widget de Finaliza\u00e7\u00e3o de Compra no Elementor Pro, voc\u00ea agora pode personalizar completamente a p\u00e1gina de finaliza\u00e7\u00e3o de compra do WooCommerce utilizando o design visual e de arrastar e soltar do Elementor.<\/p>\n\n Para a maioria das pessoas, o Elementor ser\u00e1 tudo o que voc\u00ea necessitar\u00e1, pois ele permite que voc\u00ea personalize cores, tipografia, texto, espa\u00e7amento, bordas e mais.<\/p>\n\n Se voc\u00ea deseja ir ainda mais longe e adicionar novo conte\u00fado \u00e0 sua p\u00e1gina de finaliza\u00e7\u00e3o de compra, voc\u00ea tamb\u00e9m pode fazer uso dos ganchos de a\u00e7\u00e3o incorporados do WooCommerce, que s\u00e3o totalmente compat\u00edveis com o widget de Finaliza\u00e7\u00e3o de Compra do Elementor.<\/p>\n\n O melhor de tudo \u00e9 que o Elementor n\u00e3o se limita apenas \u00e0 personaliza\u00e7\u00e3o da p\u00e1gina de finaliza\u00e7\u00e3o de compra.<\/p>\n\n O Construtor WooCommerce do Elementor<\/a> tamb\u00e9m pode ajud\u00e1-lo a personalizar outras partes de sua loja utilizando o construtor visual e de arrastar e soltar do Elementor. Por exemplo, voc\u00ea tamb\u00e9m pode personalizar a p\u00e1gina do carrinho do WooCommerce, a p\u00e1gina de produto individual do WooCommerce<\/a>, a p\u00e1gina Minha Conta do WooCommerce e mais.<\/p>\n\n Voc\u00ea ainda tem d\u00favidas sobre a personaliza\u00e7\u00e3o de sua p\u00e1gina de finaliza\u00e7\u00e3o de compra do WooCommerce com o Elementor ou ganchos de a\u00e7\u00e3o? Informe-nos nos coment\u00e1rios!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":" Com o novo widget de Finaliza\u00e7\u00e3o de Compra no Elementor Pro, \u00e9 poss\u00edvel agora personalizar completamente a p\u00e1gina de finaliza\u00e7\u00e3o de compra utilizando a interface visual do Elementor e op\u00e7\u00f5es sem c\u00f3digo. Este widget funciona em conjunto com os widgets de Carrinho e Minha Conta do Elementor para auxiliar na concep\u00e7\u00e3o de todas as p\u00e1ginas essenciais de sua loja. Aprenda como utiliz\u00e1-lo, passo a passo.<\/p>\n","protected":false},"author":129304,"featured_media":114192,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[292,368],"tags":[432],"marketing_persona":[47,51,50],"marketing_intent":[49],"class_list":["post-124570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor-pt","category-woocommerce-pt","tag-video"],"acf":[],"yoast_head":"\n\u00cdndice<\/h4>\n\n\n\n
Como Funciona o Widget de Finaliza\u00e7\u00e3o de Compra do Elementor Pro?<\/h2>\n\n
Como Personalizar a P\u00e1gina de Finaliza\u00e7\u00e3o de Compra do WooCommerce Com o Elementor<\/h2>\n\n
1. Edite a P\u00e1gina de Carrinho Padr\u00e3o de Sua Loja no Elementor<\/h3>\n\n
2. Substitua o Shortcode de Finaliza\u00e7\u00e3o de Compra do WooCommerce pelo Widget de Finaliza\u00e7\u00e3o de Compra do Elementor<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-1-delete-checkout-shortcode-1-1024x517.jpg\")
<\/figure>\n\n3. Personalize as Configura\u00e7\u00f5es Gerais de Sua P\u00e1gina de Finaliza\u00e7\u00e3o de Compra<\/h3>\n\n
Geral – Layout de Uma Coluna ou Duas Colunas<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-2-column-layout-1024x516.jpg\")
<\/figure>\n\nDetalhes de Faturamento e Envio<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-3-billing-shipping-fields-1024x532.jpg\")
<\/figure>\n\nInforma\u00e7\u00f5es Adicionais<\/h4>\n\n
Seu Pedido<\/h4>\n\n
Cupom<\/h4>\n\n
Pagamento<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-4-terms-and-conditions-1024x601.jpg\")
<\/figure>\n\nCliente Recorrente<\/h4>\n\n
4. Personalize as Configura\u00e7\u00f5es de Estilo da Sua P\u00e1gina de Checkout<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-5-style-settings-1024x551.jpg\")
<\/figure>\n\nSe\u00e7\u00f5es<\/h4>\n\n
Tipografia<\/h4>\n\n
Formul\u00e1rios<\/h4>\n\n
Resumo do Pedido<\/h4>\n\n
Bot\u00e3o de Compra<\/h4>\n\n
Personalizar<\/h4>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-6-order-summary-1024x508.jpg\")
<\/figure>\n\n5. Ajuste Seu Checkout para Compradores M\u00f3veis<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-7-mobile-design-1024x662.jpg\")
<\/figure>\n\n6. Ajustar Atribui\u00e7\u00f5es de P\u00e1ginas do WooCommerce nas Configura\u00e7\u00f5es do Site, Se Necess\u00e1rio<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-elementor-8-site-settings-1024x503.jpg\")
<\/figure>\n\nComo Personalizar a P\u00e1gina de Finaliza\u00e7\u00e3o de Compra do WooCommerce Com C\u00f3digo<\/h2>\n\n
O Que S\u00e3o Ganchos de A\u00e7\u00e3o de Finaliza\u00e7\u00e3o de Compra do WooCommerce?<\/h3>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/customize-woocommerce-checkout-code-1-hook-locations-1024x998.png\")
<\/figure>\n\nComo Utilizar Ganchos de A\u00e7\u00e3o de Finaliza\u00e7\u00e3o de Compra do WooCommerce<\/h3>\n\n
![](\"trust-badges.png\"\/)
‘<\/p>\n\n![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/trust-badge-in-checkout-widget-1024x692.jpg\"){kind=icon}
<\/figure>\n\nComo Testar Sua P\u00e1gina de Finaliza\u00e7\u00e3o de Compra do WooCommerce<\/h2>\n\n
![\"\"](\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024,h=1024\/blog\/wp-content\/uploads\/2022\/02\/woocommerce-order-test-gateway-for-checkout-page-1024x800.png\")
<\/figure>\n\nInicie a Personaliza\u00e7\u00e3o de Suas P\u00e1ginas WooCommerce Com o Elementor<\/h2>\n\n