Come visualizzare i prodotti WooCommerce per categoria

Pubblicato: 2020-08-16

WooCommerce Visualizza prodotti per categoria Gestisci un negozio WooCommerce e desideri visualizzare i prodotti per categoria in WordPress? Questo post ha una spiegazione dettagliata su come visualizzare i prodotti WooCommerce per categoria. Se hai familiarità con WooCommerce, sai che le categorie di prodotti svolgono un ruolo importante nell'organizzazione dei tuoi prodotti per una corretta visualizzazione e accesso da parte dei tuoi clienti.

Visualizza i prodotti WooCommerce per categoria

Immediatamente, WooCommerce ti offre alcune opzioni su ciò che puoi visualizzare nelle pagine del tuo archivio come prodotti, categorie o sottocategorie o sia prodotti che categorie . Tuttavia, la maggior parte degli utenti di WooCommerce opta per la terza opzione per visualizzare sia i prodotti che le categorie/sottocategorie. ordina le categorie di woocommerce

Questa opzione consentirà al tuo visitatore di selezionare i prodotti direttamente dalla home page o di perfezionare la ricerca facendo clic su un archivio di categorie di prodotti.

Tuttavia, lo svantaggio principale di questo è che mostra le categorie/sottocategorie insieme, senza alcuna separazione tra le due. Questo rende il layout un po' disordinato a causa delle diverse dimensioni dell'immagine.

Da un punto di vista esperto, anche se le tue immagini hanno le stesse dimensioni, se una delle righe nella pagina di archivio include sia le categorie che i prodotti, l'assenza del pulsante "Aggiungi al carrello" per le categorie fa sembrare quella riga disorganizzata, in quanto non tutti i suoi elementi hanno le stesse dimensioni.

In questo breve tutorial imparerai come visualizzare le categorie in un elenco separato prima di visualizzare i prodotti.

Identifica o distingue il codice in WooCommerce, che viene utilizzato per generare categorie e sottocategorie nelle pagine di archivio.
Crea un plug-in personalizzato per il codice.
Scrivi una funzione che metta le categorie o le sottocategorie prima degli elenchi di prodotti.
Crea uno stile personalizzato per l'output.

a) Visualizzare sia Prodotti che Categorie o Sottocategorie

Passaggi per visualizzare sia i prodotti che le categorie o le sottocategorie.

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Personalizza. Clicca sulla pagina Negozio e seleziona WooCommerce > Catalogo prodotti. Nell'opzione Visualizzazione negozio , seleziona Mostra categorie e prodotti . Nell'opzione di visualizzazione della categoria , seleziona Mostra sottocategorie e prodotti come mostrato di seguito:
Ricordati di salvare le modifiche apportate.
Questo sarà il risultato :

b) Visualizza la categoria del prodotto WooCommerce

Tuttavia, puoi visualizzare la categoria di prodotti WooCommerce utilizzando uno snippet di codice di seguito, che dovrebbe essere inserito nel file functions.php.

Passaggi per visualizzare la categoria di prodotti WooCommerce

Ecco i passaggi che dovresti seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Editor temi Quando viene aperta la pagina Editor temi , cerca il file delle funzioni del tema in cui aggiungeremo la funzione che visualizzerà la categoria Prodotto WooCommerce.
Aggiungi il seguente codice al file php :

 funzione woocommerce_product_category($args = array() ) {

    $woocommerce_category_id = get_queried_object_id();

  $args = array(

             'genitore' => $woocommerce_category_id
  );

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

  se ( $ termini ) {

             echo '<ul class="woocommerce-categories">';

             foreach ( $ termini come $ termine ) {

             echo '<li class="woocommerce-product-category-page">';

            woocommerce_subcategory_thumbnail($termine);

             eco '<h2>';

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

             eco $termine->nome;

             eco '</a>';

             eco '</h2>';

             eco '</li>';

             }

             eco '</ul>';

  }

}

add_action('woocommerce_before_shop_loop', 'woocommerce_product_category', 100);

Questo sarà il Risultato:

Tuttavia, ha bisogno di alcuni CSS personalizzati per visualizzare bene i prodotti. Lo faremo più avanti in questo tutorial.

Come funziona il codice

Questo codice funziona semplicemente utilizzando la woocommerce_product_category() function che emette le categorie o le sottocategorie prima di eseguire il ciclo che emette i prodotti. Può sovrascrivere il tema, poiché la funzione è collegabile.

c) Elenca le sottocategorie di una categoria di prodotti WooCommerce

È molto facile ottenere la sottocategoria delle categorie di prodotti WooCommerce utilizzando una funzione personalizzata che sfrutta lo slug della categoria di prodotti padre.

Passaggi per elencare le sottocategorie di una categoria di prodotti WooCommerce

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Editor di temi Quando viene aperta la pagina Editor di temi , cerca il file delle funzioni del tema in cui aggiungeremo la funzione che elencherà le sottocategorie di una categoria di prodotti WooCommerce.
Aggiungi il seguente codice al file php :

 funzione woocommerce_get_product_category_of_subcategories($category_slug){

$termini_html = array();
$tassonomia = 'gatto_prodotto';
$parent = get_term_by('slug', $categoria_slug, $tassonomia);
$children_ids = get_term_children($parent->term_id, $tassonomia);

foreach($bambini_id come $bambini_id){

    $termine = get_term($id_bambini, $tassonomia);

    $link_termine = get_term_link($termine, $tassonomia);

    if ( è_wp_error( $ link_termine ) ) $ link_term = '';

    $terms_html[] = '<a href="' . esc_url( $term_link ) . '" rel="tag" class="' . $term->slug . '">' . $termine->nome . '</a>';
}

return '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';

}

Questo sarà il Risultato:

Come funziona il codice.

L'oggetto WP_Term ottiene la categoria di prodotto padre. Quindi, ottiene l'ID figlio in un array e, infine, le categorie figlio vengono visualizzate nell'HTML eseguendo un ciclo attraverso l'array ID figlio.

d) Identificazione del codice utilizzato da WooCommerce per l'output di categorie e prodotti negli archivi

Prima di creare un plug-in, il primo passo è sicuramente identificare come WooCommerce emette categorie e sottocategorie. Ciò significa che dobbiamo cercare manualmente il codice sorgente di WooCommerce per trovare la funzione pertinente.

Per semplificarti il processo, cerca semplicemente archive-product.php , che si trova nella cartella dei modelli. Questo è il file che WooCommerce utilizza per visualizzare le pagine di archivio. Ora devi trovare il codice che restituisce le categorie e i prodotti:

 <?php
/**
* gancio woocommerce_before_shop_loop
*
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/

do_action('woocommerce_before_shop_loop');
?>

<?php woocommerce_product_loop_start(); ?>

<?php woocommerce_product_subcategories(); ?>

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

<?php wc_get_template_part('contenuto', 'prodotto'); ?>

<?php nel frattempo; // fine del ciclo. ?>

<?php woocommerce_product_loop_end(); ?>

Come funziona il codice:

La woocommerce_product_subcategories() function restituisce le categorie o le sottocategorie prima di eseguire il ciclo che restituisce i prodotti. Il motivo per cui ho portato la tua attenzione su questa funzione è che è collegabile, il che significa che potremmo sovrascriverla nel nostro tema.

Tuttavia, questo non funzionerà poiché WooCommerce ha uno stile integrato per la cancellazione degli articoli, che apparirebbero all'inizio di una riga con la visualizzazione predefinita. Quindi cosa dovremmo fare? La risposta è semplice. Dobbiamo disattivare la visualizzazione di categorie e sottocategorie nelle nostre pagine di archivio in modo che vengano visualizzati solo i prodotti.

Dopodiché, il passaggio successivo consiste nel creare una nuova funzione che restituisca le categorie o sottocategorie di prodotti e la woocommerce_before_shop_loop action , assicurandoci di utilizzare una priorità alta in modo che si attivi dopo le funzioni che sono già agganciate a quell'azione.

È tuttavia importante notare che WooCommerce aggiunge clear a ogni terzo elenco di prodotti. Ciò significa che non possiamo utilizzare la woocommerce_product_subcategories() function o una sua versione modificata per visualizzare le categorie. La spiegazione di ciò è che questa funzione cancellerà la terza, la sesta (e così via) categoria o prodotto elencato, anche quando utilizziamo questa funzione per visualizzare le categorie separatamente. Ciò significa che dobbiamo creare una funzione che la sovrascriva. Questo può essere fatto creando un plugin.

e) Creazione del Plugin

Devi prima creare un nuovo vecchio e assegnargli un nome univoco nella directory wp-content/plugins . Per questo esempio, fai attenzione quando segui i passaggi in modo da poter ottenere la funzionalità di cui abbiamo bisogno. Userò questo nome njengah-separate-products-categories-in-archives .

All'interno di questa cartella, devi creare un nuovo file, sempre con un nome univoco. Userò lo stesso nome anche per questa cartella njengah-separate-products-categories-in-archives.php .

Passaggi per creare il plug-in

Apri il tuo file e aggiungi il seguente codice:

 <?php
/**
* Nome plug-in: Categoria prodotto WooCommerce
* Descrizione: mostra le categorie WooCommerce sulle pagine dei prodotti WooCommerce

**/

Prima di scrivere la nostra funzione, devi disattivare gli elenchi di categorie nelle schermate di amministrazione accedendo al tuo sito WordPress e accedere alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Personalizza. Clicca sulla pagina Negozio e seleziona WooCommerce > Catalogo prodotti. Nell'opzione Visualizzazione negozio , seleziona Mostra prodotti . Nell'opzione di visualizzazione della categoria , seleziona Mostra prodotti .
Ricordati di salvare le modifiche apportate.
Questo sarà il risultato :
Aggiungi questo al file del plugin:

 funzione njengah_product_subcategories($args = array()) {

}

add_action('woocommerce_before_shop_loop', 'njengah_product_subcategories', 50);

Quindi devi aggiungere questo codice nella funzione:

 $parentid = get_queried_object_id();

$args = array(

'genitore' => $parentid

);

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

se ( $ termini ) {

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

foreach ( $ termini come $ termine ) {

echo '<li class="categoria">';

woocommerce_subcategory_thumbnail($termine);

eco '<h2>';

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

eco $termine->nome;

eco '</a>';

eco '</h2>';

eco '</li>';

}

eco '</ul>';

}

Questo sarà il risultato: Visualizza i prodotti WooCommerce per categoria

Come puoi vedere dall'immagine sopra, le categorie non sono organizzate bene. Ciò significa che dobbiamo aggiungere il nostro stile personalizzato. Tuttavia, prima, impariamo come funziona il codice.

Come funziona il codice

La funzione che abbiamo creato identifica l'oggetto correntemente interrogato e definisce il suo id come $parentid . Quindi utilizza get_terms() per identificare i termini con l'elemento attualmente richiesto come padre. Se questa è la pagina principale del negozio, restituirà le categorie di primo livello e se questo è un archivio di categorie, restituirà le sottocategorie.

Inoltre, la funzione controlla se ci sono dei termini, prima di aprire a for ogni ciclo e un elemento ul . Ciò significa che per ogni termine, crea un elemento li , quindi genera l' category image using woocommerce_subcatgeory_thumbnail() , seguito dal nome della categoria in un collegamento al suo archivio.

Passaggi per lo stile degli elenchi di categoria

Questi sono i passaggi che devi seguire, ma per farlo abbiamo bisogno di un foglio di stile all'interno del nostro plugin, che dovremo accodare.

Crea una cartella chiamata CSS e al suo interno crea un file chiamato CSS. Questo dovrebbe essere fatto nella cartella del plugin per farlo funzionare .
Aggiungi questo codice nella parte superiore della funzione che hai già creato:

 funzione njengah_product_cats_css() {




/* registra il foglio di stile */

wp_register_style( 'njengah _product_cats_css', plugins_url('css/style.css', __FILE__ ));




/* accoda il foglio di stile */

wp_enqueue_style( 'njengah _product_cats_css' );




}




add_action( 'wp_enqueue_scripts', ' njengah _product_cats_css' );

Il passaggio successivo consiste nell'aprire il foglio di stile e aggiungere il codice di seguito. Tuttavia, è importante notare che WooCommerce utilizza uno stile mobile-first, quindi è quello che useremo anche noi.

 ul.product-cats li {
stile elenco: nessuno;
margine sinistro: 0;
margine inferiore: 4.236em;
allineamento testo: centro;
posizione: relativa;
}

ul.product-cats li img {
margine: 0 automatico;
}


@schermo multimediale e (larghezza minima:768px) {

ul.product-cats {
margine sinistro: 0;
chiaro: entrambi;
}

ul.product-cats li {
larghezza: 29.4117647059%;
galleggiante: sinistra;
margine-destra: 5,8823529412%;
}

ul.product-cats li:nth-of-type(3) {
margine-destra: 0;
}

}

Questo sarà il risultato:

Conclusione

In questo post, ho evidenziato diversi modi in cui puoi visualizzare i prodotti WooCommerce per categoria. Da questo breve tutorial, puoi capire perché le categorie di prodotti sono un'ottima funzionalità in WooCommerce, ma il modo in cui vengono visualizzate non è sempre l'ideale.

Inoltre, hai imparato come creare un plug-in che genera categorie o sottocategorie di prodotti separatamente dagli elenchi di prodotti e come modellare gli elenchi di categorie. La parte più importante di questo tutorial è la creazione del plugin personalizzato che genera un elenco di categorie o sottocategorie sulla pagina, agganciando la funzione a un hook di azione diverso all'interno del file modello WooCommerce.

Come visualizzare i prodotti WooCommerce per categoria

Visualizza i prodotti WooCommerce per categoria

a) Visualizzare sia Prodotti che Categorie o Sottocategorie

Passaggi per visualizzare sia i prodotti che le categorie o le sottocategorie.

b) Visualizza la categoria del prodotto WooCommerce

Passaggi per visualizzare la categoria di prodotti WooCommerce

Come funziona il codice

c) Elenca le sottocategorie di una categoria di prodotti WooCommerce

Passaggi per elencare le sottocategorie di una categoria di prodotti WooCommerce

Come funziona il codice.

d) Identificazione del codice utilizzato da WooCommerce per l'output di categorie e prodotti negli archivi

Come funziona il codice:

e) Creazione del Plugin

Passaggi per creare il plug-in

Come funziona il codice

Passaggi per lo stile degli elenchi di categoria

Conclusione

Articoli simili