WooCommerce: Como alterar a posição do botão “Comprar” na página de produto?

Saiba como mudar a ordem de exibição do sumário de informações dos produtos no WooCommerce.

Não raro, quando estamos trabalhando em um tema para uma loja virtual no WooCommerce, é necessário alterar o leiaute da página interna de produto.

Quando se trata da formatação, basta analisarmos os estilos presentes nas páginas e usar CSS para fazer as alterações necessárias. Mas quando precisamos alterar as posições dos elementos na página? Neste caso, lançamos mão dos ganchos presentes no WooCommerce.

No caso da página de produtos, estamos falando do arquivo content-single-product.php, onde encontramos o seguinte código:

<div class="summary entry-summary">
	<?php
	/**
	* Hook: woocommerce_single_product_summary.
	*
	* @hooked woocommerce_template_single_title - 5
	* @hooked woocommerce_template_single_rating - 10
	* @hooked woocommerce_template_single_price - 10
	* @hooked woocommerce_template_single_excerpt - 20
	* @hooked woocommerce_template_single_add_to_cart - 30
	* @hooked woocommerce_template_single_meta - 40
	* @hooked woocommerce_template_single_sharing - 50
	* @hooked WC_Structured_Data::generate_product_data() - 60
	*/
	do_action( 'woocommerce_single_product_summary' );
	?>
</div>

Este trecho é a seção “summary”, ou seja, um sumário das informações do produto, como vemos na figura abaixo:

Página de produto com o resumo de informações do produto.

A função do_action indica que o gancho do WooCommerce onde são chamadas as funções que exibem as informações se chama woocommerce_single_product_summary. A primeira linha do comentário documenta exatamente isso:

* Hook: woocommerce_single_product_summary

Dessa forma, qualquer coisa que se quiser que apareça nessa seção deve ser adicionada por meio de uma função associada a esse gancho.

As linhas que seguem descrevem as funções que estão enganchadas em woocommerce_single_product_summary por padrão e a sua ordem de chamada. A função que estamos buscando é woocommerce_template_single_add_to_cart, que é a função que exibe o botão “Comprar”.

No comentário, podemos ver que ela é chamada na ordem 30. Ela vem depois da função woocommerce_template_single_excerpt, que exibe a descrição resumida do produto e está na ordem 20.

Se quisermos mover o botão para antes dessa descrição, basta chamar a função woocommerce_template_single_add_to_cart ANTES, ou seja, em uma ordem que seja menor que 20.

Para isso, vamos usar remove_action para desenganchar a função e anular o comportamento padrão, para depois usar add_action para adicionar o botão antes da descrição curta do produto.

Então, vamos lá: adiciona esse código simples no functions.php ou via um plug-in:

/* Move o botão Comprar para logo depois do preço. */

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 15 );

O resultado será este:

Resumo de informações do produto com o botão sobre a descrição resumida.

Pronto! Simples e rápido, não?

Buenas, gostaste desse artigo? Foi útil para teu trabalho? Então compartilha na tua rede e deixa um comentário!

O que significa “slug” no WordPress?

Um dos termos mais comuns quando a gente começa a trabalhar com o WordPress, principalmente quando pensamos em SEO, é SLUG.

O WP Glossary, de Anders Nóren, define slug assim:

Um slug é um texto inteligível de um URL que representa um post, página, tag ou categoria, usualmente construído a partir do título do conteúdo que ele representa.

Talvez não seja tão óbvio, mas o segredo da definição é “inteligível”, ou seja, fácil de entender, mas também fácil de lembrar.

O WordPress se destaca justamente pela capacidade de gerar URLs claras e fáceis de entender tanto por humanos quanto por computadores, especialmente os motores de busca, como o Google, Bing e DuckDuckGo.

Para facilitar a nossa vida, o WordPress já gera automaticamente um slug para nossas páginas e artigos, a partir de seu título. Então um texto que tem um título “Código é poesia” no meu blogue, poderia ter um slug como esse: marcoandrei.com/codigo-e-poesia.

A palavra slug, em Inglês, tem origem no Jornalismo. “Slug” é uma ou mais palavras que identificam uma notícia específica de uma edição entre os profissionais da redação. No Brasil, a tradução desse termo seria “retranca”.

Mas um slug no WordPress não identifica só um texto ou página. Um slug é uma palavra ou uma sequência de palavras que ajudam a identificar um elemento do WordPress de maneira  intuitiva e inequívoca.

Ele é usado e aparece mais obviamente quando vamos trocar os links permanentes das páginas de nosso sítio, mas dentro da programação do WordPress, também usamos slugs para identificar, de maneira única, outros elementos como widgets, instâncias de tipos personalizados de post e outros.

 

Como resolver o erro: “Parece que em sua instalação do PHP está faltando a extensão MySQL, que é requisitada pelo WordPress.”

Problemas depois de atualizar teu WordPress em uma hospedagem Locaweb? A solução está aqui.

Uma das reclamações frequentes sobre a hospedagem Locaweb é que a versão padrão do PHP (pelo menos nos planos mais antigos) é a 5.2, já descontinuada há tempos.

Para alguns usuários do WordPress, isso pode não ter sido problema até agora, mas se tu tens preocupação com a segurança do teu sítio, certamente podes ter recebido uma mensagem desagradável ao atualizar o software:

Parece que em sua instalação do PHP está faltando a extensão MySQL, que é requisitada pelo WordPress.

É uma mensagem um tanto criptográfica, afinal de contas, ANTES da atualização, teu sítio rodava normalmente e isso indica que certamente a “extensão MySQL” estava presente, certo?

Pois bem: ainda não pude entender o porquê desse erro exótico, mas se tu és usuário da Locaweb, posso garantir que a solução é simplesmente atualizar a versão do PHP.

Passo-a-passo:

1. Visita o painel de hospedagem da Locaweb em: https://painelhospedagem.locaweb.com.br. Entra com teu usuário e senha.

2. Escolhe o domínio no qual o sítio com erro está hospedado, apertando o botão [Administrar o site], à direita.

3. Nas “Informações gerais”, verás a versão atual do PHP para essa hospedagem. No meu exemplo, eu já tenho a versão 7.1 (atualizada).

4. Clica em “Configurar Versão” e no diálogo que aparece, escolhe a versão mais atualizada que estiver disponível.

5. Feito! Como mágica, teu WordPress vai voltar a funcionar.

Tiveste o mesmo problema com outro provedor? Deixa teu comentário com contando tua experiência!

Ativar o modo de manutenção do WordPress sem um plug-in

Saiba como usar a função interna que é acionada sempre que fazemos as atualizações rotineiras de plug-ins e temas.

Existem diversos plug-ins para o WordPress que nos ajudam a colocar uma tela “em breve” ou “em manutenção” para quando queremos mudar alguma coisa no nosso sítio e sem que os usuários recebam mensagens aleatórias ou tentem algo enquanto se está fazendo a atualização.

O que poucos sabem, no entanto, é que o WordPress já tem essa função embutida no seu núcleo, função essa que é acionada sempre que fazemos as atualizações rotineiras de plug-ins e temas.

Penso que essa é a melhor escolha para quem não quer adicionar mais um penduricalho na sua instalação WP, ao mesmo tempo que se tem uma funcionalidade simples de usar e eficaz.

entendendo o arquivo .maintenance

Primeiramente, é preciso criar um arquivo chamado .maintenance no diretório-raiz da instalação WordPress. É a mesma pasta do arquivo wp-config.php. (O ponto antes do nome do arquivo significa que ele deve ser considerado um arquivo oculto.)

Dentro deste arquivo, vamos adicionar a seguinte linha:

<?php $upgrading = time(); ?>

A variável $upgrading contém uma estampa de tempo que define o período em que o WP estará em modo de manutenção.

Na verdade, o WordPress faz uma verificação (que está em wp-settings.php) de dois passos para acionar o modo de manutenção:

1) O arquivo .maintenance está no diretório-raiz?

2) A condição a seguir é verdadeira?

Hora atual - $upgrading < 10 minutos

Como estabelecemos que $upgrading é sempre a hora atual, ou seja, a condição é sempre verdadeira, o WordPress ficará em modo de manutenção até que se apague o arquivo.

Isso nos leva a outra funcionalidade: acionar o modo de manutenção apenas por um período determinado.

Estudando a fórmula acima, entendemos que $upgrading deverá ter a hora que queremos parar o modo de manutenção MENOS 10 minutos. Ou seja, para ativar durante 40 minutos,  precisamos especificar a hora atual MAIS 30 minutos (40 menos 10):

<?php $upgrading = time() + (30 * 60); /* 30 vezes 60 segundos */ ?>

Usando esta opção, após o período especificado, o WordPress voltará ao ar, mas será mostrada uma mensagem: “A atualização do WordPress falhou — tente realizar atualização novamente” até que se apague o arquivo .maintenance.

A menos que se tenha o período pré-determinado (o que normalmente não acontece), provavelmente o primeiro método será o mais indicado para tua aplicação.

Usar um plug-in certamente é o mais fácil para os neófitos, mas poder configurar o modo de manutenção manualmente é uma boa maneira de aprender um pouco mais sobre o WordPress.