Como personalizar os modelos do WooCommerce programaticamente

Deseja editar modelos em seu site? Este guia mostrará como personalizar os modelos do WooCommerce programaticamente com ganchos e sobrescrevê-los .

Por que editar modelos WooCommerce?

Comprar online é mais confortável e rápido do que ir a lojas físicas, então o comércio eletrônico se tornou extremamente popular nos últimos anos. Com tanta concorrência, não basta montar sua loja WooCommerce e colocar seus produtos online. Você precisa encontrar maneiras de se diferenciar e se destacar da multidão .

Uma das melhores maneiras de fazer isso é personalizando sua loja. Além de alterar o cabeçalho e editar páginas-chave, como o checkout ou a página da loja, você também pode personalizar os modelos que usa. Não existem muitos sites que editam seus templates, então, ao fazer isso, você poderá ter uma vantagem sobre seus concorrentes .

Se você tem habilidades de codificação, provavelmente sabe que usar um tema filho é recomendado ao editar sua loja. Da mesma forma, os ganchos embutidos do WordPress e WooCommerce oferecem muitas possibilidades para editar e adicionar novos recursos a qualquer site.

Como personalizar os modelos do WooCommerce programaticamente

Existem duas maneiras principais de personalizar os modelos do WooCommerce programaticamente:

1. Com ganchos
2. Sobrescrevendo os modelos

Cada um desses métodos serve a propósitos diferentes. Vamos dar uma olhada em suas principais diferenças.

Substituir arquivos de modelo ou usar ganchos?

Personalizar sua loja com ganchos é uma prática recomendada. No entanto, ao personalizar o WooCommerce com ganchos, você pode enfrentar problemas de incompatibilidade. Para personalizações mais complexas, substituir os arquivos de modelo do WooCommerce pode ser uma opção melhor.

É importante observar que quando você substitui um arquivo de modelo, os ganchos que funcionam nesse arquivo param de funcionar. Cada gancho aponta para um arquivo específico, então você não poderá usá-los se editar o mesmo arquivo que aciona o gancho.

Por exemplo, vamos pegar o arquivo single-product.php para ver como os ganchos são criados. Além disso, observe onde os ganchos estão antes e depois do loop.

 if ( !defined( 'ABSPATH' ) ) {
        saída; // Sai se acessado diretamente
 }
 get_header('loja'); ?>
 <?php
                /**
                 * gancho woocommerce_before_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (saída divs de abertura para o conteúdo)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action('woocommerce_before_main_content');
        ?>
                <?php while ( have_posts() ): ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part( 'conteúdo', 'produto único' ); ?>
                <?php endwhile; // fim do loop. ?>
        <?php
                /**
                 * gancho woocommerce_after_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (produz divs de fechamento para o conteúdo)
                 */
                do_action('woocommerce_after_main_content');
        ?>
        <?php
                /**
                 * gancho woocommerce_sidebar.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action('woocommerce_sidebar');
        ?>
 <?php
 get_footer('loja');

Se você der uma olhada no script, verá como criamos os ganchos no do_action('name-of-the-hook'); linhas.

Digamos que você tenha o seguinte gancho no arquivo functions.php do seu tema filho:

 add_action('woocommerce_after_main_content',function(){echo “conteúdo personalizado após arquivo de modelo de produto único”;});

Você pode ecoar o mesmo conteúdo diretamente no arquivo de modelo da seguinte maneira:

 <?php endwhile; // fim do loop. ?>
        <?php
 echo “conteúdo personalizado após arquivo de modelo de produto único”;
                /**
                 * gancho woocommerce_after_main_content.
 do_action('woocommerce_after_main_content');

No entanto, ao fazer isso, o do_action('woocommerce_after_main_content'); A função se tornará inútil, pois você adicionou seu código lá em vez de puxá-lo com o gancho. Então você pode querer remover todos os ganchos desnecessários no arquivo excluindo o do_action('name-of-the-hook'); Seções.

Tenha em mente que se você estiver usando o gancho woocommerce_after_main_content() em algum outro lugar do seu site e remover o do_action( 'name_of_your_hook' ); neste arquivo, o gancho não funcionará mais.

Depois de remover os ganchos e as tags PHP desnecessárias, seu arquivo deve ficar assim:

 if ( !defined( 'ABSPATH' ) ) {
 saída; // Sai se acessado diretamente
 }
 get_header('loja');
 while (have_posts()):
 the_post();
 wc_get_template_part( 'conteúdo', 'produto único');
 fim; // fim do loop.
 do_action('woocommerce_sidebar');
 get_footer('loja');

NOTA : A remoção de ganchos dessa maneira pode afetar o código de terceiros, como plugins e temas, causando falhas ou quebrando seu site. Presume-se que você sabe o que está fazendo.

Personalize e substitua os arquivos de modelo do WooCommerce

A substituição de arquivos de modelo do WooCommerce oferece muita flexibilidade para personalizar sua loja. No entanto, como mencionado anteriormente, você deve entender que quando você sobrescreve o conteúdo de um arquivo de modelo, os ganchos que funcionam nesse arquivo param de funcionar. Além disso, o WooCommerce pode alterar os arquivos de modelo de tempos em tempos, portanto, se houver uma atualização e eles alterarem os arquivos, você poderá descobrir que o arquivo editado está desatualizado.

Coisas a ter em mente ao substituir modelos

Se você está aqui, provavelmente tem algumas habilidades de codificação e sabe como usar e instalar um tema filho. Se não for esse o caso, confira nosso guia para criar um tema filho ou use um desses plugins.

Sobrescrever modelos do WooCommerce é semelhante a sobrescrever o arquivo functions.php . A principal diferença é que você edita os arquivos de modelo do WooCommerce em vez de seus arquivos de tema.

Para fazer isso, você precisa copiar o arquivo de modelo desejado da pasta de modelos do plug-in WooCommerce e colá-lo em seu tema filho na pasta WooCommerce. Se você seguir a mesma estrutura da pasta de modelos do WooCommerce, nomes de arquivos e subpastas; você poderá sobrescrever arquivos de modelo, mesmo aqueles dentro de subpastas.

Existem muitos arquivos de modelo do WooCommerce e cada um deles é responsável por uma única tarefa. você pode verificar a lista completa de arquivos de modelo que você pode editar, bem como subdiretórios e estrutura de pastas neste link.

Como você pode ver, existem alguns arquivos na pasta de modelo raiz, bem como vários subdiretórios. Você pode personalizar arquivos dentro de qualquer subdiretório da mesma forma que edita arquivos principais como archive-product.php , single-product.php ou content-single-product.php . Da mesma forma, você também pode personalizar arquivos no carrinho, Minha conta, e-mails ou pastas de checkout se seguir os mesmos nomes de pastas e estrutura do seu tema filho.

Então, se você quiser personalizar alguns desses arquivos, seu tema filho ficaria assim:

Dito isso, vamos dar uma olhada em alguns exemplos de coisas que você pode fazer para personalizar os modelos do WooCommerce.

1. Adicione códigos de acesso ao modelo WooCommerce

Uma alternativa interessante é usar shortcodes em seu código. A maioria dos códigos de acesso existentes deve funcionar aqui, mas também é comum encontrar alguns códigos de acesso não suportados fora dos oficiais WooCommerce e WordPress.

Por exemplo, o script a seguir incluirá o painel da conta em todas as páginas de um único produto. Lembre-se de colá-lo no arquivo single-product.php que você criou no seu tema filho.

 <?php
 if ( !defined( 'ABSPATH' ) ) {
 saída; // Sai se acessado diretamente
 }
 get_header('loja');
 while (have_posts()):
 the_post();
 wc_get_template_part( 'conteúdo', 'produto único');
 fim; // fim do loop.
 do_action('woocommerce_sidebar');
 $t= '<div><h4>Minha conta</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 eco $t;
 get_footer('loja');

E este é o resultado em uma página de produto ao vivo:

2. Mostre conteúdo para clientes que compraram esse produto antes

Se você tem clientes que já compraram um produto de você e voltam a comprar o mesmo produto novamente, você pode fornecer a eles um código de desconto como forma de melhorar a experiência deles e fazê-los voltar à sua loja várias vezes.

O script a seguir exibirá conteúdo na página do produto para clientes recorrentes que compraram o mesmo produto no passado. Mais uma vez, editamos o arquivo single-product.php :

 get_header('loja');
 while (have_posts()):
 the_post();
 wc_get_template_part( 'conteúdo', 'produto único');
 fim; // fim do loop.
 $current_user = wp_get_current_user();
 if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="user-bought">&hearts; Ei ' . $current_user->first_name . ', você já comprou isso antes. Compre novamente usando este cupom: <b>PURCHASE_AGAIN_21</b></div>';
 fim se;
 get_footer('loja'); 

3. Remova o botão adicionar ao carrinho com base na quantidade do produto e no preço total do carrinho

Outro exemplo interessante se você deseja personalizar seus modelos do WooCommerce programaticamente é adicionar o botão Carrinho dependendo do número de itens que o cliente está comprando, bem como o preço total do carrinho.

Nesse caso, entraremos no loop WooCommerce usando um arquivo localizado dentro da pasta loop no diretório de modelos. Basta criar um novo arquivo add-to-cart.php em uma pasta chamada loop , na pasta woocommerce do seu tema filho e colar este script:

 if ( !defined( 'ABSPATH' ) ) {
 saída;
 }
 global $produto;
 $count= WC()->cart->get_cart_contents_count();
 $total_price= WC()->cart->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($matches[0][1]);
 if($to_int>500){
 echo "Excede o valor limite para o carrinho total";
 }
 elseif($conta<10){
 echo apply_filters(
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
 sprintf(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url( $product->add_to_cart_url() ),
 esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
 esc_html( $product->add_to_cart_text() )
 ),$produto,$args);
 }
 senão{
 echo "Limite de quantidade excedido";
 }

Nesse caso, estamos adicionando uma instrução if() lógica condicional para verificar se há mais de 10 itens adicionados ao carrinho e o preço total do carrinho não é superior a US$ 500.

Como você pode ver, estamos entrando no escopo da classe WooCommerce chamando o objeto WooCommerce desta forma: WC()->cart . Dessa forma, você pode recuperar algumas informações para adicionar ou não um botão de carrinho à página da loja, com base em suas condicionais.

Aqui está o resultado ao aplicar ambas as restrições condicionais:

Tenha em mente que isso só funcionará na página principal da loja. Você precisará adicionar mais código se quiser fazer o mesmo em outras páginas.

4. Edite os arquivos de modelos de e-mail do WooCommerce

Os modelos de e-mail já incluem links úteis para seu site, mas alguns usuários podem não estar cientes disso. Então, vamos adicionar um link para os modelos de e-mail onde os usuários podem fazer login no site diretamente do e-mail que receberam.

Vamos adicionar o link no cabeçalho do layout do email, então precisamos de uma cópia do arquivo email-header.php , localizado na pasta email do subdiretório templates do WooCommerce.

Crie uma nova pasta no seu tema filho e cole o arquivo lá com o mesmo nome. Você verá os sinalizadores iniciais <!–header–> e <!–end header–> , e é aí que você adicionará o link:

 <!-- Cabeçalho -->
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Faça login na sua conta</a></span>';?>
 </h3>
 </td>
 </tr>
 </table>
 <!-- Finalizar Cabeçalho →

É isso! Você acabou de editar o arquivo de cabeçalho do modelo de e-mail WooCommerce. Da mesma forma, você pode editar todos os arquivos de modelo de e-mail localizados neste diretório. Para obter mais informações sobre como testar seus modelos de email, consulte este guia completo.

Para visualizar os modelos, recomendamos que você use um plug-in de visualização de e-mail. Aqui, você encontrará alguns dos plugins de e-mail que você pode usar.

5. Como aplicar o estilo CSS aos modelos de e-mail WooCommerce

Outra alternativa interessante é personalizar o estilo de seus modelos WooCommerce de forma programática. Depois de editar a marcação HTML, você pode adicionar algum estilo CSS aos modelos de email. Considerando que o CSS inline não é uma prática recomendada, precisaremos usar o arquivo email-styles.php . Este é o arquivo que manipula o CSS para os modelos de email.

Para aplicar um código CSS personalizado aos e-mails, copie este arquivo das pastas do plugin WooCommerce e cole-o na pasta WooCommerce do seu tema. Este é um arquivo PHP, então você poderá usar variáveis, funções e construir sua própria instrução lógica e aplicá-las aos estilos:

 uma {
 cor: <?php echo esc_attr( $link_color ); ?>;
 peso da fonte: normal;
 decoração de texto: sublinhado;
 }

E este é o seletor de link personalizado:

 .meu-link > a:nth-filho(1){
 cor branca;
 tamanho da fonte: 14px;
 }

Conclusão

Em resumo, editar arquivos de modelo é uma excelente maneira de se destacar de seus concorrentes e proporcionar a seus clientes uma melhor experiência de compra.

Existem 2 maneiras principais de personalizar os modelos do WooCommerce programaticamente:

• Com ganchos
• Sobrescrevendo os modelos

Comparamos os dois métodos e mostramos vários exemplos. Você pode usar os scripts como base e brincar para personalizá-los e aplicá-los à sua loja.

Se você tiver algum problema ao seguir o guia, informe-nos nos comentários abaixo e faremos o possível para ajudá-lo.