Após a nova atualização do Woocommerce para a versão 3.5, muitas pessoas andam relatando um problema em que os campos do checkout não estão aplicando as máscaras.

Por que do problema?

O javascript responsável por chamar a função de “máscaras” só é aplicado quando há uma mudança no campo “País”, na verdade o correto seria aplicar as máscaras caso o país selecionado seja o Brasi, ou tenha alguma mudança no campo “País” e o mesmo seja o Brasil.

A solução

Aqui vai uma solução rápida e prática para solucionar esse problema.

Dentro da pasta: wp-content/plugins/woocommerce-extra-checkout-fields-for-brazil/assets/js/frontend/

Altere os arquivos frontend.js e frontend.min.js

frontend.js

Após a linha 22 acrescente ao código:

 if ( 'BR' === $( '#billing_country' ).val() ) {
wc_ecfb_frontend.maskBilling();
}

 

frontend.min.js

Como esse arquivo está comprimido é melhor enviar o arquivo todo, segue o código comprimido com a alteração:

jQuery(function(e){var i={init:function(){"0"===wcbcf_public_params.sort_state_country&&e(document.body).on("country_to_state_changing",this.country_to_state_changing),"0"!==wcbcf_public_params.person_type&&this.person_type_fields(),"yes"===wcbcf_public_params.maskedinput&&("BR"===e("#billing_country").val()&&i.maskBilling(),e(document.body).on("change","#billing_country",function(){"BR"===e(this).val()?i.maskBilling():i.unmaskBilling()}),e(document.body).on("change","#shipping_country",function(){"BR"===e(this).val()?i.maskShipping():i.unmaskShipping()}),this.maskGeneral()),"yes"===wcbcf_public_params.mailcheck&&this.emailCheck(),"yes"===wcbcf_public_params.addresscomplete&&(this.addressAutoComplete("billing"),this.addressAutoCompleteOnChange("billing"),this.addressAutoComplete("shipping"),this.addressAutoCompleteOnChange("shipping")),e().select2&&e(".wc-ecfb-select").select2()},country_to_state_changing:function(){e("#billing_state_field label").html(wcbcf_public_params.state+' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>'),e("#billing_postcode_field").insertAfter("#billing_country_field"),e("#shipping_state_field").length&&(e("#shipping_state_field label").html(wcbcf_public_params.state+' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>'),e("#shipping_postcode_field").insertAfter("#shipping_country_field"))},person_type_fields:function(){"no"===wcbcf_public_params.only_brazil?(e(".person-type-field label .required").remove(),e(".person-type-field").addClass("validate-required"),e(".person-type-field label").append(' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>')):e("#billing_country").on("change",function(){"BR"===e(this).val()?(e(".person-type-field label .required").remove(),e(".person-type-field").addClass("validate-required"),e(".person-type-field label").append(' <abbr class="required" title="'+wcbcf_public_params.required+'">*</abbr>')):(e(".person-type-field").removeClass("validate-required"),e(".person-type-field label .required").remove())}).change(),"1"===wcbcf_public_params.person_type&&e("#billing_persontype").on("change",function(){var i=e(this).val();e("#billing_cpf_field").hide(),e("#billing_rg_field").hide(),e("#billing_company_field").hide(),e("#billing_cnpj_field").hide(),e("#billing_ie_field").hide(),"1"===i&&(e("#billing_cpf_field").show(),e("#billing_rg_field").show()),"2"===i&&(e("#billing_company_field").show(),e("#billing_cnpj_field").show(),e("#billing_ie_field").show())}).change()},maskBilling:function(){i.maskPhone("#billing_phone, #billing_cellphone"),e("#billing_birthdate").mask("00/00/0000"),e("#billing_postcode").mask("00000-000"),e("#billing_phone, #billing_cellphone, #billing_birthdate, #billing_postcode").attr("type","tel")},unmaskBilling:function(){e("#billing_phone, #billing_cellphone, #billing_birthdate, #billing_postcode").unmask().attr("type","text")},maskShipping:function(){e("#shipping_postcode").mask("00000-000").attr("type","tel")},unmaskShipping:function(){e("#shipping_postcode").unmask().attr("type","text")},maskGeneral:function(){e("#billing_cpf, #credit-card-cpf").mask("000.000.000-00"),e("#billing_cnpj").mask("00.000.000/0000-00"),i.maskPhone("#credit-card-phone")},maskPhone:function(i){var l=function(e){return 11===e.replace(/\D/g,"").length?"(00) 00000-0000":"(00) 0000-00009"},n={onKeyPress:function(e,i,n,t){n.mask(l.apply({},arguments),t)}};e(i).mask(l,n)},emailCheck:function(){e("#wcbcf-mailsuggest").length<1&&e("#billing_email").after('<div id="wcbcf-mailsuggest"></div>'),e("#billing_email").on("blur",function(){e("#wcbcf-mailsuggest").html(""),e(this).mailcheck({suggested:function(i,l){e("#wcbcf-mailsuggest").html("Você quis dizer: "+l.full+"?")}})}),e("#wcbcf-mailsuggest").css({color:"#c00",fontSize:"small"})},addressAutoComplete:function(i){if(e("#"+i+"_postcode").length){var l=e("#"+i+"_postcode").val().replace(".","").replace("-",""),n=e("#"+i+"_country").val(),t=e("#"+i+"_address_1").val();""!==l&&8===l.length&&"BR"===n&&0===t.length&&e.ajax({type:"GET",url:"//correiosapi.apphb.com/cep/"+l,dataType:"jsonp",crossDomain:!0,contentType:"application/json",success:function(l){""!==l.tipoDeLogradouro?e("#"+i+"_address_1").val(l.tipoDeLogradouro+" "+l.logradouro).change():e("#"+i+"_address_1").val(l.logradouro).change(),e("#"+i+"_neighborhood").val(l.bairro).change(),e("#"+i+"_city").val(l.cidade).change(),e("#"+i+"_state option:selected").attr("selected",!1).change(),e("#"+i+'_state option[value="'+l.estado+'"]').attr("selected","selected").change(),e("#"+i+"_state").trigger("liszt:updated").trigger("chosen:updated")}})}},addressAutoCompleteOnChange:function(l){e(document.body).on("blur","#"+l+"_postcode",function(){i.addressAutoComplete(l)})}};i.init()});

 

Ou se preferir pode baixar os dois arquivos atualizados aqui: FIX-WC3.5.woocommerce-extra-checkout-fields-for-brazil.zip

Espero ter ajudado, dúvidas ou sugestões deixem nos comentários.

4 COMENTÁRIOS

  1. Me ajudou bastante Juliano!

    Mas por algum motivo não está funcionando no Celular, saberia dizer por que?

    Abraço,

    Victor

  2. No meu infelizmente não funcionou. Está todo desalinhado e faltando a label de complemento de endereço.
    Abraços!

    • Bom dia Leonardo, esse tutorial é para corrigir o problema das máscaras, quanto ao desalinhamento eu estou verificando e tentando ajustar, assim que estiver ok vou postar um tutorial também.

  3. Show! Funcionou perfeitamente.

    Para a questão do campo de complemento, utilizei uma jogada de CSS.

    Já que o que desalinha o campo é a falta de um titulo, inclui uma margem no topo pra compensar.

    ——
    #billing_address_2 {
    margin-top: 2.1em;
    }
    —–

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here