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”:

[gist id=”d0b405a5de74d0f47570″]

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”:

[gist id=”b07e5c34bd40d0f52a43″]

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

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:

[gist id=”3d493aefd37beb5748de”]

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:

[gist id=”b3b437c16acd8e4987db”]

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:

[gist id=”bf3e4a2cc362a8033a7e”]

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:

[gist id=”01e5a0c7f7992515e5b3″]

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.

WooCommerce Domination – Deixe o WooCommerce dominar o seu WordPress!

Dependendo do projeto que você vai desenvolver não existe logica deixar destacado as opções de blog do WordPress e deixar escondido as da loja do WooCommerce.

Isso sempre foi algo que me incomodou usando WooCommerce e desta forma desenvolvi um plugin para fazer o WooCommerce dominar o WordPress.

O plugin destaca os menus de pedidos, relatórios, clientes, produtos e cupons, além de adicionar botões na barra superior (admin bar), sendo possível ver a quantidade de produtos processando ou acessar diretamente o menu de relatórios. Com isso deixamos a parte de posts, mídia, paginas e comentários em segundo plano.

Aqui uma imagem de como vai ficar o menu lateral e a barra superior:

woocommerce-domination

Atenção: Para utilizar este plugin você deve usar o WooCommerce 2.1.0 ou superior, não funciona com versões anteriores e eu não vou fazer funcionar simplesmente porque eu quero que todos atualizem para os últimos releases, se não gostou pega eu!

Instalação:

Para mais detalhes sobre a instalação visite o nosso tutorial de instalação no WordPress.

Dúvidas sobre o plugin?

Visite a nossa FAQ no WordPress, entre em contato ou deixe um comentário a baixo.

Links para Download:

[button_download href=”wordpress.org/plugins/woocommerce-domination/”]Wordpress[/button_download] [button_download href=”http://github.com/claudiosmweb/woocommerce-domination”]GitHub[/button_download]

WooCommerce – Campos personalizados no formulário de cadastro

Agora com o WooCommerce 2.1.0 ficou bem mais simples adicionar campos customizados no formulário de cadastro.

No caso é o cadastro que pode ser feito na página “Minha conta”, que pode ser ativado em WooCommerce > Configurações > Conta com a opção Habilitar registro na página “Minha Conta”.

Aqui um exemplo de como adicionar os campos para Nome e Sobrenome.

https://gist.github.com/claudiosanches/8337185

Utilizei o gancho woocommerce_register_form_start para adicionar os campos antes do e-mail e da senha, mas é possível usar também woocommerce_register_form para adicionar no final.
Observe que estes ganchos estão disponíveis apenas nos modelos de templates do WooCommerce 2.1.0 ou superior, caso não funcione com o seu tema pronto, você vai precisar atualizar o seu template (myaccount/form-login.php).

É possível determinar o alinhamento dos novos campos com as classes form-row-first (alinha para esquerda), form-row-last (alinha para direita) e form-row-wide (centraliza com apenas um campo por linha).

No exemplo validei os novos campos com o gancho woocommerce_register_post e finalmente salvei no banco de dados com woocommerce_created_customer.
Nota: foi atualizado o campo first_name e last_name que são nativos do WordPress, junto com billing_first_name e billing_last_name que são os campos de nome e sobrenome para pagamento do WooCommerce.

Veja como ficou o exemplo:

woocommerce-minha-conta-campos-personalizados

Da para fazer isso também com versões antigas do WooCommerce, mas exige um pouco mais de trabalho e usar ganchos do WordPress… Isso eu não vou ensinar (pode chorar o quanto quiser xD), caso você queria utilizar o que estou ensinando aqui atualize para a última versão do WooCommerce!

Pretendo em breve escrever mais coisas que é possível fazer agora com o WooCommerce 2.1.0.

Usando Gulp com WordPress para automatizar tarefas

Para quem não conhece, Gulp é um task runner (automatizador de tarefas) que funciona com NodeJS, tornando possível diversas taferas, como compilar arquivos SASS para CSS, comprimir arquivos JavaScript e imagens, fazer deploy e etc.

Ele é similar ao Grunt, entretanto o jeito que ele funciona o torna similar ao Fabric do Python e Rake do Ruby, ficando bem simples de entender as tasks que estão sendo criadas.

Você pode usar o Gulp com praticamente qualquer projeto, principalmente com o WordPress e aqui vou mostrar como é simples fazer isso usando SASS, validando e comprimindo arquivos JavaScript e ainda otimizando imagens.

Requirimentos:

É necessário instalar o NodeJS: http://nodejs.org/download/.
Depois já é possível instalar o Gulp com o comando:

[gist id=”8308531″ file=”install_gulp.sh”]

Criando seu arquivo package.json:

Agora crie dentro do seu tema uma pasta chamada src que iremos usar para deixar o Gulp e separá-lo dos arquivos principais do seu tema e o arquivo package.json com o seguinte conteúdo:

[gist id=”8308531″ file=”package.json”]

O package.json possui todas as dependências de desenvolvimento do projeto.
Altere no seu tema os campos name, description, version e title.

Instalando as dependências do projeto:

Dentro da pasta src rode o comando a seguinte para baixar as dependências do projeto:

[gist id=”8308531″ file=”npm_install.sh”]

gulpfile.js do projeto:

Agora para que seja possível criar suas tasks e executá-las você precisa de um arquivo gulpfile.js, para este exemplo usaremos o seguinte:

[gist id=”8308531″ file=”gulpfile.js”]

Neste arquivo descrevemos cada tasks criando uma função com gulp.task()

Tasks do projeto:

Então agora temos as seguintes tasks:

  • scripts – Valida e comprime todos os arquivos JavaScript.
  • sass – Compila todos os arquivos SCSS do projeto.
  • optimize – Otimiza todas as imagens.
  • watch – Assiste alterações nos arquivos de JavaScript e SCSS para processar as tasks scripts e sass.
  • default – Task padrão que compila todos os arquivos de JavaScript e SCSS.

Para mais detalhes sobre o funcionamento de cada task consulte as documentações:

Alterações no seu tema:

Como já pode ser possível observar no exemplo, utilizamos uma pasta src para os arquivos do Gulp e uma outra pasta assets na raiz do tema que irá conter todos os estáticos do projeto.

Ficando a seguinte estrutura de diretório:

[gist id=”8308531″ file=”tree”]

Desta forma usaremos o style.css da raiz do tema apenas para registrar o tema no seu WordPress e para os estilos usaremos o assets/css/style.css.

Então podemos registrar todos os scripts e alterar o caminho do CSS do tema pelo functions.php:

[gist id=”8308531″ file=”functions.php”]

E pronto, agora estamos carregando corretamente o arquivos de JavaScript e CSS do tema.

Exemplo:

[button_download href=”https://github.com/claudiosmweb/wordpress-gulp-theme-boilerplante/archive/master.zip”]Download[/button_download] [button_download href=”https://github.com/claudiosmweb/wordpress-gulp-theme-boilerplante”]Código no GitHub[/button_download]

Referências:

WooCommerce – Criar novas abas para os produtos.

Criar novas abas para as páginas de produtos do WooCommerce é muito simples.

Basta utilizar o filtro woocommerce_product_tabs para isso, veja um exemplo:

[gist id=”7188170″]

Criamos uma funçao chamada cs_register_woocommerce_product_tab(), onde ela recebe o parametro $tabs, este parametro carrega as abas que já existe no WooCommerce e com um array adicionamos a nossa aba.

Os parametros para criar a nova aba são:

  • title – Título da aba
  • priority – Prioridade, ordem que a aba vai aparecer
  • callback – Função callback que será responsável por exibir o conteúdo da aba.

As abas nativas do WooCommerce tem os seguintes valores para priority:

  • Descrição/Description = 10
  • Informação adicional/Additional Information = 20
  • Avaliações/Reviews = 30

Desta forma configurando como 60 faz com que a nossa aba apareça por último, entretanto poderíamos ter usado 15 para aparecer entre “Descrição” e “Informação adicional” (ou “Avaliações” caso o produto não possua informações para ela).

A função callback deve ser usada para exibir o conteúdo da aba, sendo possível você pode chamar as variáveis globais $post ou $product para auxiliar na composição do conteúdo.

E ainda é possível remover as abas nativas da seguinte forma:

[gist id=”7999681″]

Plugins atualizados para o WooCommerce 2.1

A versão final do WooCommerce 2.1 deve ser lançada em breve, hoje já é possível testar a versão beta 2  deste novo release.
Muita coisa mudou no código, entretanto apenas uma parcela bem pequena pode dar problema com algum tema ou plugin, desta forma recomendo fazer testes antes de atualizar.

Vai valer muito apena atualizar para a nova versão, pois ela tem integração total com o novo tema do admin do WordPress, relatórios melhorados, foram simplificadas as telas de configurações do plugin e como falei, o código foi reformulado e esta muito melhor e mais rápido.

Acompanhando a nova versão na semana passada atualizei os seguintes plugins:

Todos eles estão funcionando perfeitamente com a versão 2.0 ou superior do WooCommerce.

Com essas mudanças foi abandonado o suporte para as versões 1.6.6 e anterior, pois são versões muito antigas (de um ano atrás) e até mesmo extensões do site do WooThemes não estão mais dando suporte.

Também estou ajudando na tradução do WooCommerce pelo Transifex Oficial do WooThemes (faltam umas 80 palavras do admin, quem quiser ajudar basta entrar na equipe de tradução e traduzir).

Agradeceria muito quem poder testar os plugins com a nova versão do WooCommerce (seja o beta que temos agora ou as versões RCs que deve sair logo) e me dizer se encontrou algo errado.

Gosta do meu trabalho?

[button_class class=”icon-gift” href=”https://claudiosmweb.com/doacoes/”]Me pague uma cerveja então![/button_class]