Como adicionar um campo de upload personalizado no WooCommerce

Deseja incluir um campo de upload em sua página de checkout? Você veio ao lugar certo. Neste artigo, mostraremos como adicionar um campo de upload personalizado no WooCommerce passo a passo.

Com mais de 5 milhões de downloads ativos, o WooCommerce é a plataforma de comércio eletrônico mais popular do mundo. Quando se trata de criar uma loja online, é a melhor escolha para muitos lojistas e por boas razões. O WooCommerce torna toda a experiência online perfeita e direta para clientes e proprietários de lojas.

Além de ser fácil de configurar e usar, o WooCommerce também vem com vários recursos que oferecem muita flexibilidade. Seja usando plugins ou com um pouco de codificação, você pode adicionar as funcionalidades necessárias para melhorar a experiência de compra e aumentar suas vendas.

Não é nenhum segredo que, para conseguir isso, seu checkout deve ser otimizado e livre de distrações. Uma maneira de melhorar a experiência do usuário é adicionar um campo de upload personalizado à sua loja WooCommerce . Dessa forma, você pode permitir que seus clientes carreguem arquivos durante o processo de checkout e confirmem o pedido imediatamente, em vez de manter a compra pendente até que eles enviem documentação adicional por e-mail.

Antes de entrarmos nos detalhes, vamos entender melhor por que adicionar um campo de upload personalizado à sua loja é uma boa ideia.

Por que adicionar um campo de upload personalizado no WooCommerce?

Existem várias situações em que os compradores podem precisar fazer upload de documentos ao comprar um produto online.

Alguns hotéis podem pedir aos seus clientes que anexem algum tipo de identificação - normalmente um bilhete de identidade ou passaporte - quando reservam online. Em muitos países, os hotéis precisam fornecer informações sobre seus hóspedes à polícia ou às autoridades locais todos os dias, para que possam solicitar um documento de identidade antes de você chegar para acelerar o processo de check-in.

Da mesma forma, alguns sites que vendem passagens aéreas ou de trem on-line exigem que os passageiros carreguem sua identidade ou passaporte durante o processo de reserva. Se você precisar alterar sua passagem, solicitar um reembolso ou reivindicar algum tipo de compensação por atraso, a empresa pode solicitar que você faça o upload de determinados documentos, como passaporte ou identidade, a passagem que você comprou e assim por diante.

Além disso, as lojas online de atacado têm clientes que compram produtos a granel e gastam milhares de dólares em uma única transação. Nesses casos, como medida de segurança, eles podem exigir que os usuários carreguem algum comprovante de identidade.

Além disso, uma loja de roupas que oferece a opção de comprar camisetas personalizadas pode pedir aos clientes que enviem seus próprios designs para que sejam impressos. Para isso, eles precisam permitir que os usuários façam upload de arquivos para que possam fazer upload de seus designs.

Por fim, ter a opção de fazer upload de arquivos é muito útil para lojas que vendem serviços que exigem uma certificação prévia , como mergulho, parapente, etc.

Mesmo que não seja obrigatório em todos os casos, adicionar um campo de upload personalizado à sua página de checkout pode tornar o processo mais fácil e muito mais conveniente para ambas as partes .

Agora que entendemos melhor quando você deve adicionar um campo de upload personalizado à sua loja WooCommerce, vamos ver como fazer isso.

Como adicionar um campo de upload personalizado no WooCommerce

A maneira mais fácil de adicionar um campo de upload personalizado no WooCommerce é usar um plugin. Para esta demonstração, usaremos o Checkout Manager for WooCommerce, uma ferramenta freemium com mais de 90.000 instalações ativas.

Este plugin tem muitos recursos para ajudá-lo a personalizar seu checkout e inclui a opção de adicionar um campo personalizado. Para saber mais sobre todas as funcionalidades que essa ferramenta oferece, confira a página do produto.

Passo 1: Instale o Gerenciador de Checkout para WooCommerce

Primeiro, você precisa instalar o plugin. No painel de administração do WordPress, navegue até Plugins > Adicionar novo.

Em seguida, procure o plugin Checkout Manager for WooCommerce da QuadLayers e clique no botão “ Instalar agora ”. Assim que o plugin estiver instalado, pressione “ Ativar ”.

Agora é hora de configurar o plugin. Vamos começar adicionando um novo campo de upload personalizado à página de checkout do WooCommerce.

Antes disso, vamos ver como fica a página de checkout. Como você pode ver, não há campos que permitam aos clientes fazer upload de arquivos.

Vamos ver como configurar o Checkout Manager para permitir que os compradores adicionem arquivos durante o checkout.

Etapa 2: adicione o campo de upload personalizado na página de checkout do WooCommerce

Em seu painel do WordPress , navegue até WooCommerce > Checkout. Lá você encontrará todas as configurações do Gerenciador de Checkout.

Vá para a guia Checkout e vá para a seção Adicional para abrir as configurações de campos adicionais.

NOTA : Neste exemplo, adicionaremos o campo na seção Adicional, mas você pode adicioná-lo à Cobrança, Frete ou qualquer seção do checkout que desejar, bastando para a área correspondente na guia Checkout.

No canto direito, você verá um menu suspenso que permite selecionar a posição em que deseja exibir esses campos adicionais. Clique no botão “ Adicionar novo campo ” para começar a criar um novo campo adicional.

Configurar o campo de upload personalizado

Depois disso, você irá para uma nova página com um menu de configurações. Aqui você pode especificar os parâmetros para o campo que deseja adicionar. Como queremos adicionar um campo de upload personalizado, selecione Arquivo em Tipo e defina o rótulo personalizado e o texto do botão. Em seguida, pressione “ Salvar ”.

Depois de criar alguns campos adicionais, você pode gerenciar os diferentes parâmetros no menu de configurações de campos adicionais. Esses parâmetros incluem:

• Reposição: você usa as setas para cima e para baixo para mover um campo para cima ou para baixo. Como alternativa, você pode clicar e arrastar o ícone de três linhas horizontais para reposicionar um campo.
• Obrigatório: A ativação do campo obrigatório torna o campo obrigatório. Isso significa que o usuário não pode continuar até preencher esse campo.
• Posição: Você pode selecionar a posição na qual deseja exibir o campo. Há três opções para escolher: esquerda, direita ou ampla.
• Limpar: habilitar isso não permite que qualquer outro campo apareça à esquerda ou à direita desse campo específico.
• Desabilitar: Ao marcar o botão desabilitar, esse campo específico não será exibido na página de checkout.
• Editar e Excluir: Como o nome sugere, você pode editar ou excluir um determinado campo clicando no respectivo botão.

Depois de configurar todas as configurações, salve as alterações.

Agora vamos dar uma olhada no nosso site a partir do front-end para ver as mudanças. Como você pode ver, agora há um botão para fazer upload de arquivos. Dos 2 campos personalizados que criamos, apenas o Campo de Teste está ativado e não é obrigatório, por isso aparece como opcional na página de checkout.

É isso! Veja como é simples adicionar um campo de upload personalizado no WooCommerce. Usando este botão, os clientes podem fazer upload de qualquer arquivo ou até mesmo fazer upload de vários arquivos durante o processo de checkout. Os arquivos enviados serão salvos na página de pedidos junto com outros detalhes do pedido. Além disso, você poderá gerenciar todos os arquivos que os usuários carregam por meio do painel de pedidos do administrador.

Mas isso não é tudo que você pode fazer com o Checkout Manager. Ter um checkout otimizado é fundamental para aumentar as taxas de conversão, portanto, você deve exibir apenas os campos que o cliente deve preencher para concluir o pedido. Vamos ver como você pode adicionar campos condicionais que só aparecem quando uma determinada condição é atendida.

Bônus: adicione um campo condicional no WooCommerce

Um campo condicional tem duas partes: um campo pai e um campo filho. O campo filho depende da entrada do campo pai. Isso significa que não é visível por padrão, mas aparece quando o campo pai assume um valor específico.

Por exemplo, se você deseja adicionar um campo de upload personalizado à sua loja WooCommerce que só será necessário em circunstâncias específicas, a melhor solução é criar um campo condicional para que o campo apareça apenas quando necessário.

Faremos isso em duas etapas. Primeiro, perguntaremos ao usuário se ele deseja fazer upload de um arquivo ou não. Se eles disserem “Sim”, e só então, o campo de upload de arquivos ficará visível. Neste exemplo, nossa primeira pergunta será o campo pai e o botão de upload de arquivos será o campo filho.

Agora que sabemos o que é um campo condicional, vamos ver como adicioná-lo ao WooCommerce usando o plugin Checkout Manager.

Crie um campo condicional com o Checkout Manager

Primeiro, vamos adicionar o campo pai. Seguindo o mesmo exemplo, vamos adicioná-lo à seção Adicional, mas você pode adicioná-lo em Cobrança, Frete ou em qualquer seção do checkout que desejar.

Vá para WooCommerce> Checkout, vá para a guia Checkout e abra a seção Adicional . Pressione o botão “ Adicionar novo campo ” e defina os parâmetros para o campo pai. Usando o exemplo acima, escolheremos Selecionar como o "Tipo" e adicionaremos um rótulo personalizado e um texto de espaço reservado.

Em seguida, vá para a guia Opções no lado esquerdo e defina todas as opções possíveis que o usuário pode selecionar. Neste exemplo, estamos fazendo uma pergunta ao usuário que só pode ter duas respostas: “Sim” ou “Não”. Como a resposta a esta pergunta não adiciona nenhum custo extra (como entrega rápida ou envio internacional, por exemplo), definimos o preço como 0. Depois de configurar todos os parâmetros, salve as alterações.

Crie o campo filho

Em seguida, você precisa criar o campo filho -o campo de upload personalizado- e configurar os parâmetros condicionais.

Para fazer isso, crie um campo, defina o tipo, o rótulo e o espaço reservado para o botão. Em seguida, vá para a seção direita e marque a caixa “ Ativar o requisito de campo condicional ”. Depois disso, escolha o campo que você acabou de criar na etapa anterior como o campo pai e selecione o valor do campo pai para o qual o campo filho deve ser ativado. Neste caso, queremos apenas exibir o arquivo de upload quando o usuário responder “Sim” à primeira pergunta.

Quando terminar, lembre-se de salvar as alterações.

É isso! Agora você configurou com sucesso um campo condicional na sua página de checkout do WooCommerce.

Agora vá para sua página de checkout e verifique se o campo condicional funciona corretamente. Inicialmente, apenas o campo pai será exibido, mas se você selecionar “Sim”, o botão de upload de arquivos aparecerá.

Para obter mais informações sobre como adicionar campos condicionais ao WooCommerce, consulte nosso guia completo.

Conclusão

Em suma, adicionar um campo de upload personalizado no checkout do WooCommerce pode ser útil, pois permite que seus clientes carreguem os arquivos necessários durante o processo de checkout.

Pode haver várias situações em que os usuários podem precisar fazer upload de arquivos ou imagens. Por exemplo, verificação de identidade para reservas de hotéis on-line, na compra de passagens aéreas, design personalizado para roupas, troca ou reembolso de itens ou serviços que exigem certa certificação. É por isso que permitir que seus compradores carreguem arquivos no checkout torna todo o processo mais simples e conveniente.

Neste artigo, discutimos:

• Benefícios de adicionar um campo de upload personalizado
• Instruções passo a passo sobre como adicionar um campo de upload personalizado no WooCommerce com o Checkout Manager
• O que são campos condicionais e como eles funcionam
• Como você pode adicionar um campo condicional no WooCommerce para otimizar o checkout

Você adicionou um campo de upload personalizado à sua loja? Você conhece algum outro método que devemos incluir? Deixe-nos saber nos comentários abaixo!