Share
Hva du skal skapeWooCommerce gir deg noen muligheter for hva du kan vise på arkivsidene dine:
Når jeg lager en butikk, velger jeg normalt det tredje alternativet: produkter og kategorier / underkategorier. Dette betyr at besøkende i butikken min kan enten velge produkter direkte fra hjemmesiden eller avgrense søket ved å klikke gjennom til produktkategorien arkiv.
Det er imidlertid en som feiler med denne tilnærmingen: Den viser kategoriene / underkategorier sammen, uten adskillelse mellom de to. Dette betyr at hvis produktbildene dine har forskjellige dimensjoner fra produktbildene dine, kan layoutet se litt rotete ut. Selv om bildene dine er av samme størrelse, hvis en av linjene på arkivsiden inneholder både kategorier og produkter, mangler en "Legg til handlevogn" -knapp for kategorier at denne raden ser ut til å være sløv, ettersom ikke alle elementene har samme dimensjoner.
I denne veiledningen vil jeg vise deg hvordan du viser kategorier i en egen liste før du viser produkter.
For å gjøre dette, følger vi fire trinn:
Men før du starter, trenger du en WooCommerce-installasjon med noen produkter lagt til, og produktkategorier og underkategorier satt opp.
Å følge med, du trenger:
La oss se på hva WooCommerce gir oss som standard.
Jeg har startet med å legge til noen bilder i produktkategorier og underkategorier, da WooCommerce dummy-data ikke inneholder dem. Jeg har ganske enkelt brukt et bilde av en av produktene fra hver kategori eller underkategori, som du ser på skjermbildet:
La oss nå se på hvordan WooCommerce viser produktkategorier og produkter på arkivsidene.
Hvis du ikke allerede har det, gå til WooCommerce> Innstillinger, velg Produkter kategorien, og velg deretter Vise alternativ. For hver av Shop Page Display og Standard kategorivisning valg, velg Vis begge:
Klikk på Lagre endringer knappen for å lagre innstillingene dine og besøke nettstedet ditt på butikksiden. Mine ser slik ut:
Som det skjer, fordi jeg har tre produktkategorier og kategoriene mine er i samme størrelse som produktbildene mine, ser det ut til å være ganske pent. Men her er en av produktkategorien arkiver:
Fordi denne kategorien har to underkategorier, vises det første produktet ved siden av dem, i et rutenett tre elementer bredt. Jeg vil gjøre mine kategorier og underkategorier mer fremtredende, og bare presentere dem separat fra produktoppføringene. Så la oss gjøre det.
Det første trinnet er å identifisere hvordan WooCommerce utfører kategorier og underkategorier. Så la oss dykke inn i WooCommerce kildekoden for å finne den aktuelle funksjonen.
Filen WooCommerce bruker for å vise arkivsidene er arkiv-product.php, som er i maler mappe.
I den filen finner du denne koden, som gir ut kategorier og produkter:
Så det er en woocommerce_product_subcategories () funksjon som utfører kategorier eller underkategorier før du kjører sløyfen som utgir produktene.
Funksjonen er pluggbar, noe som betyr at vi kunne tilsidesette det i vårt tema. Dessverre virker det ikke helt som WooCommerce har innebygd styling for rydding av elementer, som vil vises i begynnelsen av en rad med standardskjermbildet.
Så i stedet for det, slår vi av visning av kategorier og underkategorier på arkivsidene våre, slik at bare produkter vises. Deretter oppretter vi en ny funksjon som utdataer produktkategorier eller underkategorier, og hekker den til woocommerce_before_shop_loop handling, sørg for at vi bruker høy prioritet slik at den brenner etter funksjonene som allerede er hekta på den handlingen.
Merk: Fordi WooCommerce legger til rydder til hver tredje produktoppføring, kan vi ikke bruke woocommerce_product_subcategories () funksjon eller en redigert versjon av den for å vise kategoriene. Dette skyldes at det vil fjerne den tredje, sjette (og så videre) kategorien eller produktet som er oppført, selv når vi bruker denne funksjonen til å vise kategorier separat. Vi kan prøve å overstyre det, men det er enklere å bare skrive vår egen funksjon.
Så la oss lage et plugin som gjør det.
I din wp-innhold / tillegg katalog, opprett en ny mappe og gi den et unikt navn. Jeg ringer til min tutsplus-separate-produktene kategorier-in-arkiv. Inne i det, lag en ny fil, igjen med et unikt navn. Jeg bruker samme navn: tutsplus-separat-produkter kategorier-i-archives.php.
Åpne filen din og legg til denne koden til den:
Du vil kanskje redigere forfatteropplysningene, da dette er plugin du skriver. Lagre filen og aktiver pluginet via WordPress admin.
Skrive vår funksjon
La oss nå skrive funksjonen. Men før du begynner, slå av kategorioppføringer i administrasjonsskjermene. Gå til WooCommerce> Innstillinger, velg Produkter kategorien, og velg deretter Vise alternativ. For hver av Shop Page Display og Standard kategorivisning valg, velg Vis produkter. Lagre endringene dine.
Din butikkside vil nå se slik ut:
I din plugin-fil legger du til dette:
funksjon tutsplus_product_subcategories ($ args = array ()) add_action ('woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50);Legg nå denne koden inne i funksjonen:
$ parentid = get_queried_object_id (); $ args = array ('parent' => $ parentid); $ terms = get_terms ('product_cat', $ args); hvis ($ termer) echo '
La oss ta en titt på hva den funksjonen gjør:
Accentsconagua
$ parentid.get_terms () å identifisere vilkår med det aktuelle spørsmålet som foreldre. Hvis dette er hovedbutikksiden, vil det returnere toppnivåkategorier; Hvis dette er et kategoriarkiv, vil det returnere underkategorier.for hver loop og a ul element.li element, og utfører deretter kategoribildet ved hjelp av woocommerce_subcatgeory_thumbnail (), etterfulgt av kategorinavnet i en lenke til arkivet.Lagre filen din og oppdatere hovedbutikksiden. Mine ser slik ut:
Kategoriene vises, men de trenger litt styling. La oss gjøre det neste.
For at vi kan legge til styling, trenger vi et stilark i vårt plugin, som vi må kreve.
I din plugin-mappe, opprett en mappe som heter css, og inne i det, lag en fil som heter style.css.
Nå, i din plugin-fil, legg til dette over funksjonen du allerede har opprettet:
funksjon tutsplus_product_cats_css () / * registrer stilarket * / wp_register_style ('tutsplus_product_cats_css', plugins_url ('css / style.css', __FILE__)); / * enqueue stilarket * / wp_enqueue_style ('tutsplus_product_cats_css'); add_action ('wp_enqueue_scripts', 'tutsplus_product_cats_css');Dette anvender riktig stilarket du nettopp har opprettet.
Åpne nå stilarket ditt og legg til koden nedenfor. WooCommerce bruker mobil første styling, så det er det vi skal bruke også.
ul.product-cats li listestil: none; margin-venstre: 0; margin-bunn: 4.236em; tekst-align: center; stilling: relativ; ul.product-cats li img margin: 0 auto; @media skjerm og (min-bredde: 768px) ul.product-cats margin-left: 0; klare: begge; ul.product-cats li bredde: 29.4117647059%; flyte: venstre; margin-høyre: 5.8823529412%; ul.product-katter li: nth-of-type (3) margin-right: 0;
Jeg har kopiert eksakte bredder og marginer fra stilen som brukes av WooCommerce.
Sjekk nå din hovedside på nytt. Her er min:
Her er Musikk kategori arkiv:
Og her er hvordan det ser ut på mindre skjermer:
Produktkategorier er en flott funksjon av WooCommerce, men måten de vises på er ikke alltid ideell. I denne opplæringen har du lært hvordan du lager et plugin som utgir produktkategorier eller underkategorier separat fra produktoppføringene, og du har deretter stylet kategorilistene dine.
Du kan bruke denne koden til å sende ut en liste over kategorier eller underkategorier andre steder på siden (for eksempel under produktene), ved å hekte funksjonen til en annen handlingskrog i WooCommerce-malfilen.
Hvis du for øyeblikket driver en butikk som du ønsker å utvide, eller du leter etter noen ekstra plugins for å studere som det gjelder WooCommerce, ikke nøl med å se hvilke plugins som er tilgjengelige i Envato Market.
