WooCommerce: Pagar.me

WooCommerce: Pagar.me

Já faz algum tempo que desenvolvi este plugin, mas até o momento não estava com muito tempo livre para publicar um post sobre ele, então vamos lá.

O que é o Pagar.me?

O Pagar.me é um gateway de pagamento desenvolvido por Henrique Dubugras e Pedro Franceschi em 2013. E apesar de ser uma startup bem nova, vêm nos últimos tempos acumulando diversos prêmios:

Quais as vantagens de usar o Pagar.me?

Atualmente eu acredito que o Pagar.me é o melhor gateway de pagamento brasileiro, possuindo checkout transparente, integração com antifraude da ClearSale e com uma ótima e estável API para receber pagamentos por cartão de crédito e boleto bancário.

Outra coisa que todo mundo provavelmente vai gostar são as taxas do Pagar.me, onde você pode conferir em Pagar.me > Preços.

Para quem tem um volume honesto de vendas por mês, chega uma hora que fica impossível utilizar gateways como o PagSeguro, onde quase 7% do valor total do pedido é perdido em taxas… Chega uma hora que você não pode mais perder tanto dinheiro assim, além da demora para conseguir receber o dinheiro.

Outra diferença do Pagar.me com a maioria dos outros gateways que todo mundo esta acostumado a utilizar é que o Pagar.me faz intermédio direto entre a sua empresa e com a as operadoras de cartão de crédito, com isso o nome da sua empresa aparece na fatura do cartão de crédito do cliente e assim evitando susto e pedidos de chargeback, seu cliente vai saber exatamente que aquele valor foi em uma compra feita em sua loja.

Quando eu vi algumas noticias sobre o Pagar.me e também algumas pessoas comentando no Facebook, além é claro, de ler a API e ter gostado bastante, eu fiz questão de entrar em contato com os desenvolvedores e criar a integração para o WooCommerce. Fiz sem cobrar nada porque eu realmente gostei e acredito que quem utiliza o WooCommerce merece um gateway assim. Provavelmente esse meu e-mail assustou um pouco o Henrique (alias estou devendo de me encontrar com eles pessoalmente qualquer dia em São Paulo e conhecer a instalação da empresa) xD.

Enfim, já é uma ótima introdução para o gateway de pagamento, então vamos a instalação do plugin:

Instalando e configurando o WooCommerce Pagar.me

Para instalar você precisa e claro estar utilizando o WooCommerce na sua instalação do WordPress e também o plugin Extra Checkout Fields for Brazil, com tudo instalado você deve acessar o dashboard e ir em Plugins > Adicionar novo e pesquisar por “WooCommerce Pagar.me”, finalmente instale e ative o plugin.

Na página da sua conta no Pagar.me clique no menu “minha conta” e depois na opção “API Keys”.

pagarme-minha-contaNa próxima página copie as chaves de API, depois vá até WooCommerce > Configurações > Finalizar compra > Pagar.me, ative o método de pagamento e preenche os campos Chave de API do Pagar.meChave de Criptografia do Pagar.me.

woocommerce-pagarme

Ainda é possível configurar como você deseja que seja o comportamento do parcelamento com cartão de crédito.

E tudo pronto, você já pode começar a receber pagamentos utilizando o Pagar.me.

money

Conheça o tema Storefront, o melhor tema gratuito com suporte para WooCommerce

Na semana passada o WooThemes lançou o tema Storefront que é um tema totalmente gratuito e integrado com o WooCommerce.

storefront-catalog

O Storefront foi desenvolvido utilizando o tema base Undescores, seguindo todas as boas praticas de desenvolvimento de temas, além que irá servir para um modelo de integração e construção de temas para o WooCommerce.

Apesar dele não possuir toda aquela parafernália de sliders, shortcodes, page builders e etc, o motivo para isso é o problema que todo mundo sofre ao alterar um tema, perdendo tudo o trabalho feito, desta forma você pode deixar estas funcionalidades para plugins que você preferir.

Entretanto o tema ainda é muito poderoso e totalmente customizável, contando com uma enorme quantidade de opções de cores no menu “Aparência > Customizar”.

storefront

Além do WooCommerce o tema já tem integração com alguns plugins:

Também já é planejado dar suporte para várias outras extensões do WooCommerce.

Com tudo isso fica claro que ele vai servir como um padrão para a construção de temas para o WooCommerce, facilitando totalmente o desenvolvimento e garantindo a compatibilidade para uma grande lista de extensões.

E por final o WooThemes ainda esta vendendo alguns plugins premiuns especiais para o Storefront:

  • Parallax.
  • Editor visual para as páginas do WooCommerce.
  • Editor visual para as páginas de blog.

Você pode compra-los no site do WooThemes.com na sessão de extensões para o Storefront.

Posso adiantar que já estão sendo desenvolvidas mais algumas extensões que devem ser lançadas em breves e vocês também podem sugerir novas extensões para o Storefront no WooCommerce Ideas.

[button link=”http://demo2.woothemes.com/storefront” style=”info”]Demo[/button] [button link=”http://www.woothemes.com/storefront/” style=”download”]Download[/button]

Seja lá se você for utilizar o Storefront ou desenvolver o seu tema por cima dele, uma coisa é certa, sua loja vai ser um sucesso!

WooCommerce: Conheça algumas das mudanças visuais da versão 2.3

WooCommerce: Conheça algumas das mudanças visuais da versão 2.3

Um dos principais objetivos da versão 2.3 do WooCommerce é inovar a interface do plugin, então conheça agora algumas das mudanças visuais que iremos ter:

No frontend muita coisa foi alterada, seguindo a linha de design flat, desta forma o tudo ficou mais bonito e também moderno.

Flat design? Flat design é mágica!

shia-magic

Enfim, confira uma lista de algumas coisas que foram alteradas:

  • Mensagens
  • Botões
  • Abas
  • Mensagem de loja de demonstração
  • Badge de produto em oferta
  • Widget de filtro por preço
  • Caixa de seleção de método de pagamento
  • Posição do botão “Finalizar pedido” na página do carrinho.
  • Removido os botões de selecionar quantidade em favor do input do tipo number do HTML5
  • Widget do carrinho agora permite remover os produtos
  • Algumas tabelas agora são responsivas (exemplo a de pedidos na página “Minha Conta”)
  • Removido os gifs animados de carregamento em favor de ícones em fonte utilizando animação em CSS3
  • Suporte para o tema Twenty Fifteen

Aqui alguns exemplos das mudanças:

catalogo-woocommerce-2.3

carrinho-WooCommerce-2.3

mensagens-woocommerce-2.3

Além disso tivemos algumas outras mudanças com o funcionamento, como por exemplo agora ao remover um produto do carrinho é exibida uma mensagem avisando sobre a remoção do item e com um link que permite repor o produto ao carrinho caso você removeu ele por engano.

No backend tivemos algumas mudanças e pequenas melhorias, como por exemplo na aba “Produtos” dentro de “Configurações”, onde é possível encontrar mais sessões com os conteúdos melhor organizados, além disso melhoramos a interface do menu “Status do sistema” implementando sessões que deixam bem mais simples de visualizar e entender ele.

menu-produtos-woocommerce-2.3

Por final, vale já falar que removemos as opções de “Design do Frontend” que permitiam alterar as cores de alguns elementos do WooCommerce, esta opção saiu do core para fazer parte de um plugin que irá trazer novidades para essa funcionalidade utilizando a “Theme Customization API”, que vai permitir você ver as alterações sendo feitas igual você faz com as opções que vocês já estão acostumados no menu “Aparência > Customizar” do WordPress 🙂

Vale avisar que temos ainda um longo caminho até terminar a versão 2.3 e algumas coisas que estou mostrando agora podem sofrer algumas alterações!

Eu sinceramente estou querendo fazer algumas melhorias no carrinho, juntando o calculo de frete com a parte onde aparece os valores, assim ficando bem mais intuitivo para os usuários, mas por enquanto como eu falei, eu estou apenas querendo, é uma vontade que vai depender ainda de tempo livre para adicionar isso ainda nesta versão.

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