Como adicionar código personalizado ao WooCommerce

Configurar trechos de código e configurar arquivos WooCommerce pode ser confuso para usuários iniciantes. Além disso, cometer erros com esses arquivos pode ter resultados terríveis e até mesmo travar seu site. É por isso que neste guia, mostraremos diferentes métodos para adicionar código personalizado ao WooCommerce .

Já vimos anteriormente como você pode personalizar manualmente sua loja. Seja na página da sua loja, na página Minha conta, na página do carrinho ou nas páginas do produto, você pode personalizá-los manualmente adicionando um código personalizado. Você também pode usar o código para configurar vários elementos do WooCommerce para personalizar a experiência de compra e se destacar de seus concorrentes. Tudo isso requer a adição de snippets de código ao seu site.

Antes de examinarmos os diferentes métodos para fazer isso, vamos ver alguns dos principais benefícios de aprender como adicionar código personalizado.

Por que adicionar e personalizar código no WooCommerce?

Um dos principais recursos do WooCommerce é sua personalização. Com suas opções já diversificadas e flexíveis, além de vários plugins e complementos disponíveis, o WooCommerce se destaca como uma das plataformas de comércio eletrônico mais personalizáveis. No entanto, há vários requisitos que você precisa seguir para adicionar código personalizado.

Seja para alterar o texto Proceed to checkout, remover os botões Adicionar ao carrinho ou alterar a aparência do seu site, você precisará usar funções personalizadas e usar ganchos WooCommerce. Desenvolvedores e qualquer pessoa familiarizada com habilidades de codificação sabem como é importante poder adicionar snippets da maneira certa. Isso permite que você não apenas edite sua loja, mas também adicione funcionalidades a ela. A boa notícia é que a natureza de código aberto do WooCommerce e do WordPress o torna um processo muito mais acessível.

O WooCommerce endossa totalmente seus usuários para personalizar seu código, embora esse processo envolva a edição de arquivos principais que apresentam alguns riscos.

Já vimos muitos guias sobre como configurar vários elementos e arquivos usando trechos de código. Desta vez, vamos nos concentrar na primeira parte desse processo e ver diferentes métodos para adicionar código personalizado ao WooCommerce da maneira certa .

Como adicionar código personalizado ao WooCommerce

Existem diferentes maneiras de adicionar trechos de código ao WooCommerce :

1. Com o Editor de Temas WordPress embutido
2. Usando um plug-in dedicado
3. Usando FTP para acessar arquivos de tema
4. Ao configurar arquivos de modelo do WooCommerce
5. Ao criar um novo plugin personalizado

Vamos dar uma olhada em cada método passo a passo.

NOTA : Todos esses métodos requerem a edição de arquivos principais que envolvem alguns riscos. É por isso que, antes de começar, é uma boa ideia fazer backup do seu site.

1) Adicione personalizado usando o editor embutido do WordPress

O método padrão para adicionar código personalizado ao WooCommerce é usar o editor de temas embutido. Você pode acessar o functions.php e adicionar o código PHP diretamente nele. No entanto, se houver erros no código ou se você excluir partes do código, seu site poderá ser seriamente afetado. É por isso que recomendamos usar um tema filho e adicionar uma camada extra de segurança.

Para abrir o arquivo functions.php em seu Editor de Tema, vá para Aparência > Editor de Tema em seu painel . Em seguida, clique em functions.php na barra lateral de Arquivos de Tema à direita.

Adicionando código personalizado ao arquivo functions.php

Agora, você pode adicionar código personalizado ao WooCommerce a partir do Editor de Temas. Para esta demonstração, alteraremos o texto padrão "Nenhum produto no carrinho" para "Seu carrinho está vazio no momento, recomendamos verificar nossos produtos em destaque!":

 remove_action( 'woocommerce_cart_is_empty', 'wc_empty_cart_message', 10 );
add_action( 'woocommerce_cart_is_empty', 'quadlayers_empty_cart_message', 10 );

function quadlayers_empty_cart_message() {
$html = '<div class="col-12 offset-md-1 col-md-10"><p class="cart-empty">';
$html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Seu carrinho está vazio, recomendamos verificar nossos produtos em destaque!', 'woocommerce' ) ) );
echo $html. '</p></div>';
}

Basta colar este script no seu Editor de Temas e atualizar o arquivo para aplicar as alterações.

Dê uma olhada no front-end e você deve ver algo assim:

Adicionar o código é uma coisa, mas também é importante entender como o código funciona.

O código acima adiciona um gancho personalizado do WooCommerce que aplica uma determinada ação para substituir a Mensagem de carrinho vazio padrão por uma mensagem personalizada que adicionamos ao código. Para alterar o texto, basta substituir a mensagem de texto nesta linha:

 $html .= wp_kses_post( apply_filters( 'wc_empty_cart_message', __( 'Seu carrinho está vazio, recomendamos verificar nossos produtos em destaque!', 'woocommerce' ) ) );

Se você quiser saber mais sobre como personalizar sua mensagem “ Sem produtos no carrinho ” e aproveitá-la ao máximo, confira este guia completo.

Como mencionado anteriormente, adicionar código dessa maneira é rápido e fácil, mas envolve um número razoável de riscos. Por exemplo, usar o código errado pode quebrar ou travar seu site. Além disso, pode haver problemas de compatibilidade com seu código personalizado que podem afetar algumas funcionalidades, plugins ou temas. Além disso, se você adicionar seu código ao function.php do tema pai e depois alterar ou atualizar seu tema, poderá perder o código personalizado que adicionou.

É por isso que, se você é iniciante, recomendamos que experimente o segundo método e use plugins para adicionar código personalizado ao WooCommerce.

2) Adicione código usando plugins

Usar um plugin é mais amigável para iniciantes quando se trata de adicionar trechos. Você pode controlar facilmente quais bits de código você habilita em seu site e qualquer código que você adicionar será salvo mesmo se você alterar seu tema. Além disso, você pode ativar ou desativar qualquer código a qualquer momento.

Para nossa demonstração, usaremos o plugin Code Snippets. É um dos plugins mais populares para adicionar código personalizado a qualquer site.

Primeiro, instale o plugin abrindo seu WP Admin Dashboard e indo em Plugins > Add New . Use a barra de pesquisa no canto superior direito e procure por trechos de código . Em seguida, clique em Instalar e, finalmente, ative o plugin.

Após a ativação, você está pronto para adicionar código e personalizar sua loja WooCommerce. Vá para Snippets > Adicionar Novo para adicionar um novo código.

Nomeie seu snippet de código e adicione seu código à seção Código . Para a demonstração, usaremos o código abaixo para ocultar o botão Adicionar ao carrinho.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); 

Depois disso, você pode decidir se deseja executar o código em todo o site ou escolher entre executá-lo apenas no back-end ou apenas no front-end. Como alternativa, você pode executar esse código apenas uma vez.

Da mesma forma, você também pode optar por definir uma prioridade para seu código e adicionar uma descrição de snippet, além de tags.

Depois de configurar todos os detalhes, clique em Salvar alterações ou Salvar alterações e ativar para adicionar seu novo código.

Se você deseja desativar ou ativar seu código individualmente, vá para Snippets > Todos os Snippets e você pode desativar ou ativar individualmente qualquer um dos seus snippets.

3) Adicionar código personalizado usando um cliente FTP

Se todas essas opções não estiverem disponíveis para você e você precisar adicionar um código personalizado à sua loja WooCommerce manualmente, talvez seja necessário fazer isso usando um cliente FTP . Existem várias ferramentas por aí, mas para este tutorial, usaremos o FileZilla.

NOTA : NÃO recomendamos este método se você não estiver acostumado a usar um cliente FTP ou configurar seu servidor e seus arquivos. Além disso, isso pode exigir acesso ao seu cPanel e FTP . A bagunça desses arquivos pode ter efeitos graves em seu site, por isso sugerimos que você siga os métodos acima se quiser menos riscos envolvidos na adição de código personalizado ao seu site.

Primeiro, abra o FileZilla ou seu cliente FTP preferido e conecte-o ao seu site. Em seguida, localize seus arquivos de tema no diretório do seu site. Eles estão normalmente no diretório /wp-content/themes em seu servidor. Clique na pasta do seu tema atual ou no tema filho que você pode estar configurando.

Abra a pasta do seu tema, clique com o botão direito do mouse no arquivo functions.php dentro dele e pressione Visualizar/Editar.

Aqui, usando o editor de arquivos, você pode colar o código no final do arquivo e salvá-lo. Para isso, usaremos o mesmo código acima para ocultar o botão Adicionar ao carrinho:

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); 

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); 

Outra alternativa interessante para adicionar código é personalizar os arquivos de modelo do WooCommerce.

4) Adicione código personalizando os arquivos de modelo do WooCommerce

A edição de templates é uma das formas mais rápidas de configurar todos os elementos da sua loja WooCommerce e todas as suas páginas. Isso inclui sua página de Checkout, página do produto, página da loja e muitas outras.

A boa notícia é que você pode editar os arquivos de modelo do WooCommerce de maneira semelhante à acima usando o editor de plugins do WordPress embutido. Para acessá-lo, no seu painel de administração, vá para Plugins > Editor de Plugins .

Em seguida, use o menu suspenso Selecionar plug-ins no canto superior direito, escolha WooCommerce e clique em Selecionar.

Isso atualizará a lista de arquivos de plug -in abaixo que você pode usar para configurar arquivos e modelos do WooCommerce. Para nossa demonstração, editaremos a página de agradecimento do checkout . Portanto, na lista de arquivos de plug -in, selecione Checkout > thankyou.php .

Em seguida, role para baixo e altere o texto do pedido recebido substituindo o texto nesta linha:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Obrigado. Seu pedido foi recebido.', 'woocommerce' ), nulo ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

Por exemplo, para alterar a mensagem Pedido recebido para algo como “Obrigado por comprar conosco. Você receberá o e-mail em breve com as instruções.”, cole este código:

 <p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Obrigado por comprar conosco. Você receberá o e-mail em breve sobre as instruções..', 'woocommerce' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> 

Aqui, acabamos de atualizar o texto do gancho para algo mais adequado às nossas necessidades. Quando estiver satisfeito com as alterações, pressione Atualizar arquivo .

Se você quiser saber mais sobre como configurar arquivos de modelo, confira nosso guia sobre como personalizar arquivos de modelo do WooCommerce.

5) Adicione código criando um novo plugin personalizado

Criar um plugin totalmente novo também é uma opção quando se trata de adicionar códigos personalizados ao WooCommerce. Esta é uma opção de usuário um pouco mais avançada e recomendamos que você use esse método apenas se desejar um determinado recurso anexado a um plug-in independente. Desta forma, você sempre pode optar por ativar/desativar o plugin sempre que um determinado recurso for necessário ou não, respectivamente.

Além disso, essa pode ser uma ótima solução se você também precisar gerenciar vários sites. Você pode simplesmente anexar um recurso aos sites com o plug-in em vez de adicionar manualmente o código a eles.

Além disso, o próprio WordPress facilita bastante a criação e o uso de novos plugins. Tudo o que você precisa fazer é simplesmente criar uma nova pasta de plugins no diretório do seu site e adicionar alguns códigos ao arquivo PHP. Primeiro, você precisa se conectar ao seu site usando FTP primeiro. Usaremos o Filezilla para nosso guia, mas o processo deve ser semelhante para qualquer outro cliente FTP.

Antes de começar, no entanto, sugerimos que você faça backup do seu site.

Criando nova pasta de plugin para adicionar código personalizado ao WooCommerce

Depois de conectar seu site com o FTP, abra o diretor do seu site. Em seguida, navegue até a pasta /wp-content/plugins .

Agora, crie um novo diretório na pasta plugins e nomeie-o de acordo com seu código e expanda-o. Para nossa demonstração, vamos chamá-la de Remove-Add-To-Cart .

Em seguida, clique com o botão direito do mouse na pasta para clicar em Criar novo arquivo . Aqui, você precisa criar um arquivo .php com o mesmo nome da sua pasta. Então, vamos nomear nosso arquivo como Remove-Add-to-Cart.php.

Depois que o arquivo for criado, vá em frente e abra-o clicando com o botão direito do mouse e clicando em Exibir/Editar .

Em seguida, adicionaremos algumas linhas de código para adicionar o nome do plug-in, a descrição e o nome do autor:

 <?php
/**
* Nome do Plugin: Remover Adicionar ao Carrinho
* Descrição: Adicionando um plugin remover adicionar ao carrinho
* Autor: Sijal Shrestha
* Versão: 1.0
*/

/* Coloque seus trechos abaixo aqui. */
/* Coloque seus trechos acima aqui. */
?> 

Adicionando código personalizado ao novo plugin

Agora, você pode começar a adicionar seu código personalizado ao plugin. Você precisa adicionar seu código personalizado entre a seção /*Coloque seus snippets aqui */. Como lembrete, essas linhas são apenas comentários para que não afetem seu código e você pode removê-las se desejar.

 <?php
/**
* Nome do Plugin: Remover Adicionar ao Carrinho
* Descrição: Adicionando um plugin remover adicionar ao carrinho
* Autor: Sijal Shrestha
* Versão: 1.0
*/

/* Coloque seus trechos abaixo aqui. */

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
/* Coloque seus trechos acima aqui. */
?> 

Em seguida, salve seu arquivo e você verá que o plug-in está listado em seu painel de administração do WP na página de plug- ins .

Ative o plugin e seu código personalizado deve funcionar perfeitamente. Você também pode compactar a pasta do plug-in, se desejar, e usá-la para instalá-lo em diferentes sites. Basta baixar a pasta do seu cliente FTP e compactar a pasta.

Então, você pode usar este zip para instalar seu plugin em qualquer site. Se você precisar de mais ajuda sobre isso, também temos um detalhado para instalar um plugin do WordPress manualmente.

Qual método você deve usar para adicionar código personalizado?

Vimos métodos diferentes, mas qual é o melhor para adicionar snippets? Embora usar um cliente FTP e acessar manualmente seus arquivos possa ser bastante rápido e fácil, pode haver riscos significativos envolvidos ao adicionar códigos personalizados dessa maneira. É por isso que, para minimizar os riscos, recomendamos o uso de um plug-in de código personalizado dedicado, especialmente se você não tiver habilidades avançadas de codificação.

Este método é muito menos arriscado e pode ter vantagens adicionais, como:

• Ser capaz de acompanhar diferentes códigos e ativá-los/desativá-los sempre que quiser
• Adicionando código conflitante e habilitando/desabilitando-os alternativamente, se necessário
• Verificando a compatibilidade com o tema/instalações
• Mais fácil de depurar e recuperar de problemas

Usar um plug-in dedicado para adicionar código personalizado ao WooCommerce fornece uma maneira fácil de configurar seus ganchos, minimizando possíveis problemas. No entanto, se você quiser garantir que seu código recém-adicionado não cause problemas ou trave seu site, recomendamos que você dê uma olhada nas dicas a seguir.

Práticas recomendadas ao adicionar código personalizado ao WooCommerce

1) Usando Temas Filhos

Usar um tema filho é uma das primeiras coisas que recomendamos se você for adicionar código personalizado ao seu arquivo functions.php . Independentemente do código que você editar ou adicionar, com um tema filho você garante que poderá reverter quaisquer alterações a qualquer momento sem modificar os arquivos do tema principal.

Além disso, uma coisa importante a considerar com alterações de código e modificação de folhas de estilo é que, se você atualizar seu tema do WordPress, poderá perder todas as alterações. Isso ocorre porque seu arquivo funcitons.php será substituído por uma atualização de tema e removerá todo o seu código personalizado. É por isso que adicionar código ao tema pai não é uma prática recomendada.

Com um tema filho, você garante que não perderá sua personalização mesmo depois de atualizar seu tema pai. Além disso, se o seu tema quebrar, você sempre poderá reverter suas alterações e começar tudo de novo.

Você pode criar um tema filho programaticamente ou usar um plug-in dedicado. Nesta seção, mostraremos como criar um tema filho usando um plug-in, pois é um processo mais fácil.

Criando um tema filho usando um plugin

Criar um tema filho usando um plugin é um processo simples e amigável para iniciantes. Existem muitos plugins que você pode usar. Para esta demonstração, usaremos o Child Theme Wizard .

Primeiro, abra o painel de administração do WP e vá para Plugins> Adicionar novo . Em seguida, use o menu de pesquisa no canto superior direito para pesquisar Child Theme Wizard . Clique em Instalar e pressione Ativar quando o botão mudar.

Você pode acessar os recursos do plug-in clicando em Ferramentas > Assistente de tema filho.

Para criar um novo tema filho, use o campo de tema pai para escolher o tema para o qual deseja criar um tema filho. Para nossa demonstração, usaremos o tema Storefront .

Em seguida, adicione detalhes como Título, Descrição, URL e muito mais. Quando terminar, clique em Criar tema filho e pronto.

Agora mude para o seu tema filho navegando até Aparência > Temas na barra lateral e pressionando Ativar no seu tema filho recém-criado.

É isso! Agora você pode adicionar livremente seu código personalizado ao seu arquivo function.php sob o tema filho recém-criado.

2) Usando plugins WordPress Backup e configurando backups

Uma das coisas mais importantes a fazer ao modificar qualquer arquivo do WordPress/WooCommerce ou alterar qualquer um dos arquivos em sua instalação é configurar backups. Embora o WooCommerce seja bastante flexível, o código incompatível ou com defeito pode criar problemas graves.

Em alguns casos, pode travar ou até quebrar seu site e causar tempo de inatividade para o seu negócio WooCommerce. É por isso que recomendamos que você crie backups regulares. Portanto, antes de adicionar qualquer código personalizado ao seu site, lembre-se de criar um backup para o qual você possa voltar caso algo dê errado.

Para obter mais informações sobre isso, confira nosso guia dedicado sobre como criar backups no WordPress.

3) Aprendendo sobre como o código funciona e como os ganchos e funções do WooCommerce são usados

A maior parte do código personalizado do WooComerce usa ganchos para realizar certas ações ou alterar certos elementos. É por isso que é uma ótima ideia aprender como esses filtros funcionam e como eles são aplicados ao seu site antes do código personalizado. Isso não apenas evita que você use um código incompleto ou com defeito, mas também garante que você possa personalizá-lo para que funcione melhor para suas necessidades.

Por exemplo, vamos dar uma olhada neste snippet que desativa a compra se você não estiver logado:

 add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter( 'woocommerce_is_purchasable', 'quadlayers_block_admin_purchase' );
function quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):return true;
else:retorna falso;
fim se;
}

function quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>FAÇA LOGIN PARA COMPRAR ESTE PRODUTO</h2>';
fim se;
}

É assim que os ganchos do WooCommerce funcionam aqui:

• O gancho de ação é usado para imprimir uma mensagem usando a função QuadLayers_add_message , enquanto o gancho de filtro usa a função quadlayers_block_admin_purchase para desabilitar o botão Adicionar ao carrinho
• Uma instrução IF é usada em ambas as funções para verificar se o usuário está logado ou não
• O gancho woocommerce_is_purchasable é aplicado se a instrução condicional IF retornar true
• Também aplicamos CSS adicional para alterar o estilo do texto da mensagem, além de adicionar cores personalizadas

Vamos adicionar isso ao arquivo function.php do nosso tema filho:

Isso nos dá este resultado no front-end:

Se você quiser aprender como o código personalizado do WooCommerce funciona, confira nosso guia sobre como usar ganchos WC.

Conclusão

Em resumo, aprender como adicionar código personalizado ao WooCommerce pode ser uma parte fundamental da personalização da experiência da sua loja. Quanto mais coisas você personalizar, mais você poderá se destacar de seus concorrentes. Ao adicionar trechos de código, você remove evita ter que depender tanto de plugins e tem mais flexibilidade.

Neste guia, vimos métodos diferentes para adicionar snippets de código:

• Usando o editor de temas embutido para editar o arquivo functions.php
• Com um plugin WordPress dedicado para adicionar trechos de código personalizados
• Usando FTP para acessar o arquivo function.php manualmente
• Usando o editor de plugins para editar manualmente os modelos do WooCommerce
• Usando FTP para criar um novo plugin com o código personalizado.

Todos esses métodos permitem que você personalize e configure facilmente seu site WooCommerce. Todos esses métodos exigem um nível básico de habilidades de codificação, mas usar um plugin é o método mais amigável para iniciantes. Editar o arquivo functions.php do editor embutido é fácil, mas tem alguns riscos que você precisa estar ciente. O mesmo se aplica se você quiser personalizar diretamente os arquivos de modelo do WooCommerce. Finalmente, usar um cliente FTP é um método um pouco mais avançado, pois requer certo conhecimento para configurar os arquivos do servidor.

Você adicionou snippets à sua loja WooCommerce? Qual método você usou? Você conhece alguma outra maneira que devemos adicionar? Deixe-nos saber na seção de comentários abaixo!

Por fim, se você estiver procurando por snippets de código adicionais e maneiras de personalizar sua loja programaticamente, temos algo para você. Se você gostou deste guia, confira estes artigos que ajudarão você a aproveitar ao máximo sua loja WooCommerce:

• Como editar a página do produto WooCommerce programaticamente
• Edite a página Minha conta do WooCommerce programaticamente
• Como editar a página do WooCommerce Shop programaticamente