Como traduzir a data no formulário do Elementor

Neste tutorial vou mostrar como traduzir a data no formulário do Elementor utilizando um código customizado de PHP dentro do child theme.

Você já viu vários sites no Brasil com botões ou campos de preenchimento em inglês, correto?

Pode ser um pouco de perfeccionismo, mas na hora de entregar o projeto para o cliente eu procuro traduzir todas as palavras dentro do site.

Acho que perde um pouco a credibilidade do site que possui elementos não traduzidos para a língua nativa.

Porém, o problema com a tradução do módulo de formulário do Elementor Pro vai além de simples estética…

O formato de data é (yyyy/mm/dd) ao invés de (dd/mm/yyyy)!

O pior – eu só fui perceber isso dias antes de entregar o projeto para meu cliente.

Fiz uma pesquisa rápida na internet e não encontrei nenhuma postagem sobre o assunto no fórum do WordPress ou no GitHub.

Como vários países utilizam o formato (dd/mm/yyyy) – eu vi a importância de ter o formulário traduzido e alterado para o formato de data que o web designer quiser.

Então, abri um chamado de suporte no GitHub do Elementor:

Confira o chamado de suporte clicando aqui.

Depois de várias interações com os desenvolvedores via fórum e email, conseguimos chegar na solução.

É fato que os web designers que utilizam a versão Pro do Elementor irão precisar traduzir em algum momento a data do formulário para o formato correto.

Portanto, muito justo eu documentar a solução para toda a comunidade Elementor brasileira! ❤👨‍💻

Vou mostrar para você passo a passo o que eu fiz para conseguir traduzir o formulário.

Preparei um vídeo explicando na prática o processo caso surja alguma dúvida.

Vídeo sobre como traduzir a data no formulário do Elementor

3 Etapas para traduzir a data no formulário do Elementor

O vídeo acima explica em menos de 4 minutos o conteúdo do tutorial. Siga os passos abaixo para saber todas as etapas necessárias para traduzir o formulário.

Primeiro, copie o código abaixo e cole dentro do functions.php do seu child theme.

add_action('wp_footer', function () {
 if ( ! is_page( 10 ) ) {
 return;
 }
 ?>
 <script>
 jQuery( document ).ready( function( $ ){
 function waitForFlatpicker( callback ) {
 if ( typeof window.flatpickr !== 'function' ) {
 setTimeout( function() { waitForFlatpicker( callback ) }, 2 );
 }
 callback();
 }
 waitForFlatpicker( function(){
 flatpickr.l10ns.pt = {
 weekdays: {
 shorthand: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
 longhand: [
 "Domingo",
 "Segunda-feira",
 "Terça-feira",
 "Quarta-feira",
 "Quinta-feira",
 "Sexta-feira",
 "Sábado",
 ],
 },
 months: {
 shorthand: [
 "Jan",
 "Fev",
 "Mar",
 "Abr",
 "Mai",
 "Jun",
 "Jul",
 "Ago",
 "Set",
 "Out",
 "Nov",
 "Dez",
 ],
 longhand: [
 "Janeiro",
 "Fevereiro",
 "Março",
 "Abril",
 "Maio",
 "Junho",
 "Julho",
 "Agosto",
 "Setembro",
 "Outubro",
 "Novembro",
 "Dezembro",
 ],
 },
 rangeSeparator: " até ",
 };
 //set translations
 flatpickr.localize(flatpickr.l10ns.pt);
 flatpickr('.elementor-date-field');
 //set format
 setTimeout( function(){
 $('.elementor-date-field').each(function(){ flatpickr( $(this)[0] ).set('dateFormat', 'd/m/Y');});
 }, 1000 );
 });
 });
 </script>
 <?php
} );
Code language: JavaScript (javascript)

Em segundo, abra a página do seu formulário de contato no modo de edição com Elementor e copie o ID dela.

E por último, altere o número no começo do código PHP:

if ( ! is_page( 288 ) ) {

Pronto, o formato da data e os nomes dos meses no calendário estão traduzidos!

Atenção: O código acima gera erros no site caso o formulário não esteja presente. Isso aconteceu com o meu cliente quando ele pediu para remover temporariamente o formulário de contato do site.

Lembre-se de remover o código PHP caso remova também o formulário da página.

Conclusão

O que você achou deste tutorial sobre como traduzir a data no formulário do Elementor?

Espero que possa te ajudar a traduzir os meses no calendário e mudar formato da data para o formato convencional no Brasil.

Você precisou fazer isso em algum projeto seu?

Deixe seu comentário e seu feedback.

Eles são sempre importantes para mim.

Obrigado por me acompanhar até aqui.

Abraço e até a próxima!