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 🙂

Blogging for Hippo

Ano passado algumas pessoas que trabalham no WooThemes.com fizeram uma competição chamada Blogging for Benjamin proposta pelo Daniel Espinoza, onde o objetivo era publicar um post por dia durante um mês.

[box type=”note”]If you speak only English, you can use Google Translate.
Sorry, but unfortunately right now I’m too lazy to create a blog in English ;)[/box]
Foi algo muito interessante, pois eu mesmo consegui aprender várias coisas com os posts do Mike Jolley e do Coen Jacobs.

Este ano o Bryce Adams propôs um novo desafio chamado Blogging for Hippo, este nome é em homenagem ao WooCommerce 2.3 (que deve sair talvez ainda este ano), teremos um hipopótamo bonitão como mascote 😉

Regras do desafio:

  • Começa hoje. Agora mesmo.
  • É até o Natal, assim que o último post deve ser no dia 24 de dezembro.
  • Mensagens podem ser agendadas para o futuro, mas não publicado com data de um dia anterior.
  • As postagens devem ser de pelo menos 250 palavras.
  • Pode ser sobre qualquer coisa.
  • Pontos de Bônus! Você deve tentar incluir um GIF em cada post.
  • Não há prêmios, só orgulho para os vencedores.

Quem esta participando:

Além disso você pode seguir os posts pelo Twitter com a hashtag #bloggingforhippo.

Finalmente vou voltar a publicar com mais frequência aqui no meu blog e é claro, todo mundo vai publicar em inglês, apenas eu em português (porque eu estou com preguiça de instalar plugin para adicionar outra lingua aqui e que eu sei que se eu publicar em inglês vocês vão ficar pedindo tradução :P), mas não deixem de ler o blog de todo mundo, utilizem o Google Tradutor e vamos nessa!

Como é possível observar nas regras, os temas são livres e com isso vou aproveitar e contar um pouco do desenvolvimento e novidades do WooCommerce 2.3, desta forma consigo realmente honrar o nome do desafio (mas não vou me limitar apenas nisso também).

Até amanhã!

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