O WooCommerce é a plataforma de comércio eletrônico mais popular e “mais personalizável para construir seu negócio online”.

Podes baixar o WooCommerce gratuitamente, mas de facto, só começas a ver o potencial deste recurso quando começa instalares os plugins e tema do WordPress WooCommerce.

Mas precisas mesmo usar um tema WooCommerce?

Embora não seja obrigatório, recomenda-se.

Os temas do WooCommerce não são apenas centrados no comércio eletrônico por design, todo o tema é centrado nos estilos do WooCommerce. O CSS que o WooCommerce usa para definir como os produtos são exibidos é então usado pelo tema WordPress WooCommerce para realmente reunir tudo, criando algumas das vitrines de comércio eletrônico mais bem projetadas.

Sem mencionar o fato de que instalar e configurar um novo tema WordPress WooCommerce não é mais difícil do que configurar qualquer outro tema WordPress.

O Eric Dye vai te explicar como instalares o tema WP Ecommerce. 

Como instalar e configurar um novo tema WordPress WooCommerce

Se já tens o WooCommerce instalado, óptimo! Caso contrário, recomendo o Guia para iniciantes de Rachel McCollin para usar o WooCommerce . Isso irá apresentá-lo ao WooCommerce e guiá-lo por todas as etapas necessárias para colocar sua loja online em funcionamento.

Agora vamos começar com como instalar e configurar um novo tema WordPress WooCommerce.

Etapa 1: instalar dados fictícios

Se já adicionates os produtos ao WooCommerce, recomendo pular esta etapa e começar com a etapa 2.

A instalação de dados fictícios adiciona produtos fictícios na vitrine da tua loja online para o ajudar a visualizar como fica a loja com produtos. Depois de concluir a instalação e configurar o novo tema WordPress WooCommerce, poderás excluir todos os dados fictícios antes de adicionar os produtos. Caso contrário, corres o risco de excluir acidentalmente os dados do seu próprio produto.

Os dados fictícios estão incluídos no plugin WooCommerce. Se instalaste o WooCommerce no WordPress Admin, vá em frente e baixe o plug-in do Diretório de plug-ins do WordPress para o teu computador. Isso será mais fácil do que entrar no seu FTP, entrar no diretório do plugin e baixar os dados fictícios de lá.

Quando o download estiver concluído, descompacte o arquivo para que esteja pronto para que importes o arquivo dummy-data.xml.

Vá para as Ferramentas e clique em Importar :

Não deixe que as “Taxas de imposto WooCommerce (CSV)” te confunda. Isso pode ser feito mais tarde, caso queiras. Para os dados fictícios do WooCommerce, deves escolher WordPress .

Muito provavelmente não terás o plugin WordPress Importer instalado, então vá em frente e instale agora .

Uma vez instalado, vá em frente e Active o Plugin & Run Importer .

Lembras-te em que link baixaste e descompactaste o plugin WooCommerce? Excelente! Agora só precissa clicar em Escolher arquivo e fazer o teu caminho até ao ficheiro.

Os teus dados fictícios devem estar na pasta descompactada: (woocommerce.version.number) > woocommerce > dummy-data.

Abra a pasta dummy-data, selecione dummy-data.xml e  estarás pronto para carregar o arquivo e importar.

Esta é a última coisa que precisas fazer antes de importar todos os dados fictícios.

Parte disso é preferência pessoal, mas aqui está o que eu faço (captura de tela mais abaixo):

Importe o autor padrão “wooteam” em vez de criar um novo autor ou usar um autor preexistente. Dessa forma, sabes que conteúdo foi importado/criado neste processo com base no nome do autor (recomendo excluir o autor ao remover os dados fictícios após terminar de instalar e configurar seu novo tema WordPress WooCommerce).

Eu também recomendo que baixe e importe anexos para que tenhas imagens associadas a cada produto (mais uma vez, certificar-te de que a mídia seja removida quando terminar com os dados fictícios).

Depois de fazer essas selecções, envie:

Visite yourwebsite.com/shop/ e você verá uma loja de teste totalmente importada:

Não é muito bem projectado, não é? Ainda bem que vamos instalar um lindo tema WordPress WooCommerce  como o Savoy .

(OBSERVAÇÃO: Depois de instalar e configurar seu tema, não se esqueça de excluir os produtos e imagens da importação de dados fictícios antes de começar a adicionar seus próprios produtos.)

Passo 2: Instale um tema WordPress WooCommerce

Agora, vamos ver como instalar o tema WooCommerce. Se ainda não baixaste o tema WordPress eCommerce, baixe-o para o teu computador.  

Existem duas maneiras diferentes de instalar seu tema:

1. Acesse seu site usando FTP
2. Do administrador do WordPress

FTP seu tema

Se estiveres confortável a usar FTP, vá em frente e conecte-se ao seu servidor e vá para o diretório wp-content > themes . É aqui que deves colocar o tema. Antes de instalares a pasta descompactada para o servidor, certifique-se de que é pasta dp tema. Vamos dar uma olhada mais de perto usando nosso exemplo de tema WordPress de ThemeForest .

Depois de descompactar o download, você verá que há várias pastas diferentes:

Nem todos os temas que baixares serão empacotados deste modo. Às vezes, a pasta compactada que baixas é a pasta do tema real. É sempre uma boa ideia verificar novamente, pois isso varia de lugar para lugar.

O Tema Savoy – Minimalista AJAX WooCommerce inclui algumas coisas extras como documentação, recursos, etc. Se você procurar na pasta Arquivos de Tema do Savoy, encontrará seu tema (savoy.zip).

Se você estiver instalando via FTP, vá em frente e carregue sua pasta de temas descompactada (por exemplo: “savoy”) no diretório de temas. Se você não tem certeza sobre como usar o FTP ou prefere instalar a partir do WordPress Admin, tudo bem. Eu prefiro usar o WordPress Admin também.

A instalação de um tema WordPress a partir do Admin requer que a pasta do tema seja compactada (themefolder.zip). Como discutimos anteriormente, deves ter certeza que de facto estás a trabalhar com a pasta do tema real e não com a pasta na qual seu tema pode estar empacotado.

No Administrador do WordPress, em Aparência , clique em Temas :

Adicionar novo tema:

Carregar tema:

Lembras-te onde está localizado o arquivo zip do seu tema?

(Nosso tema de exemplo é intitulado: savoy.zip)

Clique em Escolher arquivo e vá até ele:

Uma vez instalado, podes ir em Aparência > Temas em seu WordPress Admin para ver se está instalado ou clicar para activá-lo imediatamente.

Como podes ver (abaixo), o tema Savoy foi instalado com sucesso, então passe o mouse e active :

Agora que seu tema WordPress WooCommerce foi instalado e ativado com sucesso, vamos configurá-lo.

Etapa 3: configurar um tema WordPress WooCommerce

Nem todo tema é personalizado exactamente da mesma forma. A forma como um tema é projectado e desenvolvido é um factor preponderante, então pode haver algumas diferenças entre este tutorial e o tema que venhas a escolher. 

De um modo geral, no entanto, isso deve ajudá-lo a configurar seu tema WordPress WooCommerce – não importa qual tema WooCommerce você esteja usando no ThemeForest ou em qualquer outro lugar.

Plug-ins recomendados/obrigatórios

Depois de instalar e activar o tema Savoy , serás notificado sobre os plugins recomendados:

Às vezes,  o teu tema poderá notificar-te sobre plugins recomendados, enquanto outros incluem recomendações na própria documentação. Pode haver funções de design de tema – como controles deslizantes opcionais – que não são codificadas no tema, mas são acomodadas.

Clique em Começar a instalar plugins  no tema Savoy para ver a lista de plugins recomendados:

Novamente, isso varia de tema para tema, mas, neste caso, podes ou não  instalar todos eles.

Por exemplo, embora o Savoy recomende o Formulário de contacto 7 e inclua um estilo para ele, talvez não queiras usar este plug-in para seu formulário de contacto. Podes querer usar algo como Gravity Forms ou Ninja Forms .

Um plugin como o Regenerate Thumbnails é um excelente plugin para quem tem uma loja já configurada e tem suas imagens configuradas para um tema anterior. Este plugin passará pela sua biblioteca de mídia do WordPress e redimensionará todas as suas imagens para funcionar com seu novo tema. 

Pode ou não querer fazer isso com os dados fictícios e pode querer pular este plugin completamente (mas eu recomendo fazê-lo de qualquer maneira, para que toda a mídia seja dimensionada correctamente para fins de teste).

Um plugin como o Envato Toolkit, no entanto, é muito importante para temas adquiridos através do ThemeForest, garantindo que sejas notificado sobre actualizações de temas.

Eu recomendaria instalar todos os plugins recomendados quando começares. Sempre podes remover um plug-in mais tarde se não o precisares, contudo, caso não instales um plug-in necessário, poderás ficar frustrado mais tarde porque o tema poderá não“funcionar” ou acontecer algo estranho.

Depois de instalares todos, alguns ou nenhum dos plugins recomendados e/ou necessários, não se esqueça de activá-los:

Se estiveres a usar um tema comprado do ThemeForest, como nosso tema de exemplo Savoy, não se esqueça de inserir o teu nome de usuário do Marketplace e chave de API secreta no Envato WordPress Toolkit para garantir actualizações adequadas do tema.

Esta é a parte em que deves instalar e configurar o tema WordPress WooCommerce… A coisa começa a ficar muito divertida a  ver seu site ganhar vida.

Podes aceder o WordPress Customizer no menu do WordPress: Aparência > Personalizar . Ou vá para a página Temas em Aparência > Temas e clique no botão Personalizar :

Bem-vindo ao Personalizador do WordPress:

Aqui é onde faremos alguns ajustes antes de entrar numa configuração mais profunda.

A primeira coisa que verás é a Identidade do Site . É aqui que podes alterar o título e o slogan do site.

Às vezes, é aqui que também podes adicionar uma imagem de cabeçalho personalizada e/ou ícone do site (isso varia de tema para tema).

Em seguida, configure seus menus:

Se esta é uma nova configuração do WooCommerce ou se não criaste nenhuma página, pode não haver muito para “personalizares”. Com o WooCommerce instalado, no entanto, fica automaticamente adicionadas algumas páginas que tenho certeza que desejas adicionar ao seu menu imediatamente.

Podes facilmente adicionar e criar um novo menu:

Depois de adicionar um menu (ou vários), podes seleccionar o local em que o menu deve aparecer, bem como os diferentes itens de menu (como links personalizados, postagens, páginas, produtos etc.).

Isso te dá muita flexibilidade com a forma como gostarias que seu site WooCommerce funcionasse. Não tenhas medo de brincar com ele ou alterá-lo mais tarde.

Antes de sairmos do WordPress Customizer, você deve dizer ao WordPress para tornar a página inicial sua loja:

Marcar a página inicial, esta é exibida como uma página estática  e seleccione a página inicial  para ser sua página da loja . A página da Loja foi criada automaticamente quando  instalaste o plugin WooCommerce.

Quanto à página Posts , isso depende em que local do site desejas ter um blog. Nesse caso, precisarás criar uma página de blog e selecioná-la nesta página do WordPress Customizer ou em WordPress Admin Settings > Reading .

Os resultados

Com alguma configuração básica, podes ver o quão boa sua loja online pode ficar usando um tema WordPress WooCommerce:

As páginas de produtos individuais parecem incríveis:

Inclui ainda produtos relacionados:

O tema Savoy – Minimalist AJAX WooCommerce permite que você ajuste facilmente muitos elementos em seu site e pode ir muito além de qualquer coisa que abordei neste tutorial (leia a documentação do seu tema para saber mais sobre seu tema especificamente). Mostrei apenas as alterações que podem ser feitas no WordPress Customizer e geralmente podem ser feitas em praticamente qualquer tema que você esteja usando.

Conclusão

Podes ver claramente como esses primeiros passos iniciais na configuração do seu novo tema WordPress WooCommerce podem ser fáceis e quão bom ele parece – simplesmente por usar um tema WordPress projectado especificamente para WooCommerce.

Existem muitos plugins WordPress WooCommerce úteis disponíveis no CodeCanyon e alguns temas WordPress WooCommerce lindamente projectados e eficazes no ThemeForest .

Olhar para alguns dos temas mais vendidos do ThemeForest WooCommerce pode ser um bom lugar para começar (o Savoy ainda é o meu favorito). Tenho certeza de que você encontrará algo que se encaixa perfeitamente na sua loja de comércio eletrônico. 

Eric Dye