Adicionar WooCommerce ao Genesis Framework é uma das melhores maneiras de construir um site de comércio eletrônico estável e de execução rápida. Devido à natureza do Genesis Framework, ele apresenta algumas peculiaridades. Neste artigo, vou orientá-lo nas etapas mais importantes do processo de instalação e personalização de sua nova loja.
Você verá o que obtém imediatamente ao instalar o WooCommerce e o Genesis Framework. Ele vem com uma loja com um design muito básico e uma base de código sólida.
Com as estratégias descritas neste artigo, você poderá personalizar cabeçalhos e rodapés em sua nova instalação do WooCommerce para corresponder à sua identidade corporativa, saberá quais plug-ins ajudam a executar o WooCommerce de maneira eficiente com Genesis (e outros temas) e você entenderei como você pode integrar o WooCommerce ao seu próprio tema filho com base no Genesis Framework.
Antes de começarmos, deixe-me dizer uma palavra de advertência. NÃO siga este tutorial em sua loja online ativa, mas configure uma cópia de sua loja ou uma instalação totalmente nova. Começaremos do zero com uma loja que não parece boa no início e provavelmente não combinará nem um pouco com a sua identidade corporativa. Fazer este tutorial em uma loja exposta ao tráfego ao vivo certamente prejudicará seus números de vendas.
O Processo de Instalação
Para processos de demonstração, iniciarei o site de exemplo desta postagem com uma instalação em branco do WordPress em meu ambiente Docker local. Você poderá acompanhar qualquer site WordPress atualizado para a versão recente (4.9.8 no momento da escrita).
Se você ainda não tem um site pronto, recomendo dar uma olhada no plano Hostinger para hospedagem gerenciada WooCommerce. Assim que sua loja se tornar mais popular, você será eternamente grato por ter uma empresa e plataforma de hospedagem na web confiável.
Instalando o Genesis Framework
A primeira etapa para adicionar WooCommerce ao Genesis Framework é instalar ambos os componentes. Você precisará de uma licença para o Genesis Framework, que pode ser obtida no site Site StudioPress. Depois de obter sua licença, você receberá um login na área de download do Genesis Framework, que se parece com isto:
Vá em frente e baixe os dois temas destacados. Dependendo da licença que você comprou, você poderá ver mais temas baseados em Gênesis nesta área. Precisaremos apenas do próprio Genesis Framework e do tema filho “Genesis Sample”. O Genesis Framework fornece a funcionalidade do tema, enquanto o “Genesis Sample” é o tema filho ao qual adicionaremos o WooCommerce.
Depois de baixar esses dois temas, acesse seu site WordPress e instale-os. Ative o tema filho, para que sua área temática fique semelhante a esta:
Dependendo da sua configuração, você poderá ver outros temas instalados. No meu site de exemplo (executando em meu ambiente Docker local), removi todos os outros temas para evitar sobrecarregar este tutorial. Não é novidade que o front-end do site se transformou em algo que não é particularmente interessante.
Mas não se preocupe, em breve adicionaremos produtos WooCommerce a uma nova página inicial estática.
Instalando WooCommerce
Para fazer isso, vamos instalar o WooCommerce. Talvez você já tenha em mente extensões para WooCommerce que gostaria de usar, mas não se precipite ainda. Vamos primeiro ver como o WooCommerce e o Genesis Framework funcionam juntos. Vá para a página Plugins em seu backend WP e digite “WooCommerce”. Você verá muitos plug-ins surgindo, mas instale apenas o plug-in oficial do WooCommerce por enquanto. Falaremos sobre como estender a funcionalidade do WooCommerce posteriormente neste tutorial.
Depois de instalar o WooCommerce, você pode executar o assistente de configuração padrão. Esse assistente irá guiá-lo na inserção das informações necessárias para começar a vender seus produtos ou serviços por meio do WooCommerce. Serão apresentadas opções para as informações regulares da loja, como configurações de endereço ou moeda, gateways de pagamento, métodos de envio e custos, e outras configurações recomendadas, como o tema Storefront (que não usamos, usamos nosso próprio Genesis Child Theme ), impostos automatizados via Jetpack (que novamente não usaremos) e integração MailChimp (que depende da sua escolha de provedor de email marketing).
Por padrão, WooCommerce oferece as seguintes opções de pagamento sem a necessidade de quaisquer outras extensões: Transferência bancária direta (receber pagamento via BACS), pagamentos em cheque (receber pagamentos pessoalmente por meio de cheques), dinheiro na entrega e padrão PayPal. Durante o processo de checkout, você também pode instalar Klarna, Listra e Check-out expresso do PayPal. Para o escopo deste tutorial, também integraremos o Stripe para poder aceitar pagamentos com cartão de crédito. Cobrir e comparar todos os três gateways de pagamento resultaria em um artigo próprio.
Adicionando WooCommerce ao tema Genesis Child
Para integrar e personalizar totalmente o WooCommerce com o tema filho do Genesis, precisaremos adicionar alguns dados à loja. Em seguida, você verá como os produtos são apresentados e poderá acompanhar a personalização do tema filho usando os populares ganchos, ações e filtros do Genesis.
Normalmente, o WooCommerce se integra perfeitamente com a maioria dos temas. O Genesis Framework é muito fácil, pois depende fortemente de seus próprios ganchos e filtros. Embora eles constituam um belo layout e opções de personalização, o WooCommerce precisa ser integrado a esses ganchos e filtros.
Para fazer isso e verificar se nossa integração funciona, obviamente precisamos de alguma quantidade de dados do produto. Caso contrário, não teríamos produtos na nossa loja para realizar uma validação óptica para saber se os produtos estão expostos corretamente. Felizmente para nós, o WooCommerce vem com um conjunto de produtos de demonstração prontos para uso. Você pode usar esses produtos caso ainda não queira criar seus próprios produtos. Para instalá-los, você pode executar o importador normal do WordPress ou usar o assistente de configuração do WooCommerce, como estou fazendo nas capturas de tela abaixo:
Você pode encontrar o arquivo CSV com os produtos de demonstração em sua pasta de plug-ins ou baixando o WooCommerce novamente e descompactando o arquivo. Aqui está o documentação oficial sobre a importação de dados de amostra do WooCommerce. Depois de passar pela importação dos produtos de amostra, você deverá ter 25 produtos em sua loja – mais do que o suficiente para acompanhar e criar um tema infantil bonito. Vou delinear duas soluções para integrar a loja ao seu tema. A primeira solução é sua melhor escolha se você não se sentir confortável em editar arquivos de código. A segunda solução é minha escolha preferida porque oferece mais controle e clareza sobre o que está acontecendo. No entanto, é mais técnico e envolverá a modificação do arquivo function.php do seu tema filho.
Solução 1: Instalando Genesis Connect para WooCommerce
Logo após voltar para a área de administração do WordPress após instalar o WooCommerce, você verá um prompt solicitando a instalação de um plugin chamado “Genesis Connect for WooCommerce”. Esse plugin é necessário e muito importante para usar WooCommerce com Genesis, já que a estrutura do tema introduz vários ganchos e filtros próprios. Pronto para uso, o WooCommerce não sabe nada sobre esses recursos do Genesis – então, simplesmente copiar os arquivos do modelo WooCommerce para a pasta do tema não funcionará como esperado. Eu recomendo fortemente que você dê uma olhada no descrição do plug-in para entender completamente o que está acontecendo. Para citar a descrição do plugin:
“Este plugin substitui os modelos de loja integrados do WooCommerce por suas próprias versões prontas para Genesis, especificamente os modelos single-product.php, archive-product.php e taxonomy.php necessários para exibir a página do produto único, a página principal da loja e Páginas de arquivo de categoria de produto e tag de produto.”
Você pode instalar o plugin diretamente da área WP Admin. Depois de baixar e ativar o plugin, o layout da página de detalhes do produto muda visivelmente. Aqui está uma comparação lado a lado. O lado esquerdo mostra o layout de detalhes do produto sem o plugin Genesis Connect para WooCommerce estar ativo. No lado direito, o plugin está instalado e ativado.
Como você pode perceber pelas áreas destacadas, quatro grandes mudanças foram feitas:
- O título agora está posicionado ao lado da imagem em vez de acima dela.
- Os metadados para data de publicação e autor desapareceram para sempre.
- A aba “Comentários” estava faltando no lado esquerdo, agora foi adicionada (os “Comentários” estão ativados nas configurações do WooCommerce).
- A seção de comentários desapareceu.
Para personalizar ainda mais os modelos WooCommerce (requer habilidades de codificação), você pode seguir o documentação oficial do WooCommerce:
“Edite arquivos em um maneira segura de atualização usando substituições. Copie o modelo em um diretório dentro do seu tema chamado /Woocommerce mantendo a mesma estrutura de arquivo, mas removendo o subdiretório /templates/.”
Você também deseja declarar suporte de tema para WooCommerce no arquivo functions.php do seu tema usando a função “add_theme_support”. Verifique isso Entrada wiki do Github para mais detalhes. Esteja ciente, porém, que esta etapa alterará novamente o layout da página de detalhes do produto:
Você pode dizer que a barra lateral é movida para baixo do produto e o
contendo as informações do produto agora está em largura total. Isso se deve a uma grande desvantagem de usar o plugin Genesis Connect: o plugin pode usar arquivos de modelo WooCommerce desatualizados.
Contanto que você não planeje codificar seus próprios arquivos de modelo WooCommerce ou apenas queira usar arquivos de modelo personalizados para e-mails e outros layouts não relacionados ao frontend, você deve usar o plugin Genesis Connect para WooCommerce. No entanto, assim que você quiser personalizar os modelos WooCommerce, você pode querer dar uma olhada na solução 2 para integrar o WooCommerce com o Genesis Framework.
Solução 2: O Método AlphaBlossom
Encontrei esse método pela primeira vez com Tony Eppright em seu Blog AlphaBlossom. Ele descreve um método que remove certas ações do WooCommerce para construir a marcação das páginas do WooCommerce e que substitui essas ações pela marcação baseada no Genesis. Prefiro muito mais essa abordagem do que usar o plugin mencionado acima, porque dá muito mais clareza sobre o que está acontecendo.
Você vai querer se sentir confortável editando o arquivo function.php do seu tema para acompanhar. Caso contrário, você pode facilmente quebrar o tema filho e seu site.
Estes são os trechos de código que vão para o seu arquivo function.php:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-woocommerce-genesis-theme-support-php
Se você quiser manter a localização atual do WooCommerce em vez de usar a localização atual do Genesis, adicione este trecho de código:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-replace-genesis-breadcrumbs-woocommerce-php
Se você quiser usar a localização atual do Genesis em vez da localização atual do WooCommerce, use este trecho de código:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-replace-woocommerce-breadcrumbs-genesis-php
E finalmente, adicione o suporte ao tema ao seu arquivo functions.php:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-remove-woocommerce-admin-theme-support-warning-php
A beleza da abordagem de Tony é que ele deixa os ganchos do Genesis no lugar. Portanto, se outros plug-ins dependerem deles, eles ainda funcionarão conforme esperado nas páginas do WooCommerce. E – além do plugin acima – o código funcionará com arquivos de modelo WooCommerce personalizados. Neste tutorial, copiei todos os modelos WooCommerce para a pasta do tema Genesis Sample, para que o tema filho os carregue. Embora o plugin tenha quebrado o layout e movido a barra lateral abaixo do conteúdo do produto (como mostrado acima), a próxima captura de tela mostra que o código de Tony não está fazendo nada disso:
Vemos que as mesmas quatro alterações foram aplicadas, mas que o layout geral ainda funciona perfeitamente. O mesmo acontece se você verificar a página da Loja.
Tudo parece conforme o esperado e agora você está pronto para personalizar ainda mais seu tema filho baseado em Gênesis. Mudar o nome de “Genesis Sample” para o nome da sua marca ou do cliente provavelmente é uma boa ideia.
Pronto para atualizar seu site para gerenciado?
Construímos uma plataforma de alto desempenho dedicada a lojas de comércio eletrônico de todos os tamanhos, oferecendo a loja rápida necessária para converter mais visitantes e leads em receita. Experimente a hospedagem gerenciada WooCommerce hoje e veja a diferença.
