Vejledning af kunder til deres ønskede produkter er en topprioritet for ejere af e-handelswebsteder. En af de mest effektive måder at strømline denne proces på er ved at tilføje WooCommerce-produktkategorier til din WordPress-menu.
Når besøgende svæver over et menupunkt, der er knyttet til en produktkategori, kan de øjeblikkeligt se underkategorier, hvilket giver mulighed for en bedre produktkategori fremvisning i et kompakt rum. Denne praksis forbedrer ikke kun webstedsnavigation, men forbedrer også den overordnede shoppingoplevelse.
I denne guide viser vi dig, hvordan du tilføjer WooCommerce-produktkategori i WordPress-menuen, hvilket hjælper dig med at skabe et brugervenligt og effektivt shoppingmiljø.
Quick Overview
To add WooCommerce product categories to your WordPress menu, you must first enable product categories in your menu screen options or directly link to the category URLs using a site navigation block. By utilizing page builder plugins like ElementsKit (for Elementor) or GutenKit (for Gutenberg), you can transform these simple text links into highly visual, multi-level dropdown menus.
How to Add Product Categories to Your Navigation:
✅For Classic Themes: Naviger til Udseende > Menuer i dit WordPress-dashboard.
✅ Enable Categories: Click the “Screen Options” tab at the top right of the screen and check the “Product Categories” box to reveal them in the left-hand items list.
✅ Add to Menu: Check your desired WooCommerce categories (e.g., “Clothing”, “Accessories”) and click “Add to Menu,” then drag them into your preferred dropdown hierarchy.
✅ For Block Themes: Open your Gutenberg site editor, add the GutenKit Nav Menu block, click the “Add Link” button, and manually paste the live URL of your WooCommerce product category.
✅ Gamify & Style: Use the ElementsKit Mega Menu toggle or GutenKit styling tabs to upgrade the standard text links by adding custom icons, sale badges, or rich-media dropdown panels.
For eksempel, if you run an online electronics store, standard navigation forces users to click a generic “Shop” link and dig through sidebar filters. By adding specific product categories directly to the header menu, a customer can hover over the navigation bar to immediately reveal direct links to “Laptops,” “Smartphones,” and “Audio,” alongside a highlighted “Clearance Sale” badge, getting them to their desired product in a single click.
Embedding WooCommerce categories directly into your site’s primary navigation drastically reduces user friction. This strategic placement ensures a smoother shopping experience, prioritizes key sales pages for search engine indexing, and is vital for keeping mobile visitors engaged without forcing them to scroll extensively.
Hvorfor skal du tilføje WooCommerce-produktkategori i WordPress-menuen
Det er vigtigt at tilføje WooCommerce-produktkategorier til hjemmesidemenuen, fordi det booster dit salg.
Denne funktion angiver tydeligt, hvor shoppere kan finde deres ønskede produkter i menuen, uanset hvor de befinder sig på hjemmesiden. På grund af nem navigation vil kunderne ikke opleve nogen friktion, når de vælger deres ønskede produkter.
Når du har tilføjet en WooCommerce-kategori til et menupunkt, kan du også inkludere flere undermenuer til underkategorier under den. For eksempel kan et tøjmærkes hjemmesidenavigation have en WooCommerce-kategori for mænd, og inden for den, andre underkategorier såsom topbeklædning eller underbeklædning.
På den måde kan søgemaskinerne prioritere vigtige sider til indeksering, hvilket kan gavne din samlede hjemmesides SEO. En stor fordel ved at tilføje en WooCommerce-produktkategori til navigationsmenuen er for mobilbrugere. I stedet for at scrolle meget, kan de hurtigt få adgang til produkter direkte fra header-området.
Metode 1: Tilføjelse af WooCommerce-produktkategori i menu ved hjælp af klassisk WordPress-tema
I den første del skal vi vise, hvordan man tilføjer produktkategorier til klassiske WordPress-temaer. Men hvis du er en Gutenberg blokbaseret temabruger, kan du springe denne del over og gå til metode to.
Generelt inkorporerer traditionelle temabrugere en sidebygger for at tilføje yderligere funktionaliteter og tilpasning til deres websteder.
I vores tutorial bruger vi følgende temaer og plugins. Så installer og aktiver dem ved at følge denne vejledning.
Tilføj produktkategori og produktmærke til WP-menuen
For at komme i gang skal du navigere til Udseende > Menuer fra dit WordPress-dashboard. Hvis dit websted ikke har en menu, skal du først oprette en. Se derefter øverst til højre på menuredigeringssiden og klik "Skærmindstillinger".
Det vil udvide et område med forskellige elementer for at tilføje din menu. Sæt kryds i boksene ved siden af "Produktkategorier". Hvis du gør dette, kan du tilføje alle produktkategorier og tags til dine menuindstillinger.
Her står du kun tilbage med nogle klik virker kun. I venstre kolonne på skærmen finder du nye muligheder som f.eks Produkter, Produkt Tags, og Produktkategorier. Udvid deres rullemenu, og marker afkrydsningsfelterne for de elementer, du vil inkludere i dit websteds navigationsmenu.
Tryk derefter på "Føj til menu" knap. Juster menuhierarkiet efter dine præferencer. Og når du er færdig, skal du klikke på "Gem menu" knap.
Nu, hvis du forhåndsviser eller ser navigationsmenuen på dit WordPress-websted, vil du ikke finde det velorganiseret og responsivt. Besøgende kan ikke navigere til deres ønskede produktkategori.
Så hvad er løsningen her?
Den bedste måde at vise en række menuelementer frem på en forenklet og interaktiv måde er ved at bruge et mega menu-plugin. Og vi anbefaler ElementsKit Mega Menu builder til en klassisk temabruger.
Denne komplette Elementor-tilføjelse giver dig mulighed for at tilføje fantastiske vandrette og lodrette mega menuer til skærme uden kodningsbesvær.
Gamify produktkategori i WP Menu med ElementsKit Mega Menu Widget
For at fortsætte med ElementsKit mega menufunktionen skal du markere afkrydsningsfeltet "Aktiver menuen for Megamenu Content”. Hold derefter musemarkøren over ethvert element i menuredigeringsområdet, og det vil vise ikonet for megamenuindstillinger. Klik på den.
På dette tidspunkt vil din skærm vise en pop op. Her skal du skifte til Megamenu knap. Hvis du gør dette, aktiveres ": REDIGER MEGAMENU INDHOLD" mulighed. Bare klik på den.
Dernæst vil ElementsKit mega-menubygger-dashboardet starte før dig. Nu har du hele Elementor- og ElementsKit-kontrollen til at oprette og tilpasse din mage-menu.
Til vores tutorial viser vi den nemmeste måde. Klik på ElementsKit skabelonikonet. Det vil dukke op en skærm med masser af skabeloner.
Først skal du klikke på "Afsnit” mulighed fra øverst til højre. Gå derefter til "Kategori" dropdown og vælg Megamenu" mulighed.
Når du har valgt den passende skabelon til megamenuen for at vise produktkategorien på dit WooCommerce-websted, skal du klikke på Indsæt og vent et øjeblik.
Når dit indsatte element er indlæst, gå til kolonne- eller widgetindstillingerne.
Her vil du tilpasse indholdet og designet af det færdiglavede layout, så det matcher din brandstil. Når du er færdig, skal du klikke på opdateringsknappen og lukke vinduet.
Dernæst vil vi fokusere på at tilpasse ikonet og badget, samt at justere header-indstillingerne. Flyt til fanen Ikon, og indstil dit ikon og dets farve. Gør også det samme for badgeteksttilpasning.
Den sidste fane på denne fane er "Indstillinger" for at indstille positionen og bredden af din megamenu og aktivere Ajax-belastningen. Og når du er færdig med alt, skal du trykke på "Gemme" knap. For at afslutte denne popup, klik på "x"-ikonet. Og vi afslutter vores rejse "tilføj WooCommerce-produktkategori i menuen for dit klassiske tema" ved at klikke på "Gem menu" mulighed.
Metode 2: Tilføj WooCommerce-produktkategori i blokbaseret temamenu
Den anden metode i denne tutorial viser, hvordan man tilføjer WooCommerce-produktkategorier til det Gutenberg-blokbaserede tema. Og i denne del bruger vi GutenKit plugin. Det forenkler oprettelsen og tilpasningen af megamenuer inden for dit blokredigeringsområde.
GutenKit understøtter en kraftfuld mega menublok, der eliminerer behovet for kedelige tekniske anstrengelser fra Gutenberg-brugere. De vil bare trække-og-slippe designelementer som ethvert fleksibelt sidebygger-plugin.
Lad os se et rigtigt scenarie:
Tilføj produktkategori og produktmærke til menuen Block Editor
det er vigtigt at forstå, at i GutenKit eller Gutenberg tilføjes menupunkter ved at linke til enten interne eller eksterne websider. Derfor skal du bruge URL'erne for de specifikke produktkategorier og tags for at tilføje en WooCommerce-produktkategori eller -tag til dit websteds navigationsmenu.
For at gøre dette, følg fra dit Gutenberg-websteds dashboard Produkter > Kategorier. Du vil se alle produktkategorierne på dit WooCommerce-websted. Fra denne side skal du klikke på "Udsigt" mulighed for enhver kategori, som vil indlæse en side i en ny fane i din browser.
Derefter kopierer du fra browserens søgelinje i browseren URL'er og senere vil du tilføje dem til GutenKit nav-menublokindstillingerne som vist nedenfor.
Nu viser vi dig, hvordan du indsætter WooCommerce-produktkategorien i WordPress-webstedets menu.
Gå til dit WordPress-dashboard, indsæt en ny side eller besøg en eksisterende side. Klik på "+" ikon for at tilføje en blok og søge efter GutenKit Nav Menu-blokken.
Når du ser det, skal du klikke på det eller trække det til redigeringsområdet. De GutenKit Nav Menublok laster med to muligheder. Du kan vælge et færdiglavet mønster eller bygge din Gutenberg-webstedsmenu fra bunden.
Den nemmeste måde er at arbejde med den forudlavede header-skabelon. Tryk på "Vælg fra mønstre”-knappen, og alle tilgængelige GutenKit-header-mønstre vises i en popup.
Importer derefter dine foretrukne menumønstre. Derefter kan du indsætte WooCommerce-produktkategorilinket i navigationslinjen. Derudover vil du justere andre menupunkter baseret på din hjemmesidenavigation.
På den anden side, hvis du vil starte fra bunden, skal du klikke på "Start Blank" knap. Derefter vil GutenKit Nav-menublokken indlæses med nogle menupunkter baseret på webstedets offentliggjorte sider. Du kan beholde dem eller slette dem.
For at tilføje et nyt menupunkt skal du klikke på "blå cirkel +" ikon. Dette vil lade dig tilføje en eksisterende offentliggjort side eller URL til dit websted. Du skal blot indsætte produktkategoriens URL og definere menuetiketten. Sådan kan vi tilføje en WooCommerce-produktkategori til Gutenbergs navigationsmenu.
GutenKit Nav Menu-blokken er en robust løsning til at tilpasse din hjemmesides menu. Du kan endda også vise din produktkategori med en megamenu.
Fra GutenKit Nav-menublokindstillingerne skal du klikke på "Gå til forældre" valgmulighed. Du vil se forskellige tilpasningsindstillinger for at style WordPress-navigationsmenuen. Fra "Tilfreds" fanen kan du indstille brugerdefinerede breakpoints, definere undermenuer afslørende animationer og vise off-canvas-menuen på rulle.
Derudover kan du tilpasse menuindpakningen og menupunkterne for at skabe en mere visuelt tiltalende navigationsmenu til dine produktkategorier.
Til mobilmenuen giver GutenKit Nav Menu-blokken dig mulighed for at vælge et andet logo. Og vigtigst af alt kan du indsætte et hamburgerikon fra et stort ikonbibliotek understøttet af “Fantastisk skrifttype” og indbyggede GutenKit-ikoner eller upload en SVG-fil til det. Stil derefter hamburgerikonet på din egen måde.
Bonustips til visning af WooCommerce-produktkategorier i din WordPress-menu
At føje produktkategorier til din hjemmesidemenu er én ting, men at gøre dem visuelt tiltalende for besøgende kan være en udfordring. Selvom vi allerede har talt om tilpasningen og stylingen af produktkategorivisningen i vores vejledning, er der nogle yderligere fremgangsmåder, som du bør huske på, som anført nedenfor:
👉 First things first, decide which product category you want to add to the navigation menu. You should highlight popular and best-selling categories in your top menu to attract customers.
👉 Gør også menupunkter mere interaktive med farver, ikoner og badges. Vis dit tilpassede ikon, der repræsenterer dit brand. De plugins, vi brugte i vores tutorial, understøtter upload af SVG-filer til dit plugin.
👉 For at fremvise tilbud eller nedsatte produkter skal du tilføje hurtige links, så kunderne kan hoppe direkte ind på disse sider.
👉 Tilpas indpakningsområdet på megamenukortet eller nav-bjælken for at bringe et æstetisk look.
👉 Konfigurer de responsive indstillinger i menuen for at vise produktkategorier præcist på mobile og små enheder.
👉 Brug et kodefrit plugin til nemt at konfigurere og tilpasse produktkategorien, der vises i din navigationsmenu.
WooCommerce Product Categories Not Showing in Menu? Here’s How to Fix It
If your WooCommerce product categories aren’t appearing in the WordPress menu builder, it’s almost always one of these five causes. And, the good thing is I am also giving a quick fix for each issue.
✅ Fix 1: Enable Product Categories in Screen Options
This is the most common cause. By default, WordPress hides WooCommerce product categories from the Appearance > Menus panel.
Gå til Udseende > Menuer, click Skærmindstillinger in the top-right corner, and check Produktkategorier. They’ll immediately appear in the left panel. From here, check the ones you want, click Føj til menu, and save.
✅ Fix 2: The Category Has No Published Products
WooCommerce can automatically hide empty categories. If a category has no published products assigned to it, it may not appear or will link to a blank archive page.
Gå til WooCommerce > Settings > Products > Display and review the “Hide categories with no products” setting. Either assign a published product to the category or disable that setting.
✅ Fix 3: You’re Using a Block Theme (FSE)
Block themes like Twenty Twenty-Four don’t have an Appearance > Menus screen at all. Navigation is managed through the block editor’s Navigation block instead.
Gå til Appearance > Editor > Navigation, add a Custom Link pointing to your category archive URL (e.g., yoursite.com/product-category/shoes). For a styled mega menu with category images and subcategory columns, GutenKit’s Mega Menu block handles this visually without any code.
✅ Fix 4: The Category Was Created After the Menu Was Saved
WordPress menus are static. Therefore, new categories don’t appear automatically. Return to Udseende > Menuer, add the new category, and save again. If you want categories to populate dynamically as they’re created, ElementsKit’s WooCommerce category menu widget handles this automatically.
✅ Fix 5: A Caching Plugin Is Serving an Old Version
If you’ve saved the menu but changes aren’t showing on the front end, your caching plugin is likely serving a stale version of your header. Purge all cache from your caching plugin dashboard, then check in an incognito window to confirm the update is live.
FAQs on Adding WooCommerce Product Categories in Menu
Why are my WooCommerce product categories not showing up in the Appearance > Menus list?
Will adding a lot of product categories slow down my WordPress site?
Can I create a dropdown hierarchy for parent and child product categories?
SLUK OP!
Since the navigation menu appears at the top of the web page, visitors can easily access the most important pages and links. eCommerce owners want to insert their main pages like blog, shop, my account, and product categories, into the website navigational menu.
I denne vejledning har vi skitseret to metoder til at tilføje WooCommerce-produktkategorier til menuen. Derudover har vi fremhævet nyttige plugins som GutenKit og ElementsKit, which allow you to implement this functionality and customize your menu with ease, no coding required.
Brug lidt tid på at udforske disse muligheder og skabe et engagerende, brugervenligt udseende for dine WooCommerce-produktkategorier.
Skriv et svar