Exibir categorias, subcategorias e produtos do WooCommerce em listas separadas

• produtos
• categorias (na página principal da loja) ou subcategorias (nas páginas de categoria)
• produtos e categorias

Quando estou montando uma loja, normalmente seleciono a terceira opção: produtos e categorias/subcategorias. Isso significa que os visitantes da minha loja podem selecionar produtos diretamente na página inicial ou refinar sua pesquisa clicando em um arquivo de categorias de produtos.

No entanto, há uma falha nessa abordagem: ela exibe as categorias/subcategorias juntas, sem separação entre as duas. Isso significa que se as imagens do seu produto tiverem dimensões diferentes das imagens do produto, o layout pode parecer um pouco confuso. Mesmo que suas imagens tenham o mesmo tamanho, se uma das linhas da página de arquivo incluir categorias e produtos, a ausência de um adicionar ao carrinho O botão para categorias faz com que essa linha pareça desarrumada, pois nem todos os seus elementos têm as mesmas dimensões.

Então, vamos explorar como exibir categorias em uma lista separada antes de exibir produtos.

Para fazer isso, seguiremos quatro etapas:

1. Identifique o código que o WooCommerce usa para gerar categorias e subcategorias em páginas de arquivo.
2. Crie um plugin para nosso código.
3. Escreva uma função para colocar categorias ou subcategorias antes das listagens de produtos.
4. Estilize a saída.

Mas antes de começar, você precisará de uma instalação do WooCommerce com alguns produtos adicionados e categorias e subcategorias de produtos configuradas.

O que você precisará

Para acompanhar, você precisará de:

• uma instalação de desenvolvimento do WordPress
• um editor de código
• WooCommerce instalado e ativado
• produtos adicionados – importei os dados fictícios do produto que vêm com o WooCommerce; para obter detalhes sobre como fazer isso, consulte este guia
• um tema compatível com WooCommerce ativado – estou usando o Storefront

Antes de começar: as opções padrão

Vamos dar uma olhada no que o WooCommerce nos oferece por padrão.

Comecei adicionando algumas imagens às minhas categorias e subcategorias de produtos, já que os dados fictícios do WooCommerce não as incluem. Simplesmente usei uma imagem de um dos produtos de cada categoria ou subcategoria, como você pode ver na imagem:

Agora, vamos dar uma olhada em como o WooCommerce exibe as categorias de produtos e produtos nas páginas de arquivo.

Se ainda não o fez, abra o Personalizador, selecione o WooCommerce guia e clique em Catálogo de Produtos.

Sob Exibição da página da lojaselecione Mostrar categorias e produtose abaixo Exibição de categoriaselecione Mostrar subcategorias e produtos.

Clique Publicar para salvar suas alterações e visitar a página da loja do seu site. O meu é assim:

Como tenho quatro categorias e uma grade de três imagens lado a lado, os dois primeiros produtos são mostrados ao lado de uma das categorias.

Quero dar mais destaque às minhas categorias e subcategorias e simplesmente apresentá-las separadamente das listas de produtos. Então vamos fazer isso.

Identificando o código que o WooCommerce usa para gerar categorias e produtos em arquivos

A primeira etapa é identificar como o WooCommerce gera categorias e subcategorias. Então, vamos nos aprofundar no código-fonte do WooCommerce para encontrar a função relevante.

O arquivo que o WooCommerce usa para exibir páginas de arquivo é arquivo-produto.phpque está na pasta de modelos.

Dentro desse arquivo, você pode encontrar este código, que gera as categorias e produtos:

1

2

    /**

3

     * woocommerce_before_shop_loop hook

4

     *

5

     * @hooked woocommerce_result_count - 20

6

     * @hooked woocommerce_catalog_ordering - 30

7

    */

8

    do_action( ’woocommerce_before_shop_loop’ );

9

?>

10

11

 woocommerce_product_loop_start(); ?>

12

13

     woocommerce_product_subcategories(); ?>

14

15

     while ( have_posts() ) : the_post(); ?>

16

17

         wc_get_template_part( ’content’, ’product’ ); ?>

18

19

     endwhile; // end of the loop. ?>

20

21

php woocommerce_product_loop_end(); ?>

Então há um woocommerce_product_subcategories() função, que gera as categorias ou subcategorias, antes de executar o loop, que gera os produtos.

A função é conectável, o que significa que podemos substituí-la em nosso tema. Infelizmente, isso não funciona muito bem, pois o WooCommerce possui um estilo integrado para limpar itens, que apareceriam no início de uma linha com a exibição padrão.

Então, em vez disso, desativaremos a exibição de categorias e subcategorias em nossas páginas de arquivo, para que apenas os produtos sejam exibidos. Em seguida, criaremos uma nova função que gera as categorias ou subcategorias de produtos e a conectamos ao woocommerce_before_shop_loop ação, certificando-se de usar uma prioridade alta para que ela seja acionada após as funções que já estão vinculadas a essa ação.

Então, vamos criar um plugin que faça isso.

Criando o plug-in

Na tua wp-content/plugins diretório, crie uma nova pasta e dê a ela um nome exclusivo. Estou ligando para o meu tutsplus-categorias-de-produtos-separados-em-arquivos. Dentro dele, crie um novo arquivo, novamente com um nome exclusivo. Estou usando o mesmo nome: tutsplus-separate-products-categories-in-archives.php.

Abra seu arquivo e adicione este código a ele:

1

2

/**

3

* Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages

4

* Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479

5

* Description: Display products and categories / subcategories as two separate lists in product archive pages

6

* Version: 1.0

7

* Author: Rachel McCollin

8

* Author URI: https://rachelmccollin.co.uk

9

*

10

*

11

*/

Você pode querer editar os detalhes do autor, pois este é o plugin que você está escrevendo. Salve seu arquivo e ative o plugin através do administrador do WordPress.

Escrevendo nossa função

Agora vamos escrever a função. Mas antes de começar, desative as listagens de categorias nas telas de administração. Abra o Personalizador, clique no WooCommerce opção e clique em Catálogo de Produtos. Para cada um dos Exibição da página da loja e Exibição de categoria padrão opções, selecione Mostrar produtos. Salve suas alterações clicando em Publicar.

A página da sua loja agora será semelhante a esta:

No arquivo do seu plugin, adicione isto:

1

function tutsplus_product_subcategories( $args = array() ) {

2

3

}

4

5

add_action( ’woocommerce_before_shop_loop’, ’tutsplus_product_subcategories’, 50 );

Agora, adicione este código dentro da função:

1

$parentid = get_queried_object_id();

2

3

$args = array(

4

    ’parent’ => $parentid

5

);

6

7

$terms = get_terms( ’product_cat’, $args );

8

9

if ( $terms ) {

10

    echo ’<ul class="product-cats">’;

11

12

    foreach ( $terms as $term ) {

13

        echo ’<li class="category">’;                 

14

            woocommerce_subcategory_thumbnail( $term );

15

            echo ’<h2>’;

16

                echo ’<a href="’ .  esc_url( get_term_link( $term ) ) . ’" class="’ . $term->slug . ’">’;

17

                    echo $term->name;

18

                echo ’a>’;

19

            echo ’h2>’;

20

        echo ’li>’;

21

    }

22

23

    echo ’ul>’;

24

}

Vamos dar uma olhada no que essa função faz:

• Ele identifica o objeto consultado atual e define seu id como $parentid.
• Ele usa get_terms() para identificar termos com o item atualmente consultado como pai. Se esta for a página principal da loja, retornará categorias de nível superior; se este for um arquivo de categoria, ele retornará subcategorias.
• Em seguida, verifica se há algum termo, antes de abrir um for each loop e um ul elemento.
• Para cada termo, ele cria um li elemento e, em seguida, gera a imagem da categoria usando woocommerce_subcategory_thumbnail()seguido pelo nome da categoria em um link para seu arquivo.

Agora salve seu arquivo e atualize a página principal da loja. O meu é assim:

As categorias são exibidas, mas precisam de algum estilo. Vamos fazer isso a seguir.

Estilizando as listagens de categorias

Para que possamos adicionar estilo, precisamos de uma folha de estilo dentro do nosso plugin, que precisaremos enfileirar.

Na pasta do seu plugin, crie uma pasta chamada csse dentro dele crie um arquivo chamado estilo.css.

Agora, no arquivo do seu plugin, adicione isto acima da função que você já criou:

1

function tutsplus_product_cats_css() {

2

    /* register the stylesheet */

3

    wp_register_style( ’tutsplus_product_cats_css’, plugins_url( ’css/style.css’, __FILE__ ) );

4

    /* enqueue the stylesheet */

5

    wp_enqueue_style( ’tutsplus_product_cats_css’ );

6

}

7

8

add_action( ’wp_enqueue_scripts’, ’tutsplus_product_cats_css’ );

Isso enfileira corretamente a folha de estilo que você acabou de criar.

Agora abra sua folha de estilo e adicione o código abaixo. WooCommerce usa um estilo mobile-first, então é isso que usaremos também.

1

ul.product-cats {

2

    margin-left: 0;

3

}

4

5

ul.product-cats li {

6

    list-style: none;

7

    margin-left: 0;

8

    margin-bottom: 4.236em;

9

    text-align: center;

10

    position: relative;

11

}

12

13

ul.product-cats li img {

14

    margin: 0 auto; 

15

}

16

17

@media screen and (min-width:768px) {

18

19

    ul.product-cats li {

20

        width: 29.4117647059%;

21

        float: left;

22

        margin-right: 5.8823529412%;

23

    }

24

25

    ul.product-cats li:nth-of-type(3) {

26

        margin-right: 0;

27

    }

28

29

}

Copiei as larguras e margens exatas do estilo usado pelo WooCommerce.

Agora verifique a página principal da sua loja novamente. Aqui está o meu:

Aqui está o Roupas arquivo de categoria:

E é assim que fica em telas menores:

Resumo

As categorias de produtos são um ótimo recurso do WooCommerce, mas a forma como são exibidas nem sempre é a ideal. Neste tutorial, você aprendeu como criar um plug-in que gera categorias ou subcategorias de produtos separadamente das listagens de produtos e, em seguida, estilizou suas listagens de categorias.

Você pode usar este código para gerar uma lista de categorias ou subcategorias em outro lugar da página (por exemplo, abaixo dos produtos), conectando a função a um gancho de ação diferente dentro do arquivo de modelo WooCommerce.

Se você atualmente administra uma loja que deseja ampliar ou está procurando alguns plug-ins adicionais para estudar no que se refere ao WooCommerce, não hesite em ver quais plug-ins estão disponíveis em ga-analytics#sendMarketClickEvent”>CodeCanyon .

Os melhores plug-ins WooCommerce para 2023 no CodeCanyon

ga-analytics#sendMarketClickEvent”>CodeCanyon oferece os plug-ins WooCommerce WordPress mais flexíveis e ricos em recursos do mercado e adicionará outra dimensão de funcionalidade à sua loja online com a qual os usuários estão acostumados.

Se você precisa implementar campos e uploads personalizados, exibir várias moedas ou oferecer assinaturas, os diversos plug-ins WooCommerce disponíveis em ga-analytics#sendMarketClickEvent”>CodeCanyon podem ajudá-lo a realizar essas tarefas.

Além de todos os plug-ins WooCommerce de alta qualidade disponíveis, também existem milhares de outros plug-ins WordPress de alta qualidade no CodeCanyon que podem ajudar a aprimorar seu site. Dê uma olhada na extensa biblioteca de plug-ins e você encontrará todos os tipos de plug-ins, incluindo plug-ins de fórum, mídia e SEO.

Aproveite as vantagens da enorme biblioteca de plug-ins WordPress de alta qualidade do ga-analytics#sendMarketClickEvent”>no CodeCanyon agora!

ga-analytics#sendMarketClickEvent”>

Se você quiser ajuda para escolher o plugin WooCommerce certo para você, confira estes outros posts aqui no Envato Tuts+: