Limitar o numero de caracteres nos títulos produtos do WooCommerce

Descubra como limitar o numero de caracteres nos títulos produtos do WooCommerce e deixar sua página do shop com uma aparência mais elegante. Confira os métodos!

Para limitar o número de caracteres nos títulos de produtos do WooCommerce, você pode usar um código personalizado ou um plugin. Aqui estão as duas abordagens mais comuns:

Usando Código Personalizado

Adicione o seguinte código ao arquivo functions.php do seu tema ou a um plugin personalizado:

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
    if ( ! is_singular( array( 'product' ) ) && get_post_type( $id ) === 'product' ) {
		return substr( $title, 0, 30); // change last number to the number of characters you want
    } else {
        return $title;
    }
}

O código acima foi testado e comprovado, para funcionar na maioria dos tema WooCommerce. No entanto, voc~e pode gostar de outroscript para limitar o numero de caracteres nos títulos produtos do WooCommerce, se este acima não funcionou.

Outro Código Personalizado para functions php

add_filter('the_title', 'limitar_titulos_produtos_woocommerce', 10, 2);
function limitar_titulos_produtos_woocommerce($title, $id) {
if (is_shop() || is_product_category() || is_product_tag() || is_product()) {
$limit = 40; // Defina o número máximo de caracteres
if (strlen($title) > $limit) {
$title = substr($title, 0, $limit) . '…';
}
}
return $title;
}

Como funciona:

• O código usa o filtro the_title para modificar os títulos exibidos.
• Verifica se a página é a loja, categoria, tag ou página de produto (is_shop(), is_product_category(), etc.).
• Limita o título a 40 caracteres (ajuste o valor em $limit conforme necessário) e adiciona “…” se o título for cortado.
• Para ajustar o limite, altere o número em $limit = 40;.

Cuidados:

• Faça backup do site antes de editar o functions.php.
• Use um tema filho para evitar que as alterações sejam sobrescritas em atualizações.

2. Usando um Plugin

Se prefere evitar código, você pode usar plugins como:

• Encurtador de Títulos: Permite definir um número máximo de caracteres para títulos de posts, páginas e produtos. Configure o limite nas opções do plugin.
• Plugin para Limitar Tamanho de Caracteres no Elementor: Ideal se você usa o Elementor para exibir produtos. Ele evita quebras de layout ao limitar caracteres nos títulos.

Como instalar e configurar:

1. Vá para Plugins > Adicionar Novo no painel do WordPress.
2. Pesquise pelo plugin (ex.: “Encurtador de Títulos”).
3. Instale, ative e siga as instruções do plugin para definir o limite de caracteres.

Observações

• Teste a exibição: Após aplicar a limitação, verifique o layout da loja em desktops e dispositivos móveis para garantir que os títulos não quebrem o design.
• SEO: Títulos muito curtos podem impactar o SEO. Considere um limite razoável (ex.: 60 caracteres) para manter informações relevantes.
• Mercado Livre: Se usa integrações como Woomelly, note que algumas plataformas têm limites próprios (ex.: 60 caracteres no Mercado Livre).

Limitar o número de caracteres nos títulos de produtos do WooCommerce usando CSS

Para limitar o número de caracteres nos títulos de produtos do WooCommerce usando CSS, você pode aplicar estilos que restringem a exibição do texto, como text-overflow, overflow, e max-width, ou usar um pseudo-elemento para truncar o texto visualmente. No entanto, o CSS não pode contar caracteres exatos diretamente, mas pode limitar o espaço de exibição, o que indiretamente controla a quantidade de texto visível. Abaixo está o passo a passo:

Solução com CSS

1. Identifique o seletor CSS dos títulos dos produtos

• No WooCommerce, os títulos dos produtos geralmente usam a classe .woocommerce-loop-product__title nas páginas da loja, categorias ou tags. Para a página do produto, pode ser .product_title.
• Inspecione o elemento no navegador (clique com o botão direito > Inspecionar) para confirmar o seletor exato no seu tema.

1. Adicione o CSS personalizado
   Use uma das abordagens abaixo para limitar a exibição dos títulos: Opção 1: Truncar com text-overflow: ellipsis Esse método corta o texto visualmente quando ele ultrapassa um certo espaço, adicionando “…” ao final.

   .woocommerce-loop-product__title {
       display: block; /* ou inline-block, dependendo do tema */
       max-width: 200px; /* Ajuste o valor para limitar o espaço (aproximadamente o número de caracteres) */
       white-space: nowrap; /* Impede que o texto quebre em várias linhas */
       overflow: hidden; /* Esconde o texto que ultrapassa o limite */
       text-overflow: ellipsis; /* Adiciona "..." ao final do texto cortado */
   }

• Como ajustar: O max-width (ex.: 200px) controla o espaço disponível. Para aproximar um limite de caracteres, teste valores como 150px (cerca de 15-20 caracteres) ou 300px (cerca de 30-40 caracteres), dependendo da fonte e tamanho do texto.
• Onde aplicar: Esse código afeta os títulos na página da loja, categorias ou tags. Opção 2: Limitar para uma linha com altura fixa Se você quer garantir que o título ocupe apenas uma linha e corte o restante:

   .woocommerce-loop-product__title {
       display: -webkit-box;
       -webkit-line-clamp: 1; /* Limita a 1 linha */
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
       max-height: 1.5em; /* Ajuste conforme o tamanho da fonte */
   }

• Como funciona: O -webkit-line-clamp limita o texto a uma linha, e o text-overflow: ellipsis adiciona “…” ao final.
• Nota: Funciona melhor em navegadores modernos, mas pode não ser compatível com versões muito antigas. Para página de produto individual Se quiser limitar o título na página do produto:

   .product_title {
       max-width: 300px; /* Ajuste o valor */
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

3. Como adicionar o CSS

• Opção 1: No painel do WordPress
  1. Vá para Aparência > Personalizar > CSS Adicional.
  2. Cole o código CSS escolhido.
  3. Publique as alterações.
• Opção 2: No arquivo do tema
  1. Acesse o arquivo style.css do seu tema (ou tema filho) via FTP ou pelo painel de administração.
  2. Adicione o código ao final do arquivo.
  3. Salve e limpe o cache do site, se necessário.
• Opção 3: Com um plugin
  Use um plugin como Simple Custom CSS ou WP Add Custom CSS para adicionar o código sem editar arquivos.

3. Teste e ajuste

• Verifique a loja, categorias e páginas de produtos em diferentes dispositivos (desktop e mobile).
• Ajuste o max-width ou max-height para corresponder ao número aproximado de caracteres desejado.
• Certifique-se de que o layout não quebre (ex.: títulos desalinhados ou cortados incorretamente).

Limitações do CSS

• Não conta caracteres exatos: O CSS limita com base no espaço visual (pixels), não no número de caracteres. Fontes, tamanhos e larguras de letras afetam o resultado.
• Apenas visual: O título completo ainda existe no código HTML, o que pode afetar o SEO ou integrações (ex.: Mercado Livre, que tem limite de 60 caracteres).
• Alternativa: Se você precisa de um limite exato de caracteres, combine o CSS com um código PHP (como no filtro the_title, explicado anteriormente) para truncar o texto no backend antes de renderizar.

Exemplo Prático

Para limitar títulos na loja a cerca de 30 caracteres (visualmente):

.woocommerce-loop-product__title {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Dicas Adicionais

• SEO: Títulos truncados apenas visualmente (via CSS) não afetam o SEO diretamente, mas títulos muito longos podem ser penalizados. Considere um limite razoável (ex.: 60 caracteres).
• Responsividade: Use unidades relativas como vw ou % em vez de px para melhor adaptação em telas menores:

  max-width: 80%;

• Teste com temas: Alguns temas do WooCommerce (ex.: Storefront, Astra) podem exigir seletores mais específicos ou ajustes no CSS.

Se precisar de ajuda para ajustar o CSS, testar em um tema específico ou combinar com PHP para um limite exato, posso detalhar mais!