Prikažite WooCommerce Kategorije, Podkategorije i Proizvode na Odvojenim Listama

WooCommerce vam daje nekoliko mogućnosti za ono što možete prikazati na svojim arhiviranim stranicama:

• proizvodi
• kategorije (na glavnoj stranici trgovine) ili podkategorije (na stranicama kategorija)
• i proizvodi i kategorije.

Kada postavljam trgovinu, obično odabirem treću opciju: proizvode i kategorije/podkategorije. To znači da posjetitelji moje trgovine mogu odabrati proizvode izravno s početne stranice ili precizirati pretraživanje pretražujući arhivu kategorije proizvoda.

Međutim, postoji jedan neuspjeh u ovom pristupu: kategorije / podkategorije prikazuje zajedno, bez razdvajanja između to dvoje. To znači da ako slike vaših proizvoda imaju različite dimenzije od slika vaših proizvoda, raspored može izgledati pomalo neuredno. Čak i ako su vaše slike iste veličine, ako jedan od redaka na stranici arhive obuhvaća obje kategorije i proizvode, nedostatak  "Dodaj u košaricu" gumba za kategorije čini taj red neurednim, budući da svi njezini elementi nemaju iste dimenzije.

U ovom tutorialu ću vam pokazati kako prikazati kategorije na zasebnom popisu prije prikazivanja proizvoda.

Za to ćemo slijediti četiri koraka:

1. Utvrdite kod koji WooCommerce koristi za izlazne kategorije i potkategorije na stranicama arhive.
2. Napravite dodatak za naš kôd.
3. Napišite funkciju za stavljanje kategorija ili potkategorija prije unosa proizvoda.
4. Stilizirajte izlazni podatak.

No, prije nego što počnete, trebati će vam instalacija WooCommerce s nekim dodanim proizvodima i postavljenim kategorijama proizvoda i podkategorija.

Što će vam biti potrebno:

Kako biste mogli pratiti, biti će vam potrebno:

• Razvojna instalacija programa WordPress.
• Uređivač koda.
• Instaliran i aktiviran WooCommerce.
• Dodani proizvodi  - ja sam uvezla "dummy" podatke o proizvodu koji se isporučuju s WooCommerceom; za pojedinosti o tome kako to učiniti, pogledajte ovaj vodič.
• Aktivirana tema kompatibilna s WooCommerce-om: ja koristim Storefront.

Prije nego što počnemo: Zadane Opcije

Pogledajmo što nam WooCommerce nudi prema zadanim postavkama.

Započela sam s dodavanjem nekih slika u moje kategorije proizvoda i potkategorije, jer ih WooCommerce "dummy" podaci ne uključuju. Jednostavno sam upotrijebila sliku jednog od proizvoda iz svake kategorije ili potkategorije, kao što možete vidjeti na screenshotu:

Pogledajmo sada kako WooCommerce prikazuje kategorije proizvoda i proizvode na arhivskim stranicama.

Ako to već niste učinili, idite na WooCommerce > Settings, odaberite karticu Products, a zatim odaberite opciju Display. Za svaku od Shop Page Display i Default Category Display opcija, odaberite Show both:

kliknite gumb Save changes kako biste spremili postavke i posjetili svoju web prodajnu stranicu. Moja izgleda ovako:

Pošto imam tri kategorije proizvoda, a moje su slike kategorije iste veličine kao i moje slike proizvoda, izgleda sasvim uredno. Ali ovdje je jedan od arhiva kategorije proizvoda:

Budući da ova kategorija ima dvije potkategorije, prvi je proizvod prikazan uz njih, u mreži koja je širine tri stavki. Želim svoje kategorije i potkategorije više istaknuti, i jednostavno ih prikazati odvojeno od popisa proizvoda. Pa, učinimo to.

Prepoznavanje Koda WooCommerce Koristi se za Izlazne Kategorije i Proizvode u Arhivu

Prvi korak je utvrditi kako WooCommerce iznosi kategorije i potkategorije. Pogledajmo u WooCommerce izvorni kod kako bismo pronašli relevantnu funkciju.

Datoteka WooCommerce koja se koristi za prikazivanje arhivskih stranica je archive-product.php, koja se nalazi u templates mapi.

Unutar te datoteke nalazi se ovaj kôd, koji emitira kategorije i proizvode:

<?php
    /**
   * woocommerce_before_shop_loop hook
	 *
	 * @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( 'content', 'product' ); ?>

	<?php endwhile; // end of the loop. ?>

<?php woocommerce_product_loop_end(); ?>

Dakle, postoji woocommerce_product_subcategories () funkcija koja iznosi kategorije ili podkategorije prije pokretanja loopa koja emitira proizvode.

Funkcija je "pluggable", što znači da možemo zamijeniti implementaciju u našoj temi. Nažalost, to baš i ne funkcionira jer WooCommerce ima ugrađeni styling za čišćenje stavki koje će se pojaviti na početku reda s zadanim zaslonom.

Umjesto toga, isključiti ćemo prikaz kategorija i potkategorija na našim arhiviranim stranicama, tako da se prikazuju samo proizvodi. Zatim ćemo stvoriti novu funkciju koja emitira kategorije ili potkategorije proizvoda i povezati ga s woocommerce_before_shop_loop akcijom, pazeći da koristimo visoki prioritet tako da se aktivira nakon funkcija koje su već povezane s tom radnjom.

Napomena: Budući da WooCommerce dodaje brisanje na svaki treći popis proizvoda, ne možemo koristiti funkciju woocommerce_product_subcategories () ili njezinu uređenu verziju za prikaz kategorija. To je zato što će treća, šesta (i tako dalje) kategorija ili proizvod biti izbrisani, čak i kada koristimo ovu funkciju za prikaz kategorija zasebno. Mogli bismo to pokušati nadvladati, ali jednostavnije je napisati vlastitu funkciju.

Stoga, idemo napraviti dodatak koji to čini.

Izrada Dodatka

U svojem wp-content/plugins direktoriju stvorite novu mapu i dajte mu jedinstveno ime. Ja ću svoj nazvati tutsplus-separate-products-categories-in-archives. Unutar toga stvorite novu datoteku, opet s jedinstvenim imenom. Upotrebljavam isti naziv: tutsplus-separate-products-categories-in-archives.php.

Otvorite datoteku i dodajte ovaj kôd:

<?php
/**
 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages
 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479
 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.co.uk
 *
 *
 */

Možda ćete željeti urediti autorske detalje pošto je kod koji pišete vaš. Pohranite svoju datoteku i aktivirajte plugin sa WordPress admin.

Pisanje naše funkcije

Napišimo sada funkciju. No, prije nego što počnete, isključite popise kategorija na zaslonima administratora. Idite na WooCommerce > Settings, odaberite karticu Products, a zatim odaberite opciju Display. Za svaku od opcija Shop Page Display i Default Category Display, odaberite Show products. Spremite promjene.

Vaša stranica trgovine sada će izgledati ovako:

U svoju plugin datoteku dodajte sljedeće:

function tutsplus_product_subcategories( $args = array() ) {
    
	}
}
add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

Sada dodajte ovaj kod unutar funkcije:

$parentid = get_queried_object_id();
    	
$args = array(
	'parent' => $parentid
);

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

if ( $terms ) {
		
	echo '<ul class="product-cats">';
	
		foreach ( $terms as $term ) {
						
			echo '<li class="category">';					
					
				woocommerce_subcategory_thumbnail( $term );
				
				echo '<h2>';
					echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
						echo $term->name;
					echo '</a>';
				echo '</h2>';
																	
			echo '</li>';
																	

	}
	
	echo '</ul>';

}

Pogledajmo što ta funkcija čini:

• Identificira trenutačni upitani objekt i definira njegov ID kao $ parentid.
• Upotrebljava get_terms () da identificira pojmove s trenutačnom stavkom kao svojeg roditelja. Ako je ovo glavna stranica trgovine, vratiti će top-level kategorije; ako se radi o arhivi kategorije, vratiti će podkategorije.
• Zatim provjerava postoje li kakvi uvjeti, prije otvaranja foreach loopa i ul elementa.
• Za svaki pojam, stvara li element, a zatim iznosi sliku kategorije koristeći woocommerce_subcatgeory_thumbnail (), nakon čega slijedi naziv kategorije u poveznici na svoju arhivu.

Sada spremite datoteku i osvježite glavnu stranicu trgovine. Moja izgleda ovako:

Kategorije su prikazane, ali trebaju neki stil. To će biti sljedeće što ćemo učiniti.

Stiliziranje Kategorija Oglasa

Kako bismo mogli dodati styling, potreban nam je stylesheet unutar našeg dodatka, koji ćemo morati dodati.

U plugin mapi izradite mapu pod nazivom css, a unutar toga stvorite datoteku naziva style.css.

Sada, u plugin datoteci dodajte ovo iznad funkcije koju ste već kreirali:

function tutsplus_product_cats_css() {

    /* register the stylesheet */
    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );
    
    /* enqueue the stylsheet */
    wp_enqueue_style( 'tutsplus_product_cats_css' );
    
}

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

To ispravno ugrađuje stylesheet koji ste upravo izradili.

Sada otvorite svoj stylesheet i dodajte kôd u nastavku. WooCommerce koristi mobile-first stil, tako da ćemo to i upotrijebiti.

ul.product-cats li {
    list-style: none;
	margin-left: 0;
	margin-bottom: 4.236em;
	text-align: center;
	position: relative;
}
ul.product-cats li img {
	margin: 0 auto;	
}

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

	ul.product-cats {
		margin-left: 0;
		clear: both;
	}
	ul.product-cats li {
		width: 29.4117647059%;
		float: left;
		margin-right: 5.8823529412%;
	}
	ul.product-cats li:nth-of-type(3) {
		margin-right: 0;
	}
	
}

Kopirala sam točnu širinu i margine od stila koji koristi WooCommerce.

Sada ponovno provjerite svoju glavnu stranicu trgovine. Evo moje:

Evo arhive Music kategorije:

I ovako izgleda na manjim ekranima:

Sažetak

Kategorije proizvoda su izvrsna značajka WooCommercea, ali način na koji se prikazuju nije uvijek idealan. U ovom tutorialu ste saznali kako izraditi dodatak koji prikazuju kategorije proizvoda ili podkategorije zasebno od popisa proizvoda, a zatim ste stilizirali svoj popis kategorija.

Možete upotrijebiti ovaj kôd za prikaz popisa kategorija ili podkategorija negdje drugdje na stranici (na primjer, ispod proizvoda), tako da spojite funkciju na drugu spajalicu za akciju unutar WooCommerce datoteke predloška.

Ako trenutno imate trgovinu koju želite proširiti ili tražite neke dodatne pluginove koji se odnose na WooCommerce, nemojte se ustručavati pogledati koji su sve dodaci dostupni na Envato Market-u.