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/”]Download do WooCommerce PagSeguro[/button]

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/”]Baixar o WooCommerce Correios[/button]

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]