Como editar a página do produto WooCommerce programaticamente

Publicados: 2021-01-09

Procurando maneiras de personalizar a página do produto em sua loja de comércio eletrônico? Neste guia, mostraremos como editar a página do produto WooCommerce programaticamente .

Personalizando a página do produto

Mesmo que você possa personalizar qualquer coisa em sua loja, as duas páginas principais onde a maioria das personalizações ocorrem no WooCommerce são a página da loja e a página de produtos. Se você quer potencializar suas vendas e otimizar o início do processo de compra, precisa trabalhar nos dois. Já vimos como personalizar a página da loja, então hoje mostraremos como editar a página do produto programaticamente (com código).

Um design elegante que se concentra em fornecer a melhor experiência do cliente ajudará você a melhorar o processo geral de compra e aumentar suas taxas de conversão. Existem duas maneiras principais de personalizar a página do produto:

Com plug-ins
Programaticamente

Mesmo que alguns plugins possam ajudá-lo, encontrar um que tenha todos os recursos que você deseja pode ser um processo longo. Portanto, se você possui algumas habilidades básicas de desenvolvedor, uma excelente opção é editar a página do produto WooCommerce de forma programática . Você não apenas pode evitar a instalação de ferramentas de terceiros, mas também terá muito mais flexibilidade para personalizar o que quiser.

Se você quiser personalizar a página do produto com plugins e construtores de páginas, confira este guia.

Como editar a página do produto WooCommerce programaticamente

Nesta seção, você aprenderá como editar a página do produto WooCommerce para produtos únicos. Abordaremos os seguintes tópicos.

Usando ganchos
1. Remover elementos
2. Reordenar elementos
3. Adicionar novos elementos
4. Aplicar lógica condicional
  1. Usuário conectado e função de usuário
  2. IDs de produtos e taxonomias
5. Editar guias de produtos
6. Suporte para produtos variáveis
Substituir arquivos de modelo do WooCommerce
1. Edite as meta-informações
2. Mudar para um modelo personalizado para uma categoria de produto específica
  1. Edite o arquivo single-product.php
  2. Crie um novo arquivo content-single-product.php
  3. Crie um modelo personalizado editando seu novo arquivo content-single-product.php
Personalizando a página do produto com scripts CSS

Layout da página do produto WooCommerce

Antes de começar com o tutorial, vamos dar uma olhada na página de produto padrão no WooCommerce para produtos individuais e identificar cada elemento. Preste atenção às diferentes seções do modelo e como as informações estão organizadas, pois iremos nos referir a elas mais adiante no guia. Página de produto único WooCommerce Existem dois arquivos principais do WooCommerce responsáveis pela saída da página do produto.

single-product.php : Cria o modelo necessário para o layout atual
content-single-product.php : Este arquivo imprime o conteúdo no template

Ambos os arquivos podem ser substituídos usando um tema filho. Esta é uma prática comum para substituir os arquivos de modelo do WooCommerce. No entanto, você deve tentar usar os ganchos do WooCommerce em vez de substituir os arquivos de modelo sempre que possível, porque é uma das melhores práticas que o WordPress recomenda ao personalizar seu site.

Por outro lado, para tarefas complexas que incluem funções ou objetos, pode ser necessário editar os arquivos de modelo. Combinando as duas técnicas, você deve conseguir praticamente qualquer personalização que desejar. Portanto, neste tutorial, mostraremos como editar a página do produto WooCommerce usando os dois métodos.

Antes de começarmos, certifique-se de criar um tema filho para testar seus scripts ou use um plugin para gerar um. Vamos ver alguns exemplos práticos para você aprender como funciona cada uma dessas técnicas para aproveitar ao máximo sua loja.

1) Edite a página do produto WooCommerce usando ganchos

NOTA : Se você não estiver familiarizado com os ganchos do WooCommerce e como usá-los, confira este guia.

1.1) Remova elementos de páginas de produtos únicos

Existem vários ganchos do WooCommerce que você pode usar para remover qualquer elemento em uma única página de produto. Cada um deles funcionará com um grupo de elementos específicos, então você precisa usar o gancho certo, a função de retorno de chamada correta do WooCommerce e o valor de prioridade certo.

Por exemplo, se você deseja remover o título de todas as páginas de produtos, você usará o seguinte script no arquivo functions.php do seu tema filho.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Você encontrará todos os ganchos e seus parâmetros relacionados aqui ou nos comentários no arquivo content-single-product.php do plugin WooCommerce. Agora, vamos dar uma olhada em alguns outros scripts de amostra para remover diferentes elementos e personalizar a página do produto.

 // remove o titulo
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// remove estrelas de classificação
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// remove meta do produto 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// remove a descrição
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// remove as imagens
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// remove produtos relacionados
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// remove as guias de informações adicionais
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) Reordenar elementos

Reordenar os elementos da página do produto é bastante simples. Primeiro, você precisa remover o gancho da mesma maneira que fizemos antes e, em seguida, adicioná-lo novamente com uma prioridade/número de pedido diferente. Por exemplo, o script a seguir moverá a descrição do produto logo abaixo do título:

 // altera a ordem da descrição
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Como você vê, removemos a ação e a adicionamos novamente com uma prioridade diferente (6 em vez de 20). Por que escolhemos uma prioridade/ordem de 6? Sabemos que o elemento title tem um valor de prioridade de 5, então isso nos permite saber o valor de prioridade que precisamos atribuir ao nosso gancho personalizado para exibir o elemento de retorno de chamada logo após o título (6).

Usando as informações que fornecemos no ponto 1.1, você pode fazer o mesmo com quaisquer ganchos e retornos de chamada e colocá-los na ordem que desejar.

1.3) Adicionar novos elementos

Se você precisar personalizar a página do produto WooCommerce adicionando novo conteúdo, talvez seja necessário substituir os arquivos de modelo. No entanto, você também pode usar o seguinte gancho para adicionar novo conteúdo:

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Parabéns, você acabou de adicionar um link!</a></h4>');
}
);

woocommerce_before_single_product_summary gancho personalização da página do produto Alternativamente, você pode criar sua própria função:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
function QuadLayers_callback_function(){
    printf('
    <h1> Olá!</h1>
    <div><h5>Bem-vindo à minha página de produtos personalizados</h5>
    <h4><a href="?link-to-somewere">Link para algum lugar!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

1.4) Lógica condicional em uma única página de produto

Já vimos como adicionar campos condicionais na página de checkout, mas você também pode adicioná-los à página do produto. Você pode criar lógica condicional para atender aos requisitos desejados usando qualquer uma das funções nativas do WordPress. Vamos dar uma olhada em alguns exemplos.

1.4.1) Usuário conectado e função de usuário

O user_is_logged_in() é uma função padrão do WordPress usada para validar os visitantes do site. Além disso, podemos usar a função wp_get_current_user() para recuperar todas as informações relacionadas ao usuário logado. No script a seguir, estamos simplesmente adicionando algum conteúdo com base em se o usuário está logado e em sua função, mas você pode adicionar suas funções personalizadas para funcionalidades mais complexas

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
function QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $usuário = wp_get_current_user(); 
    printf('<h1>Olá ' .$user->user_nicename.'!</h1>');
    $roles = (array) $user->roles;
        if($roles[0]=='administrador'){
            echo "<h4><b>Você é $roles[0]</h4></b>";
        }     
    } 
    senão {
    return array();
    }     
}

1.4.2) IDs de produtos e taxonomias

Da mesma forma, podemos recuperar o ID do produto e/ou as categorias do produto. A diferença é que vamos usar o objeto global WP $post para obter o ID e a função get_the_terms() para obter as categorias de produtos.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomias');
function QuadLayers_get_product_taxonomias(){ 
    global $post; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat');
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'nome'));
    if($terms_string=='Pôsteres'){
        eco "
<h1>Este é um dos nossos melhores $terms_string</h1>"; echo "<h2>ID do produto: $post->ID"; } }

O script acima retornará uma única categoria. Se você precisar recuperar várias categorias ou tags, precisará criar uma função mais complexa. Você terá que percorrer as taxonomias antes de aplicar suas condicionais, conforme mostrado abaixo:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomias');
function QuadLayers_get_multiple_taxonomias(){
    global $post;
    $args = array( 'taxonomia' => 'produto_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $conta = contagem($termos);
 if ($conta > 0) {
        echo '<div class="custom-content"><h4>Lista de tags:</h4><ul>';
        foreach ($terms as $term) {echo '<li>'.$term->nome.'</li>';}
        echo "</ul></div>";
    }
}

1.5) Editar guias de produtos

O gancho de filtro woocommerce_product_tabs nos permite remover, adicionar, reordenar ou adicionar uma nova guia na seção Informações adicionais . O script a seguir removerá a guia Descrição e seu conteúdo, renomeará a guia Revisões e alterará a prioridade de Informações adicionais para o primeiro lugar.

 add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs) {
    unset( $tabs['description'] ); //Remove a aba Descrição
    $tabs['reviews']['title'] = __( 'Avaliações' ); // Renomeia a guia Comentários
    $tabs['additional_information']['priority'] = 5; //Informações adicionais no início
    retornar $guias;
}

Edite a página do produto WooCommerce programaticamente - Personalize as guias do produto Para editar o conteúdo de uma guia, você precisa usar uma função de retorno de chamada como esta:

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

function woo_custom_description_tab( $tabs) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; //Retorno de chamada de descrição personalizada
	retornar $guias;
}
function woo_custom_description_tab_content() {
	eco '
<h2>Descrição personalizada</h2>
'; echo 'Aqui\'uma descrição personalizada'; }

Da mesma forma, podemos criar uma nova guia da seguinte forma:

 add_filter('woocommerce_product_tabs', 'woo_new_product_tab');
function woo_new_product_tab( $tabs) {	
	// Adiciona a nova aba	
	$tabs['test_tab'] = array(
		'title' => __( 'Nova guia de produto', 'woocommerce' ),
		'prioridade' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	retornar $guias;
}
function woo_new_product_tab_content() {
	echo '<h2>Nova guia de produto</h2><p>Aqui está o conteúdo da nova guia de produto</p>.'; 
}

Neste exemplo, acabamos de criar uma nova guia chamada "Nova guia de produto". É assim que fica no front-end.

1.6) Suporte para produtos variáveis

As variações de produtos são um recurso padrão do WooCommerce e você pode criar e usar produtos variáveis sem qualquer tipo de personalização. No entanto, você deve seguir as diretrizes do WooCommerce para tornar uma solução personalizada compatível com as variações do produto.

É importante observar que qualquer solução personalizada deve ser integrada ao site geral e não a uma única página. Então, tendo isso em mente, ainda podemos usar alguns dos ganchos disponíveis relacionados a produtos variáveis. Esses ganchos só serão acionados quando estiverem em uma página de produto variável.

woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation

2) Personalize a página do produto substituindo os arquivos de modelo do WooCommerce

A segunda alternativa para editar a página do produto WooCommerce programaticamente é substituir os arquivos de modelo. Como esse método é um pouco mais arriscado que o anterior, recomendamos que você crie um backup completo do seu site antes de começar. Se você não tiver certeza de como fazer isso, confira este guia sobre como fazer backup de um site WordPress.

Substituir arquivos de modelo do WooCommerce é semelhante a substituir qualquer outro arquivo em seu tema filho, portanto, para evitar perder suas personalizações ao atualizar seu tema, recomendamos que você crie um tema filho ou use qualquer um desses plug-ins se não tiver um.

2.1) Edite as meta-informações

Para editar as meta-informações, precisamos substituir o arquivo template responsável por imprimir os dados correspondentes. O arquivo meta.php localizado no plugin WooCommerce segue este caminho: woocommerce/templates/single-product/meta.php

Agora edite o diretório de arquivos do tema filho e crie uma pasta WooCommerce. Em seguida, crie outra pasta dentro dela chamada single-product e cole o arquivo meta.php lá: Child_theme/woocommerce/single-product/meta.php

Depois disso, você poderá editar o arquivo meta.php e ver suas alterações no frontend. O seguinte arquivo de amostra meta.php irá:

Altere o rótulo do SKU para ID
Altere as tags para Publicado em
Remova o rótulo da categoria

 global $produto;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ): ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce'); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>'); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Publicado em:', 'Publicado em:', count( $product->get_tag_ids () ), 'woocommerce' ). ' ', '</span>' ); ?>
	<?php do_action('woocommerce_product_meta_end'); ?>
</div>

2.2) Mude para um modelo personalizado para uma categoria de produto específica

Agora vamos tentar uma tarefa mais complexa. Iremos substituir o modelo de produto único apenas quando o produto atual pertencer a uma categoria específica.

2.2.1) Edite o arquivo single-product.php

Primeiro, copie o arquivo single-product.php e cole-o na pasta do seu tema filho, no diretório WooCommerce:

Child_theme/woocommerce/single-product.php

Em seguida, abra o arquivo e verifique a linha 37: wc_get_template_part('content','single-product');

É assim que o arquivo content-single-product.php entra em ação, imprimindo todos os elementos do produto atual para completar o loop e construir o layout.

Queremos sobrescrever este arquivo somente quando o produto pertencer à categoria especificada, então vamos deletar a linha 37: wc_get_template_part( 'content', 'single-product' ); e substitua-o pelo seguinte script:

 $terms = wp_get_post_terms( $post->ID, 'product_cat');
				$categorias = wp_list_pluck( $terms, 'slug');
			
				if ( in_array( 'posters', $categories ) ) {
					wc_get_template_part( 'conteúdo', 'posters de produto único' );
				} senão {
					wc_get_template_part( 'conteúdo', 'produto único');
				}

Observe que estamos usando os produtos de amostra fornecidos pelo WooCommerce, portanto, há uma categoria chamada “ Pôsteres ” que estamos usando para este exemplo. Basta substituir “ posters ” por uma categoria de produto existente do seu site.

Lembre-se de que você pode encontrar o slug de todas as suas categorias de produtos no painel principal do WordPress > Produtos > Categorias .

2.2.2) Crie um novo arquivo content-single-product.php

Agora precisamos criar um novo arquivo que substituirá o arquivo default content-single-product.php . Este arquivo terá a categoria slug em seu nome.

Dê uma olhada no exemplo acima para ver como o arquivo content-single-product-posters.php é chamado. Isso é importante porque o nome do arquivo deve corresponder ao código da etapa anterior, portanto, seu arquivo deve ser chamado content-single-product-/*YOURCATEGORYSLUG*/.php .

Dessa forma, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) acionará o arquivo content-single-product-YOURCATEGORY.php e substituirá o arquivo de modelo padrão do WooCommerce.

Basta colar o arquivo padrão content-single-product.php na pasta WooCommerce do seu tema filho, renomeá-lo seguindo as instruções explicadas acima e fazer algumas edições para testá-lo.

2.2.3) Crie um modelo personalizado editando seu novo arquivo `content-single-product.php`

Esta é uma página de amostra de produto que será exibida somente quando o produto atual pertencer à categoria “ posters ”. Você verá que adicionamos algum conteúdo, adicionamos e removemos elementos, os reordenamos e executamos alguns códigos de acesso.

Apesar de ser um exemplo básico, ele lhe dará uma ideia do que você pode fazer em uma página de modelo e permitirá explorar novas possibilidades.

 // remove os elementos do resumo do produto
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Conteúdo personalizado
		printf('<h1>Este é o <b>'.$post->post_name.' </b>poster</h1>');
		printf('<h4>Uma página de produto personalizada completa para os produtos da categoria "posters"</h4>');
		// Descrição
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//miniatura
		do_action('woocommerce_before_single_product_summary');
				
		//adiciona meta
		do_action('woocommerce_single_product_summary');
		// códigos de acesso
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Contato:</h3>".do_shortcode('[wpforms]'); echo "<h3>Mais pôsteres:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Agora, se verificarmos o frontend, veremos o seguinte: Como editar a página do produto WooCommerce programaticamente - Modelo de página do produto para taxonomia específica Observe que estamos usando o objeto global post. var_dump($post); para mostrar todas as informações disponíveis relacionadas ao produto atual. Você pode usar qualquer um de seus dados como fizemos no script de exemplo com a descrição do produto: $post->post_excerpt .

3) Personalize a página do produto com script CSS

Outra maneira prática e simples de editar a página do produto WooCommerce (e qualquer outra página) programaticamente é usando o código CSS . Isso ajudará você a estilizar a página do produto e a dar a aparência do seu negócio.

1. Primeiro, você precisa criar um novo arquivo em seu tema filho com a extensão .css para poder adicionar seus scripts CSS lá. Recomendamos que você o nomeie como single-product.css ou algo semelhante para que seja fácil encontrá-lo.
2. Em seguida, coloque o arquivo na pasta principal do tema filho no mesmo nível dos arquivos functions.php e style.css .
3. Depois disso, cole o seguinte script no arquivo functions.php do seu tema filho e substitua o nome do seu arquivo CSS, se necessário.

 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      function load_custom_product_style() {
        if ( is_product() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all');
          wp_enqueue_style('product_css');
        }
	  }

A condicional if(is_product()) verificará se a página atual é uma página de produto. Isso evita carregar desnecessariamente o arquivo CSS quando não é uma página de produto.

4. Depois de adicionar esse snippet, você poderá editar o estilo das páginas do produto adicionando suas regras CSS personalizadas ao arquivo CSS.

Embora esse método seja bastante simples e forneça uma solução rápida e fácil, pode não ser ideal para alguns casos. Como o CSS pode ser editado a partir do frontend, se um usuário souber usar as ferramentas de desenvolvedor do navegador, ele poderá facilmente tornar visível qualquer elemento oculto editando o CSS.

Editar página de produto único do WooCommerce com CSS

Vamos ver alguns outros exemplos de mudanças que você pode fazer na página do produto usando um pouco de CSS.

Para aplicar os scripts a seguir, em seu painel do WordPress, vá para Aparência > Personalizar > CSS Adicional.

Alterar o tamanho da fonte do título

Isso alterará o tamanho da fonte dos títulos dos produtos da página para 32. Basta ajustar o código para selecionar o tamanho desejado.

 .woocommerce div.product .product_title { 
        tamanho da fonte: 32px; 
}

Alterar a cor do título

Você também pode personalizar a cor do título da página do seu produto. Para fazer isso, basta usar o código a seguir e ajustar a cor. Para este exemplo, estamos usando laranja. Recomendamos que você use um seletor de código hexadecimal como este para escolher a cor desejada.

 .woocommerce div.product .product_title { 
            cor: #FFA500; 
}

Alterar a cor do botão Comprar agora

Da mesma forma, você pode alterar a cor do botão Comprar agora. Neste exemplo, estamos usando o dodger blue, mas você pode escolher qualquer outra cor que desejar ajustando o código.

 .woocommerce div.product .button { 
        fundo: #1E90FF; 
}

Conclusão

Em resumo, personalizar sua loja virtual é fundamental para se destacar dos concorrentes. As páginas de produtos são algumas das páginas mais importantes em qualquer loja e há muito que você pode fazer para melhorar a experiência do cliente e aumentar suas vendas.

Mesmo que você possa usar plugins para isso, recomendamos que você edite a página do produto WooCommerce programaticamente se tiver algumas habilidades de codificação. Ele oferece muita flexibilidade para personalizar qualquer elemento de sua loja sem a necessidade de instalar ferramentas adicionais. Neste guia, vimos como personalizar a página do produto de três maneiras diferentes:

Usando ganchos
Substituindo modelos do WooCommerce
Com scripts CSS

Quando possível, você deve tentar usar os ganchos do WooCommerce em vez de substituir os arquivos de modelo. É uma das melhores práticas que o WordPress recomenda e é menos arriscada. No entanto, para tarefas complexas que incluem funções ou objetos, pode ser necessário editar os arquivos de modelo. Se você conseguir combinar as duas técnicas, poderá personalizar o que quiser em sua loja.

Finalmente, dê uma olhada no tema filho completo que inclui todos os scripts de amostra que usamos neste tutorial. Para obter mais informações sobre como personalizar sua loja, confira os seguintes guias:

Aprenda a personalizar os arquivos de modelo do WooCommerce
Como personalizar a página da loja WooCommerce
Personalize o botão Adicionar ao carrinho no WooCommerce
Como remover produtos relacionados ao WooCommerce
Como editar o Checkout WooCommerce (Codificação e Plugins)

Você teve algum problema ao seguir nosso tutorial? Deixe-nos saber na seção de comentários abaixo e faremos o nosso melhor para ajudá-lo.

Como editar a página do produto WooCommerce programaticamente

Personalizando a página do produto

Como editar a página do produto WooCommerce programaticamente

Layout da página do produto WooCommerce

1) Edite a página do produto WooCommerce usando ganchos

1.1) Remova elementos de páginas de produtos únicos

1.2) Reordenar elementos

1.3) Adicionar novos elementos

1.4) Lógica condicional em uma única página de produto

1.4.1) Usuário conectado e função de usuário

1.4.2) IDs de produtos e taxonomias

1.5) Editar guias de produtos

1.6) Suporte para produtos variáveis

2) Personalize a página do produto substituindo os arquivos de modelo do WooCommerce

2.1) Edite as meta-informações

2.2) Mude para um modelo personalizado para uma categoria de produto específica

2.2.1) Edite o arquivo single-product.php

2.2.2) Crie um novo arquivo content-single-product.php

2.2.3) Crie um modelo personalizado editando seu novo arquivo content-single-product.php

3) Personalize a página do produto com script CSS

Editar página de produto único do WooCommerce com CSS

Alterar o tamanho da fonte do título

Alterar a cor do título

Alterar a cor do botão Comprar agora

Conclusão

2.2.3) Crie um modelo personalizado editando seu novo arquivo `content-single-product.php`