Arquivos WordPress - Página 2 de 3 - Marco Andrei Kichalowsky

WooCommerce: como adicionar um produto e finalizar a compra direto

Como fazer para que o cliente clique em “Comprar” e vá direto para o checkout, preenchendo seus dados para finalizar a compra?

Em algumas lojas virtuais, temos poucos ou apenas UM produto, de modo que queremos que o cliente clique em “Comprar” e vá direto para o checkout, preenchendo seus dados para finalizar a compra.

No WooCommerce isso é feito criando-se um URL do tipo “add to cart”, que terá o código do produto em questão.

O primeiro passo então, é obter o código do produto. Isso pode ser visto na opção “Produtos” do admin do WP.

O código de produto (ID) aparece quando se passa o cursor sobre o produto

Na lista de produtos, podemos ver o código (ID) quando se passa o cursor sobre o item desejado. No exemplo acima, o código do produto “Suporte veicular para celular” é 3491.

Depois, precisamos da página de finalização de compra. Na maioria das vezes, tua loja vai usar a página criada automaticamente pelo WooCommerce. Em Português, essa página se chama “Finalizar Compra”, com o slug finalizar-compra. Outro slug bem comum é checkout.

Com estes dados, podemos construir o URL desejado, que terá o seguinte formato:

nomedatualoja.com/finalizar-compra/?add-to-cart=<codigo-do-produto>

Por exemplo:

marcoandrei.com/loja/finalizar-compra/?add-to-cart=3491

O URL redireciona para finalizar a compra, já com o produto no carrinho

Para testar é só copiar esse URL na barra de endereço e pronto! A página Finalizar Compra é carregada já com o produto no carrinho, como vemos acima.

Nota que para esse endereço funcionar, a opção “Redirecionar ao carrinho após uma adição bem-sucedida” tem que estar DESLIGADA. Isso porque o parâmetro add-to-cart obviamente adiciona um item ao carrinho.

Sendo assim, se a opção estiver LIGADA, o WooCommerce vai redirecionar o comprador para o carrinho, que é o resultado diferente do que desejamos.

Tu podes encontrar essa opção no menu WooCommerce > Configurações > Produtos.

A opção “Redirecionar ao carrinho após uma adição bem-sucedida” precisa estar desligada

E é isso.

Ficaste com alguma dúvida? Tens uma observação a fazer? Manda teu comentário aí embaixo!

Até a próxima!

Como remover itens e seções do Personalizador do WordPress?

Quando criamos um tema personalizado, não raro temos opções presentes no Personalizador do WordPress (Theme Customizer) que serão ignoradas e não produzirão resultado prático no visual do sítio. Sendo assim, é mais conveniente que essas opções sejam removidas, já que poderão confundir o usuário.

Para começar, a classe que gerencia tudo que envolve o Personalizador se chama WP_Customize_Manager e o objeto criado em execução é $wp_customize.

Há 4 tipos de objetos no Personalizador: Panels (painéis), Sections (seções), Settings (Configurações/Ajustes) e Controls (controles). Neste artigo, vamos ver os dois primeiros.

Quando entramos no Personalizador temos um monte de linguetas/abas. Elas podem ser ou uma seção ou um painel, que contêm os diversos controles para se manipular as configurações.

Quando usamos uma seção ela só permite adicionar controles dentro dela. “Identidade do site” e “Cores” são itens implementados como uma seção.

Já um painel permite que se adicione seções dentro dele. “Menus” e “Widgets” são itens implementados como um painel.

Vamos ver a lista de seções e painéis presentes no WordPress:

Título	Tipo	ID	Ordem
Identidade do site	seção	title_tagline	20
Cores	seção	colors	40
Imagem do cabeçalho	seção	header_image	60
Imagem de fundo	seção	background_image	80
Menus	painel	nav_menus	100
Widgets	painel	widgets	110
Configurações da página inicial	seção	static_front_page	120
CSS adicional	seção	custom_css	200

Para se remover uma seção, usamos o método remove_section. Para remover um painel, o método remove_panel.

Finalmente, vamos a um exemplo de código. Cria um plugin ou adiciona este trecho no arquivo functions.php do teu tema:

function remove_itens_personalizador( $wp_customize ) {
  // Remove a seção "Imagem de fundo"
  $wp_customize->remove_section( 'background_image');
  // Remove o painel "Menus"
  $wp_customize->remove_panel( 'nav_menus');
  // Remove a seção "CSS adicional".
  $wp_customize->remove_section( 'custom_css');
}
add_action( 'customize_register', 'mytheme_customize_register',50 );

Simples, não? É isso.

Se tens algo a acrescentar ou tens alguma dúvida, comenta aí embaixo para a gente trocar uma ideia.

Até o próximo!

Como criar um link para enviar mensagem no WhatsApp

É fácil construir o URL para mandar uma mensagem diretamente para qualquer número

Com a popularização do WhatsApp, também tornou-se comum querer ter junto às redes sociais, um ícone para enviar uma mensagem diretamente para o aplicativo.

A maneira de construir o URL é bastante fácil e segue o seguinte modelo:

https://wa.me/numero-do-telefone

Por exemplo:

https://wa.me/5551999999999

sendo: “55” código internacional do Brasil, “51” código de área e depois o número em questão.

Também pode-se pré-definir uma mensagem padrão, no estilo: “Olá! Gostaria de saber mais sobre esse produto.”.

Para adicionar esta mensagem, usa-se o parâmetro “text”, assim:

https://wa.me/5551999999999?text=Gostaria%20de%20saber%20mais%20sobre%20o%20produto

(“%20” é código para espaço em branco.)

Simples, não?

Ao clicar no ícone, o telefone do usuário já vai abrir o app automaticamente com essa mensagem pronta para ser enviada para o número.

No computador, se o usuário tiver o aplicativo instalado, ele será aberto com a mensagem; se não, será aberta uma janela simples.

Tu conheces outro método para enviar mensagens para o WhatsApp? Tens outras ideias e dicas para implementar isso no WordPress? Deixa teu comentário aí embaixo!

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!