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 – 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.

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”%5DGitHub%5B/button_download%5D

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.

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:

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:

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:

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:

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:

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:

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”%5DDownload%5B/button_download%5D [button_download href=”https://github.com/claudiosmweb/wordpress-gulp-theme-boilerplante”%5DCódigo no GitHub[/button_download]

Referências: