Como classificar e exibir produtos no WooCommerce para maior conversão (6 métodos)

Principais conclusões

• A ordenação de produtos no WooCommerce melhora a navegação na loja, a experiência do utilizador e as conversões.
• O WooCommerce fornece vários métodos de ordenação, incluindo opções predefinidas, encomenda manual, códigos de acesso e plug-ins.
• A ordenação personalizada por categorias, atributos ou campos personalizados ajuda a adaptar a visibilidade do produto para uma melhor descoberta.
• Uma apresentação organizada dos produtos, combinada com um desempenho optimizado, melhora a experiência de navegação do cliente.

A classificação e a pesquisa de produtos do WooCommerce desempenham um papel fundamental na melhoria da experiência do cliente e no aumento das conversões.

Quando os clientes conseguem encontrar rapidamente os artigos na tua loja Woo, é mais provável que façam uma compra e voltem para comprar mais, desfrutando de uma boa experiência de utilizador.

Felizmente, podes ordenar e apresentar produtos no WooCommerce através de definições predefinidas, opções personalizadas, plug-ins e muito mais.

Este guia abrange 6 métodos para classificar e exibir produtos do WooCommerce, incluindo configurações básicas e avançadas, além de plugins essenciais. Também incluímos os prós e contras de cada método para te ajudar a escolher o que melhor se adapta ao teu negócio.

Por que deves ordenar e exibir produtos no WooCommerce?

A ordenação e apresentação de produtos no WooCommerce tem dois objectivos principais:

• Converte potenciais clientes em compradores
• Oferece uma excelente experiência de utilizador na tua loja

Ter controlo sobre a ordenação de produtos na tua loja Woo ajuda-te a atingir ambos os objectivos, criando uma loja mais organizada e fácil de navegar. Ao fazê-lo, a tua loja fica mais organizada e menos desorganizada.

Podes ordenar os produtos por critérios como a popularidade, a média de vendas ou categorias como roupa para homem e mulher.

No exemplo abaixo, a página inicial é bastante limpa e podes encontrar facilmente produtos de categorias como Novidades e Mais vendidos.

Para além de uma experiência de loja intuitiva, isto também te ajuda a aumentar as conversões. Por exemplo, ao ordenar os produtos por “popularidade“, encorajas indiretamente os clientes a comprar o que os outros estão a comprar, reforçando o apelo dos teus produtos de topo.

A loja está a crescer na época de vendas? Prepara-te para o futuro com a Autónoma!

Mantém sua loja pronta para todos os picos de tráfego inesperados com o Cloudways Autonomous. Fica à frente da curva com escalabilidade avançada e tecnologia de ponta.

Começa a trabalhar hoje

Como ordenar e exibir produtos do WooCommerce (6 métodos)

Como mencionado anteriormente, o WooCommerce oferece-te várias formas de ordenar e apresentar os produtos. Abordei seis dos melhores métodos para o fazer, para que possas escolher aquele com que te sentes mais confortável.

Método 1: Como ordenar produtos através das opções predefinidas do WooCommerce

O WooCommerce inclui opções de ordenação incorporadas. A forma mais fácil de ordenar produtos é utilizar estes métodos predefinidos, embora ofereçam um controlo e uma personalização limitados.

Utilizar o Personalizador

Nas versões mais recentes do WooCommerce, não encontrarás a opção de ordenação de produtos predefinida nas definições, pelo que terás de aceder à mesma através do Personalizador.

Para versões anteriores:

• Acede ao teu painel de controlo do WooCommerce > Definições > Separador Produto .

No menu pendente, verás a ordenação de produtos predefinida que se centra em diferentes classificações, como o preço e a popularidade.

Para WooCommerce 3.3 e versões superiores:

• Vai a Aparência > Personalizar no teu painel de administração do WordPress.

• Encontra a secção WooCommerce no Personalizador.

• Seleciona uma opção de ordenação no menu pendente (por exemplo, por preço, popularidade, classificação média, mais recente ou por ordem alfabética).

• Clica no botão“Publicar” para guardar as tuas alterações.

💡Utilizei aqui o tema Astra. Se estiveres a utilizar um tema predefinido do WordPress, podes ter de ir à secção Editor e seleciona o Modelo de arquivo de produtos do WooCommerce para editar o Product Query Loop.

Como alterar a ordem do menu por produto

Segue os passos abaixo se quiseres personalizar a ordem dos produtos individuais no menu de ordenação:

1. Clica em Editar em qualquer produto
2. Desloca-te para baixo até ao widget de dados do produto
3. Clica no separador Avançadas
4. Ajusta a definição Ordem do menu para alterar a posição do produto.

No backend, esta ação é gerida com o gancho woocommerce_catalog_order .

Prós e contras deste método

Fácil de instalar

Não precisas de codificação

Oferece opções básicas de ordenação (por exemplo, por preço, popularidade, data)

Personalização limitada

Não é adequado para necessidades de triagem complexas

Método 2: Como ordenar produtos no WooCommerce (manualmente)

Com o WooCommerce, também podes organizar manualmente os teus produtos. E isso é ótimo para criar exibições personalizadas de produtos e destacar itens importantes. Segue os passos abaixo:

• No teu painel de controlo do WordPress, vai a Produtos > Todos os produtos.

• Clica em Ordenar na parte superior da página.

• Arrasta e larga produtos para definir a tua ordem preferida.

A ordem personalizada que definires aqui será o ecrã predefinido para os clientes que naveguem na tua loja.

Ordenação manual de produtos individuais:

Para teres mais controlo sobre produtos individuais:

• Abre o produto no editor e desce até à secção Dados do produto .

• No separador Avançadas , define o Valor da encomenda do menu (os produtos com números mais baixos aparecem mais altos).

A definição da ordem do menu é especialmente útil se quiseres afinar a posição para além do simples arrastar e largar.

Prós e contras deste método

Controlo total da ordem de apresentação dos produtos

Interface simples de arrastar e largar

Demora muito tempo para grandes inventários

Necessita de actualizações regulares se as prioridades do produto mudarem

Como dimensionar a loja WooCommerce em 2024 – Métodos fáceis

Método 3: Como personalizar a ordenação por categoria ou atributo

Também podes agrupar os produtos por categorias ou atributos, o que ajuda os teus clientes a encontrar facilmente artigos dentro de grupos específicos. É mais eficaz quando tens uma gama de produtos diversificada na tua loja.

Segue estes passos:

• Clica em Produtos e depois seleciona Categorias na barra de ferramentas do WooCommerce

• Adiciona novas categorias ou gere as existentes, atribuindo produtos relevantes a cada uma delas.

• Para visualizar os produtos por categoria:

• • Vai a Aparência > Menus para adicionar ligações de categorias à tua navegação principal
  • Utiliza códigos de acesso específicos da categoria para teres mais controlo.

Shortcode para exibir produtos por categoria:

[products category=”category-slug” orderby=”date” order=”asc”]

Substitui “category-slug” pelo nome real da categoria.

Ordena por atributo:

O WooCommerce também te permite ordenar por atributos como a cor, o tamanho ou a marca. Para o configurares:

1. Vai a Produtos > Atributos para criar ou gerir atributos.
2. Atribui estes atributos a cada produto na secção Dados do produto na página de edição de cada produto.
3. Utiliza um widget de filtro na barra lateral ou utiliza códigos de acesso específicos para ativar a funcionalidade baseada em atributos.

Prós e contras deste método

Ordena os produtos por categorias ou atributos específicos (por exemplo, cor, tamanho)

Ideal para lojas com vários tipos de produtos

Requer uma configuração exacta dos atributos para cada produto

Pode tornar-se complexo, com muitas categorias ou atributos

Método 4: Como exibir produtos usando os códigos de acesso do WooCommerce

Outra forma de ordenar e apresentar produtos numa loja WooCommerce é através da utilização de códigos de acesso. Estes atalhos permitem-te definir os parâmetros de ordenação predefinidos (por exemplo, por preço, classificação, data) e a ordem de ordenação – ascendente ou descendente.

Segue-se um exemplo de um shortcode de apresentação simples. Também podes personalizar a apresentação utilizando outros atributos, incluindo as colunas, o limite, a categoria e assim por diante.

[products limit="8" columns="4"]

Aqui tens outros shortcodes para ordenar e apresentar produtos:

• Apresenta os produtos por categoria: [product_category category=”shirts” limit=”4″ columns=”2″]
• Mostra os produtos em destaque: [featured_products limit=”6″ columns=”3″]
• Apresenta os produtos mais vendidos: [best_selling_products limit=”5″ columns=”2″]
• Mostra os produtos recentes: [recent_products limit=”8″ columns=”4″]
• Mostra os produtos com melhor classificação: [sale_products limit=”6″ columns=”3″]

Vejamos o exemplo do shortcode para mostrar os produtos mais vendidos.

Para adicionar o shortcode [best_selling_products limit=”5″ columns=”2″] para apresentar os produtos mais vendidos na tua loja WooCommerce, segue estes passos:

• Navega até ao separador Páginas e seleciona Todas as páginas no teu painel de administração do WordPress (ou Publicações, Todas as publicações, se quiseres adicioná-las a uma publicação de blogue).
• Seleciona a página ou publicação onde pretendes que os produtos mais vendidos estejam e clica em Editar. Estou a escolher a Página inicial.

• No editor do WordPress, clica no botão + para adicionar um bloco.

• Na barra de pesquisa, procura por “Shortcode”.

• É aqui que adicionas o shortcode. Cola o seguinte:

[best_selling_products limit=5, columns=2]

💡limite: Determina quantos dos produtos mais populares devem ser mostrados.

💡colunas: Especifica o número de colunas a serem usadas para exibir os produtos.

1. Agora, prime o botão Publicar.
2. Navega pelo front end do teu site para confirmar que os produtos mais populares estão a ser promovidos corretamente.

Prós e contras deste método

Flexível para apresentares produtos ou categorias específicas em qualquer página

Altamente personalizável com parâmetros de shortcode

Personalização limitada ao nível da página

Pode necessitar de ajustes de estilo com determinados temas

Método 5: Como ordenar e apresentar utilizando plug-ins

A utilização de plug-ins WooCommerce dá-te opções mais avançadas e flexibilidade.

Para instalar e ativar os plug-ins de ordenação do WooCommerce, segue os passos seguintes:

• Vai ao teu painel de controlo do WordPress .
• Clica em Plugins > Adicionar novo plug-in.

• Procura o plugin que desejas.
• Clica em Instalar agora.

• Depois de instalado, clica em Ativar para ativar o plug-in.

Para este tutorial, instalei o plugin gratuito Extra Product Sorting Options for WooCommerce.

Encontrarás várias definições no painel de personalização do WooCommerce.

Fonte: WordPress.org

Na página da loja, encontrarás mais opções de ordenação.

Aqui estão alguns plugins populares do Woo para ordenar e exibir produtos:

1. Tabela de produtos do Woocommerce (premium)

Caraterísticas:

• Pesquisa instantânea, ordena e filtra
• Listagens de produtos personalizáveis
• Dezenas de integrações

Preços

Custa 99 dólares para um site.

2. Catálogo de produtos de comércio eletrónico (freemium)

Caraterísticas:

• Comércio eletrónico optimizado para SEO
• Número ilimitado de produtos
• Funcionalidade de arrastar e largar

Preços:

Gratuito ou $49/mês

3. Opções extra de ordenação de produtos para WooCommerce (gratuito)

Caraterísticas:

• Ativar a ordenação alfabética dos produtos
• Remove as principais opções de ordenação

Preços

Livre

Prós e contras deste método

Adiciona opções de ordenação avançadas sem necessidade de código

Alguns plugins oferecem filtros visuais e funcionalidades alargadas

Pode afetar a velocidade do sítio

Depende de plugins de terceiros, que podem exigir actualizações ou correcções regulares

Os tempos de carregamento lentos vão matar a tua loja Woocommerce

Quem quer uma loja morta? Utiliza o Breeze, um plugin de cache avançado em que milhares de proprietários de lojas confiam.

Obter gratuitamente

Método 6: Como adicionar a ordenação personalizada de produtos do WooCommerce (avançado)

Se considerares que os filtros de ordenação disponíveis são inadequados para os teus visitantes, podes também criar opções de ordenação personalizadas que aparecerão no menu pendente nas páginas da loja.

Ao fazê-lo, permite-te ordenar com base em campos personalizados ou metadados, tais como localização, pontos de venda ou outros atributos únicos.

Passo 1: Adiciona uma opção de ordenação personalizada

• Adiciona o seguinte trecho de código ao ficheiro functions.php do teu tema para adicionar uma nova opção de ordenação:

função add_custom_woocommerce_sort_option( $sort_options ) {
  $sort_options['custom_sort_order'] = 'Ordem de ordenação personalizada'; // Etiqueta para a opção de ordenação
  devolve $sort_options;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'add_custom_woocommerce_sort_option' );
add_filter( 'woocommerce_catalog_orderby', 'add_custom_woocommerce_sort_option' );

Passo 2: Define a lógica de ordenação

• Utiliza o seguinte código para implementar a lógica de ordenação personalizada. Substitui “your_custom_meta_key” pela meta key real utilizada para a ordenação:

função custom_product_sort( $query ) {

função custom_product_sort( $query ) {
  if ( ! is_admin() && $query->is_main_query() && is_shop() || is_product_category() ) { // Certifica-te que isto só afecta a página da loja e as categorias de produtos
  Se ( isset( $_GET['orderby'] ) && $_GET['orderby'] == 'custom_sort_order' ) {
  $query->set( 'meta_key', 'your_custom_meta_key' ); // Substitui 'your_custom_meta_key' pela tua meta chave atual
  $query->set( 'orderby', 'meta_value_num' ); // Para ordenação numérica; usa 'meta_value' para texto
  $query->set( 'order', 'DESC' ); // Define a ordem de ordenação (ASC ou DESC)
  }
  }
}
add_action( 'woocommerce_product_query', 'custom_product_sort' );

Como ordenar e apresentar produtos utilizando campos personalizados

Podes adicionar meta-valores para criar filtros de ordenação que contenham também números e texto .

Para te ajudar com os filtros personalizados, vou adicionar mais duas opções de ordenação: Ordenar por localização e Ordenar por pontos de venda.

Nota: Coloca o seguinte código no ficheiro functions.php do teu tema filho.

// Passo 1: Modifica os argumentos de encomenda do WooCommerce para suportar campos personalizados para ordenação
função cw_add_postmeta_ordering_args( $args_sort_cw ) {
  $cw_orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) : 
  aplica_filtros( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );

  switch( $cw_orderby_value ) {
  Caso "points_awarded":
  $args_sort_cw['orderby'] = 'meta_value_num';
  $args_sort_cw['order'] = 'DESC'; // Define a ordem de ordenação (ASC ou DESC)
  $args_sort_cw['meta_key'] = 'points'; // Meta-chave para 'points'
  quebra;
  Caso "localização":
  $args_sort_cw['orderby'] = 'meta_value';
  $args_sort_cw['order'] = 'ASC'; // Define a ordem de ordenação (ASC ou DESC)
  $args_sort_cw['meta_key'] = 'location'; // Meta-chave para 'location'
  quebra;
  }

  devolve $args_sort_cw;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'cw_add_postmeta_ordering_args' );

// Passo 2: Adiciona novas opções de ordenação ao menu suspenso do WooCommerce
função cw_add_new_postmeta_orderby( $sortby ) {
  $sortby['location'] = __( 'Ordenar por localização', 'woocommerce' );
  $sortby['points_awarded'] = __( 'Ordenar por ponto de venda', 'woocommerce' );
  devolve $sortby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'cw_add_new_postmeta_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'cw_add_new_postmeta_orderby' );

Depois de adicionares o código acima, os filtros de ordenação aparecerão no menu pendente das tuas páginas de produtos. No entanto, é apresentado no menu de ordenação, mas também te vou mostrar como apresentar estes valores em páginas de produtos individuais.

Como apresentar valores de campos personalizados em páginas de produtos

Adiciona o seguinte fragmento de código para apresentar campos como localização e pontos de venda nas páginas de produtos. Da mesma forma, podes apresentar qualquer campo personalizado na página da loja utilizando o mesmo meta-valor.

função cw_shop_display() {
  global $produto;
    
  // Obtém meta-campos personalizados para cada produto
  $location = get_post_meta( $product->get_id(), 'location', true );
  $point_of_sale = get_post_meta( $product->get_id(), 'points', true );

  se ( ! vazio( $localização ) ) {
  ecoa '
Localização: ' . esc_html( $localização ) . '  
';
  }
  se ( ! vazio( $ponto_de_venda ) ) {
  ecoa '
Pontos de venda: ' . esc_html( $ponto_de_venda ) . '  
';
  }

  se ( $product->get_sku() ) {
  ecoa '
SKU: ' . esc_html( $product->get_sku() ) . '  
';
  }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 );

• Sempre que um visitante selecionar uma opção de ordenação, os valores correspondentes serão alterados em conformidade. A seguinte captura de ecrã mostra Ordenar por localização.

• O mesmo se aplica à ordenação por Pontos de venda.

• Se quiseres editar um produto individual, terás de definir um valor para um campo personalizado.

Prós e contras deste método

Altamente personalizável

Permite-te ordenar por qualquer campo personalizado (por exemplo, classificações, localização)

Adequado para necessidades de triagem únicas e para um ecrã mais avançado

Requer conhecimentos de codificação

Pode necessitar de actualizações regulares com base nos requisitos de ordenação

Pronto para escalar a tua loja WooCommerce?

O Cloudways Autonomous oferece uma solução totalmente gerenciada que escala automaticamente usando a tecnologia Kubernetes para atender às necessidades da sua loja. Escala, protege e acelera o teu site sem esforço!

Experimenta agora

Resumo

Melhorar a ordem dos produtos numa loja WooCommerce pode alterar a forma como os clientes abordam a tua loja, resultando em vendas elevadas e na satisfação dos clientes.

Desde a simples ordenação predefinida até à personalização avançada com códigos de acesso, campos personalizados ou plug-ins, existe uma opção adequada a qualquer loja, especialmente quando associada a soluções de alojamento WooCommerce fiáveis para garantir um bom desempenho.

Se seguires os métodos apresentados neste blogue, não só optimizarása navegação da tua loja, como também darás destaque aos produtos importantes e mais vendidos, o que, por sua vez, melhorará a eficiência e o interesse da tua loja.