Aqui na Origgami, desenvolvemos muitos sites utilizando o Woocommerce. E durante nossa etapa final de testes, comecei a notar que na página de checkout acontecia sempre o mesmo incômodo, alguns campos já apareciam como inválidos mesmo antes de se digitar qualquer coisa.

Campo inválido no checkout do woocommerce

Em alguns casos o telefone e o estado ficam marcados como inválidos

Campo inválido no checkout do woocommerce

As vezes o campo inválido é somente o telefone

Isso não causava nenhum erro. O usuário mesmo assim pode completar a compra sem problemas, mas com certeza é no mínimo um incômodo e pode gerar confusão criando um incentivo para o abandono do carrinho e isso é algo que não queremos.

Percebi que isso acontecia devido a utilização de plugins que alteram ou adicionam campos no checkout de alguma forma, como o Woocommerce Extra Checkout FIelds for Brazil por exemplo.  Aliás este é um plugin que sempre usamos.

Pra resolver esse problema pensamos numa maneira forçada de remover a invalidez dos campos por javascript mesmo. Use esse trecho de código no seu functions.php e pronto

//Remove os campos invalidos do checkout
add_action('wp_footer', 'fixInvalidCheckoutFields', 999);
function fixInvalidCheckoutFields() {
	if(is_checkout()){
	?>
	<script>
		jQuery(window).load(function(){
			jQuery('.form-row').removeClass('woocommerce-invalid woocommerce-invalid-required-field');
		})
	</script>	
	<?php
	}
}

 

Isso te ajudou em alguma coisa? Percebeu algo de errado? Então comenta aí!