WooCommerce: Trabalhando com CSS da forma correta a partir da versão 2.3

Ao construir um tema para funcionar junto com o WooCommerce é extremamente importante trabalhar da forma correta com CSS, assim você evita problemas com atualizações ou com estilos que não sobrescrever corretamente o CSS do WooCommerce.

Desde a versão 2.1 do WooCommerce a forma de trabalhar com CSS mudou um pouco e agora na versão 2.3 mudamos de Less para Sass e ainda utilizando a biblioteca Bourbon, o que é ótimo, pois abre uma infinidade de possibilidades de personalização sem precisar alterar muito código.

Este tutorial tem como finalidade ensinar como trabalhar com Sass no WooCommerce 2.3 que deve ser lançado no começo de 2015, com isso já deixando todo mundo preparado como fazer isso, mas é claro, vocês podem utilizar algumas das dicas deste tutorial nas versões 2.1 e 2.2.

Trabalhando com CSS da forma correta no WooCommerce:

Primeiro de tudo certifique-se de instalar Sass no seu computador, existem vários métodos para fazer a instalação (onde eu particularmente prefiro por linha de comando), veja como instalar seguindo o tutorial de instalação do Sass e é claro, certifique também de instalar o Bourbon.

Finalmente com tudo instalado você deve baixar o WooCommerce 2.3 (esta versão não foi lançada ainda até a data de publicação deste post, como eu já informei acima), copie todos os arquivos da pasta woocommerce/assets/css/ para o seu tema, por exemplo em uma pasta chamada inc/woocommerce/css.

Com isso no functions.php do seu tema você será capaz de registrar onde estão os novos arquivos e com isso desativar os estilos do plugin:

E pronto, agora o WooCommerce já sabe que deve carregar os arquivos que estão no seu tema e isso irá sobreviver a qualquer atualização.

Agora basta trabalhar com Sass, você pode até mesmo automatizar as tarefas utilizando Grunt e para alterar todo o esquema de cores do WooCommerce é possível pelo arquivo _variables.scss 🙂

WooCommerce PagSeguro 2.7.0

WooCommerce PagSeguro 2.7.0

Este release foi pequeno e grande ao mesmo tempo, porque não foram feitas grandes mudanças, mas que permitem vocês personalizarem o plugin da forma que achar melhor.

No caso é possível agora personalizar o formulário do Checkout Transparente e também da página que aparece o Lightbox de pagamento.

Isso foi possível utilizando a API de templates do WooCommerce, no caso vocês podem copiar os arquivos que estão dentro do plugin na pasta templates e criar dentro do seu tema a pasta woocommerce/pagseguro/ e colar os arquivos para modificar da forma que vocês julgarem melhor.

Download

[button link=”http://wordpress.org/plugins/woocommerce-pagseguro/”%5DDownload do WooCommerce PagSeguro[/button]

WooCommerce Correios 2.1.1

WooCommerce Correios 2.1.1

A partir da versão 2.1.0 do WooCommerce Correios é possível personalizar os e-mails de notificação sobre o código de rastreio dos Correios.

Para isso foi utilizada a API de e-mails do WooCommerce onde agora você pode ter controle total de como a mensagem é exibida:

screenshot-5

No caso basta continuar colocando o código de rastreio no metabox dos Correios dentro do seu pedido e salvar o pedido.

correios-codigo-de-rastreamento

Desta forma o e-mail é enviado utilizando os tempaltes de e-mail do WooCommerce e já aparece com os dados do pedido, aqui uma previa de como fica o começo do e-mail (o resto é igual de quando o pedido é feito, pago e etc):

correios-previa-do-email

Além disso é possível personalizar o e-mail não apenas pelas configurações, mas também como criando um arquivo de template para ele como indicado na primeira imagem e também como é feito com qualquer outro e-mail do WooCommerce. Basta conferir as opções do e-mail que é possível encontrar o código padrão do template e como fazer isso.

Outra novidade desta vez é que é possível criar o template woocommerce/single-product/correios-simulator.php para personalizar o HTML do simulador de frete na página do produto. Você pode encontrar o código do template atual aqui.

Foram corrigidos erros do simulador também que deve funcionar agora com qualquer tema e em qualquer navegador.

De resto vocês podem conferir as novidades acessando o changelog do plugin.

Download

[button link=”http://wordpress.org/plugins/woocommerce-correios/”%5DBaixar o WooCommerce Correios[/button]

WooCommerce: PagSeguro versão 2.6.0

WooCommerce: PagSeguro versão 2.6.0

Fiz algumas mudanças no WooCommerce PagSeguro para que seja mais tranquilo utilizar o plugin.

As alterações foram:

  • Melhorei os itens enviados para o PagSeguro, agora são adicionado os fee e também são listas as taxas separadas.
  • Adicionei a opção “Enviar apenas o total do pedido” que permite enviar o total do pedido no lugar da lista de itens, isso daqui vai ajudar com compatibilidade com alguns plugins, como por exemplo o WooCommerce Composite, WooCommerce Payment Fees e outros.

Download

[button link=”http://wordpress.org/plugins/woocommerce-pagseguro/” window=”yes”]Baixar WooCommerce PagSeguro[/button]

OBS.: Vou publicar agora sempre um post avisando sobre versões Major ou Minor de todos os meus plugins, desta forma ajuda todo mundo se manter atualizado e saber o que esta acontecendo (não vou publicar sobre versões Patch, para isso o Changelog dentro do WordPress já deve ser mais do que o necessário).

WooCommerce: PagSeguro com Checkout Transparente

WooCommerce: PagSeguro com Checkout Transparente

Depois de um tempo desenvolvendo finalmente esta pronta a versão 2.5.0 do WooCommerce PagSeguro com o tão esperado Checkout Transparente.

Com o Checkout Transparente é possível que o cliente faça todo o pagamento dentro da sua loja WooCommerce sem precisar sair para nada (claro, vai ter o link do boleto ou para fazer o debito online no site do banco), além que no e-mail do pedido é enviado os dados sobre o pagamento em cartão de crédito ou como pagar usando boleto bancário e debito online e assim fazendo a integração mais completa possível.

Screenshots

Vejam como ficou:

screenshot-4

screenshot-5

screenshot-6

Instalação e configuração

Para instalar basta seguir os passos do guia de instalação do plugin.

Muito importante notar que agora é obrigatório ter os campo de CPF e o número e bairro do endereço, como o WooCommerce não tem isso de forma nativa é necessário utilizar o plugin WooCommerce Extra Checkout Fields for Brazil.

Agradecimentos

Preciso agradecer ao Leandro Matos que ajudou com o layout e ícones do Checkout Transparente e também a todas as pessoas que colaboraram com o projeto fazendo doações.

Download

[button link=”http://wordpress.org/plugins/woocommerce-pagseguro/” window=”yes”]Baixe o WooCommerce PagSeguro com Checkout Transparente[/button]

WooCommerce: Adicionar a Cielo como método de pagamento

WooCommerce: Adicionar a Cielo como método de pagamento

Já existe uma solução para adicionar a Cielo como método de pagamento feita a quase um ano atrás pelo Gabriel Reguly, o plugin funcionava bem nas versões 2.0.x do WooCommerce, mas precisava de alguns ajustes para funcionar com as versões 2.1.x.

Com isso eu me disponibilizei para ajudar a desenvolver uma nova versão do plugin e mantê-lo atualizado. E hoje esta pronta a versão 3.0.0 do Cielo WooCommerce.

O que mudou?

Todo o código do plugin foi atualizado para trabalhar bem com as versões 2.0.x e 2.1.x do WooCommerce, além de que o plugin teve a sua API atualizada para a versão 1.3.0 da Cielo.

Principais alterações:

  • Atualizada a API da Cielo para a versão 1.3.0.
  • Adicionada ação de cancelar a transação (devolver o dinheiro) ao marcar o pedido como “reembolsado”.
  • Adicionada novas formas de exibir o formulário com os cartões de crédito e parcelas disponíveis.
  • Adicionado suporte para os cartões JBC e Aura.
  • Adicionada opção de pagamento por débito para o MasterCard.
  • Adicionada uma mensagem informando o cartão, forma de pagamento (crédito ou débito) e quantidade de parcelas nas notas do pedido ao concluir o pagamento.
  • Adicionado filtro wc_cielo_form_path, que torna possível customizar o formulário de seleção do cartão e de parcelas.

Novas opções para o formulário no checkout:

screenshot-2
Novo formulário padrão
screenshot-3
Opção do formulário com ícones

Download

É possível baixar a nova versão pelo repositório oficial do WordPress.org ou simplesmente fazer a atualização para a versão 3.0.0, caso você já utilize o plugin hoje.

[button link=”http://wordpress.org/plugins/cielo-woocommerce/” style=”download” window=”yes”]Baixar o plugin Cielo WooCommerce[/button]

WooCommerce: Como customizar a exibição dos preço de produtos variáveis

Não é todo mundo que fica feliz com a forma que aparecem os preços de produtos variáveis quando temos dois produtos com preços diferentes no WooCommerce

A exibição normalmente é do menor para o maior da seguinte forma:

produto-variavel-preco-normal

Como tudo no WooCommerce isto é bem simples se ser alterado e podemos fazer isso com a ajuda do filtro woocommerce_variable_price_html, aqui um exemplo de como mostrar o preço como “A partir de R$ XX,XX”:

O resultado deste código é:

produto-variavel-menor-preco

Além disso é possível exibir do menor preço para o maior, entretanto com um pouco mais de “estilo”:

Exibindo os preços como:

produto-variavel-menor-para-maior-preco

Estes códigos irão funcionar apenas com o WooCommerce 2.1.x ou qualquer outra versão mais recente, então não adianta chorar que não vou dizer como fazer isso com versões antigas 😉

WooCommerce – Sandbox do PagSeguro

WooCommerce – Sandbox do PagSeguro

A pouco tempo o PagSeguro lançou o seu tão esperado Sandbox, que por enquanto esta em “beta”, mas funciona bem até onde eu pude testar.

Já possível utilizar o Sandbox do PagSeguro no WooCommerce PagSeguro, pois acabei de fazer a integração hoje, desta forma a versão 2.4.0 do plugin já conta com o checkout em Lightbox e com o Sandbox.

Quem já utiliza o WooCommerce PagSeguro basta fazer a atualização para utilizar os novos recursos e para quem não instalou ainda é possível baixar:

[button link=”http://wordpress.org/plugins/woocommerce-pagseguro/” style=”download” window=”yes”]Baixar o WooCommerce PagSeguro[/button]

Aguarde por mais novidades!
Em breve estarei integrando também com o novo checkout transparente.

WooCommerce – Alterar o botão de “adicionar ao carrinho”

No WooCommerce existem uma infinidade de filtros e ganchos que lhe permitem fazer personalizar qualquer coisa e aqui neste post vou ensinar como alterar o texto e o link do botão de “Adicionar ao carrinho”.

[box type=”alert”]Atenção: este tutorial vai funcionar apenas para WooCommerce 2.1 ou superior![/box]

Este botão no catalogo de produtos pode ter os nomes:

  • “Comprar” – produto simples
  • “Ver opções” – produto com variáveis
  • “Ver produtos” – grupo de produtos

Os nomes funcionam muito bem, entretanto para algumas pessoas isso não é o ideal, ainda mais quando você pretende usar o WooCommerce apenas como um catalogo de produtos.

Enfim, para alterar o texto do botão podemos usar o filtro woocommerce_product_add_to_cart_text:

Isso altera o texto para todos os botões do catalogo de produto, mas se você quiser alterar por tipo de produto você ainda pode usar:

Já na página do produto podemos utilizar o filtro woocommerce_product_single_add_to_cart_text que vai trabalhar exatamente da mesma forma que o woocommerce_product_add_to_cart_text e por isso os exemplos a cima irão funcionar da mesma forma, bastando apenas trocar o nome do filtro.

Entretanto se você pretende usar o WooCommerce apenas como um catalogo de produtos é provável que o carrinho seja totalmente dispensável.
Desta forma você não pode adicionar o produto no carrinho direto do catalogo e muito menos na página do produto.

Para isso o melhor é alterar totalmente o HTML do botão, no catalogo usaremos o filtro woocommerce_loop_add_to_cart_link:

Assim o visitante será levado diretamente para a página do produto toda vez que ele clicar no botão na página do catalogo.

Agora você pode simplesmente remover o botão dentro da página do produto usando o gancho woocommerce_single_product_summary:

Sinceramente eu acredito o melhor quando você pretende apenas ter um catalogo para exibir os seus produtos é fazendo isso diretamente criando um Post Type no WordPress e arrumar o resto no layout, porque o WooCommerce tem muitas ferramentas que você não vai precisar, entretanto eu entendo que os temas prontos do WooCommerce deve ser com certeza o motivo de escolher ele para fazer isso… Realmente acaba sendo muito rápido fazer isso, como exemplo aqui neste tutorial que alterando um filtro e removendo um gancho já temos tudo configurado.