Como Truncar Títulos de Produtos no WooCommerce

Aprenda como truncar títulos de produtos no WooCommerce para que mostrem apenas uma quantidade reduzida de caracteres e trunque com reticências.

Para exibir o título do produto no WooCommerce de forma mais curta, com reticências (“…”) no final quando o título ultrapassar um determinado comprimento, você pode implementar uma solução personalizada utilizando PHP e CSS, ou apenas CSS, dependendo do caso. Abaixo, apresento duas abordagens comuns, respeitando as diretrizes de formalidade, clareza e precisão:

1. Truncar Títulos Usando CSS para truncar o título com reticências

Essa é a abordagem mais simples e não requer alterações no código PHP do tema. Você pode adicionar regras CSS para limitar o comprimento do título e exibir reticências quando ele for muito longo.

Passos:

1. Identifique o seletor CSS do título do produto: No WooCommerce, o título do produto geralmente aparece em elementos como <h2 class="woocommerce-loop-product__title"> ou <h1 class="product_title">. Você pode inspecionar o código da sua loja para confirmar a classe exata.
2. Adicione o CSS personalizado: Use o seguinte código CSS para truncar o título.

/* Adicione este código no arquivo de estilos do seu tema (style.css) ou no personalizador do WordPress (Aparência > Personalizar > CSS Adicional) */
.woocommerce-loop-product__title,
.product_title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita o título a 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Ajuste conforme necessário */
}

Explicação:

• display: -webkit-box: Define o elemento como um bloco flexível para suportar o truncamento de várias linhas.
• -webkit-line-clamp: 2: Limita o texto a duas linhas (pode ser ajustado para 1 ou mais).
• text-overflow: ellipsis: Adiciona as reticências (“…”) no final do texto truncado.
• overflow: hidden: Garante que o texto excedente seja oculto.

Vantagem: Essa solução é puramente visual, não altera o conteúdo do título no banco de dados ou no SEO, e é fácil de implementar.
Limitação: Funciona apenas para truncamento visual e pode não ser ideal se você precisar do título truncado em outros contextos (como em e-mails ou meta dados).

2. Usando PHP para truncar o título no código

Se você deseja truncar o título diretamente no código do WooCommerce, garantindo que ele seja exibido de forma mais curta em todos os contextos (como na página de loja, produto ou widgets), você pode usar um filtro no PHP para modificar o título do produto.

Passos:

1. Adicione um filtro ao seu tema: Edite o arquivo functions.php do seu tema ativo (recomenda-se usar um tema filho para evitar perdas em atualizações).
2. Use o filtro the_title ou woocommerce_product_get_name: O filtro the_title é genérico para títulos no WordPress, enquanto woocommerce_product_get_name é específico para produtos no WooCommerce.

Exemplo de código PHP:

add_filter('the_title', 'custom_truncate_product_title', 10, 2);

function custom_truncate_product_title($title, $id) {
    // Verifica se é um produto do WooCommerce
    if (get_post_type($id) === 'product' && !is_admin()) {
        $max_length = 50; // Define o comprimento máximo do título (em caracteres)
        if (strlen($title) > $max_length) {
            $title = substr($title, 0, $max_length) . '...';
        }
    }
    return $title;
}

Explicação:

• get_post_type($id) === 'product': Garante que o filtro seja aplicado apenas a produtos do WooCommerce.
• !is_admin(): Evita que o truncamento ocorra no painel administrativo do WordPress.
• substr($title, 0, $max_length): Corta o título para o comprimento máximo definido (50 caracteres neste exemplo).
• '...': Adiciona as reticências ao final do título truncado.
• $max_length: Ajuste o valor conforme necessário (por exemplo, 30, 40 ou 60 caracteres).

Alternativa com o filtro específico do WooCommerce:
Se você preferir usar o filtro específico do WooCommerce, substitua o código acima por:

add_filter('woocommerce_product_get_name', 'custom_truncate_woocommerce_product_name', 10, 2);

function custom_truncate_woocommerce_product_name($title, $product) {
    $max_length = 50; // Define o comprimento máximo do título (em caracteres)
    if (strlen($title) > $max_length) {
        $title = substr($title, 0, $max_length) . '...';
    }
    return $title;
}

Vantagem: Essa abordagem trunca o título no nível do servidor, afetando todos os locais onde o título é exibido (página de loja, produto, widgets, etc.).
Limitação: Alterações no título podem impactar o SEO, pois o título truncado será usado em meta tags e outros contextos. Para evitar isso, você pode combinar com a solução CSS ou usar filtros adicionais para preservar o título completo em meta dados.

3. Considerações adicionais

• SEO: Se você usar a abordagem PHP, certifique-se de que o título completo ainda seja usado em meta tags (como <title> e meta description). Você pode usar o filtro wp_title ou plugins de SEO (como Yoast ou Rank Math) para gerenciar isso.
• Testes: Após implementar qualquer uma das soluções, teste em diferentes páginas (loja, produto, carrinho, etc.) para garantir que o resultado visual seja consistente.
• Responsividade: Na solução CSS, ajuste o max-width ou -webkit-line-clamp para diferentes tamanhos de tela usando media queries, se necessário.

Exemplo de media query para responsividade:

@media (max-width: 768px) {
    .woocommerce-loop-product__title {
        -webkit-line-clamp: 1; /* Limita a 1 linha em telas menores */
    }
}

---

Recomendação

A abordagem CSS é geralmente mais segura e flexível, pois não altera o conteúdo do título e é mais fácil de ajustar. Use a abordagem PHP apenas se precisar que o título truncado seja aplicado em todos os contextos (como e-mails ou APIs). Para implementar, escolha a solução que melhor se adequa ao seu caso e teste exaustivamente.

Para adicionar CSS personalizado que afete apenas o WooCommerce em seu tema WordPress, é necessário garantir que o código seja aplicado de maneira correta e segura, sem impactar outras partes do site. Abaixo, apresento as opções recomendadas para adicionar o CSS, mantendo a formalidade, clareza e precisão solicitadas:

4. Adicionar CSS no Personalizador do WordPress

O WordPress oferece uma seção de CSS personalizado no painel administrativo, ideal para pequenas alterações e que não requer edição de arquivos do tema.

Passos:

1. Acesse o painel administrativo do WordPress.
2. Navegue até Aparência > Personalizar.
3. No menu do personalizador, clique em CSS Adicional.
4. Insira seu código CSS, garantindo que os seletores sejam específicos para o WooCommerce. Por exemplo:

/* CSS específico para o WooCommerce */
.woocommerce .woocommerce-loop-product__title,
.woocommerce .product_title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

5. Clique em Publicar para salvar as alterações.

Vantagens:

• Não requer edição de arquivos do tema, evitando perdas em atualizações.
• Fácil de gerenciar e testar diretamente no painel.
• Seguro para usuários sem conhecimento técnico avançado.

Limitações:

• Pode ser menos organizado para grandes quantidades de CSS.
• Não permite enfileiramento condicional (aplicar apenas em páginas do WooCommerce).

Dica: Use seletores específicos do WooCommerce, como .woocommerce, .product, ou .woocommerce-loop-product__title, para evitar que o CSS afete outras áreas do site.

5. Adicionar CSS no arquivo style.css do tema

Você pode adicionar o CSS diretamente no arquivo style.css do seu tema ativo ou, preferencialmente, em um tema filho para evitar perdas durante atualizações do tema principal.

Passos:

1. Acesse os arquivos do seu site via FTP/SFTP (usando ferramentas como FileZilla) ou pelo gerenciador de arquivos do painel de hospedagem.
2. Localize o arquivo style.css no diretório do seu tema ativo (geralmente em wp-content/themes/nome-do-tema/style.css).
3. Se estiver usando um tema filho, edite o style.css do tema filho (em wp-content/themes/nome-do-tema-filho/style.css).
4. Adicione o CSS no final do arquivo, com seletores específicos para o WooCommerce. Exemplo:

/* Estilos específicos para o WooCommerce */
.woocommerce .woocommerce-loop-product__title,
.woocommerce .product_title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

5. Salve o arquivo e limpe o cache do site (se aplicável) para visualizar as alterações.

Vantagens:

• Centraliza os estilos no arquivo principal do tema.
• Ideal para projetos com muitas personalizações.

Limitações:

• Edições diretas no tema principal podem ser sobrescritas em atualizações.
• Não é condicional (o CSS será carregado em todas as páginas, a menos que você use uma abordagem mais avançada).

Recomendação: Sempre use um tema filho para evitar perder alterações durante atualizações do tema. Para criar um tema filho, consulte a documentação oficial do WordPress ou use um plugin como Child Theme Configurator.

6. Criar um arquivo CSS personalizado para o WooCommerce

Para maior organização e para carregar o CSS apenas nas páginas do WooCommerce, você pode criar um arquivo CSS separado e enfileirá-lo condicionalmente usando o arquivo functions.php do seu tema.

Passos:

1. Crie um arquivo CSS:

• No diretório do seu tema ou tema filho (por exemplo, wp-content/themes/nome-do-tema-filho/woocommerce-custom.css), crie um arquivo chamado woocommerce-custom.css.
• Adicione o CSS específico para o WooCommerce. Exemplo:

/* woocommerce-custom.css */
.woocommerce .woocommerce-loop-product__title,
.woocommerce .product_title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

2. Enfileire o arquivo CSS condicionalmente:

• Edite o arquivo functions.php do seu tema ou tema filho.
• Adicione o seguinte código para carregar o CSS apenas em páginas do WooCommerce:

add_action('wp_enqueue_scripts', 'enqueue_woocommerce_custom_css');

function enqueue_woocommerce_custom_css() {
    // Verifica se a página atual é do WooCommerce
    if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) {
        wp_enqueue_style(
            'woocommerce-custom',
            get_stylesheet_directory_uri() . '/woocommerce-custom.css',
            array(),
            '1.0.0'
        );
    }
}

Explicação:

• is_woocommerce(), is_cart(), is_checkout(), is_account_page(): Funções do WooCommerce que verificam se a página atual é uma página de loja, carrinho, checkout ou conta.
• wp_enqueue_style: Enfileira o arquivo CSS apenas nas páginas especificadas.
• get_stylesheet_directory_uri(): Garante que o caminho do arquivo CSS seja correto, mesmo em temas filhos.

1. Salve os arquivos e limpe o cache do site, se necessário.

Vantagens:

• O CSS é carregado apenas nas páginas do WooCommerce, otimizando o desempenho.
• Mantém o código organizado e modular.
• Seguro contra atualizações, se usado em um tema filho.

Limitações:

• Requer conhecimento básico de PHP e acesso aos arquivos do tema.
• Exige a criação de um arquivo CSS separado.

7. Usar um plugin de CSS personalizado

Se você prefere evitar a edição de arquivos, pode usar um plugin como Simple Custom CSS, Custom CSS Pro ou WP Add Custom CSS para adicionar CSS específico ao WooCommerce.

Passos:

1. Instale e ative um plugin de CSS personalizado pelo painel do WordPress (em Plugins > Adicionar Novo).
2. Acesse a seção do plugin no painel (geralmente em Aparência ou uma aba própria do plugin).
3. Adicione o CSS com seletores específicos do WooCommerce, como no exemplo acima.
4. Salve e verifique o resultado.

Vantagens:

• Fácil de usar, sem necessidade de editar arquivos.
• Ideal para iniciantes ou sites com poucas personalizações.

Limitações:

• Menos flexível para enfileiramento condicional.
• Depende de um plugin adicional, o que pode não ser ideal para otimização.

---

Recomendações

• Melhor opção para iniciantes: Use o Personalizador do WordPress (opção 1) ou um plugin de CSS (opção 4) para adicionar o CSS rapidamente e com segurança.
• Melhor opção para desempenho: Use um arquivo CSS personalizado com enfileiramento condicional (opção 3) para carregar o CSS apenas nas páginas do WooCommerce.
• Melhor prática geral: Sempre use um tema filho ao editar arquivos do tema (style.css ou functions.php) para evitar perdas em atualizações.
• Testes: Após adicionar o CSS, teste em diferentes páginas do WooCommerce (loja, produto, carrinho, etc.) e em dispositivos móveis para garantir que o estilo seja aplicado corretamente.
• Especificidade: Sempre use seletores específicos do WooCommerce (como .woocommerce, .product, ou .woocommerce-loop-product__title) para evitar conflitos com outras partes do site.