14.09.2014

Eliminando o JS do Cálculo de Frete no WooCommerce

O WooCommerce tem por padrão uma função no Cálculo de Frete que prejudica a usabilidade do usuário, neste tutorial vou demonstrar como removê-la.

A animação Toogle em JScript faz com que o Formulário de Cálculo de Frete fique escondido até o usuário clicá-lo.

woocommerce

Qual o problema?

Esta função causa 3 problemas à usabilidade do site:

1. O link não parece um botão.
Isto dificulta para que o usuário entenda que é uma região clicável.

2. O usuário não tem indicação textual.
Não está escrito que o usuário deve clicar na região.

3. Atraso para finalizar a Compra.
Cria-se mais um passo/click ao principal processo e meta do site, que é o de Conclusão de Compra.

 

Retirando a Função Toogle do JS [EDITADO]

Uma maneira mais fácil de desabilitar o toggle, sem inteferir na atualização do WooCommerce, é acrescentar o código abaixo no css do seu tema.

.shipping-calculator-form {display: block !important;}

 

É interessante editar o arquivo shipping-calculator.php para retirar o link.

No shipping-calculator.php, troque:

<h2><a href="#"class="shipping-calculator-button">
<?php _e( 'Calculate Shipping', 'woocommerce' ); ?></a></h2>

Por:

<h2><?php _e( 'Calculate Shipping', 'woocommerce' ); ?></h2>

DICA: Para evitar que a atualização do WooCommerce sobreponha o arquivo, faça uma cópia, e coloque dentro da pasta woocommerce, dentro do seu tema.

Por exemplo: meutema/woocommerce/shipping-calculator.php

 

Resultado

Ao bloquear o toggle, permitimos que o usuário veja todos os formulários de Cálculo de Frete, sem precisar clicar, facilitando a usabilidade e o processo de compra.

  • Por Bibi De Carli

    Designer Gráfica e Digital, trabalhou como Diretora de Arte e Produtora Gráfica em agências de Publicidade. Pós-Graduada em Marketing Online e Mídias Sociais, hoje trabalha como Freelancer e decidiu criar um blog para juntar seus interesses por design e inspiração em um só lugar. :)