Hur man addar Breadcrumbs i WooCommerce (Guide för Beginnare)

Har du någonsin vandrat genom en stor butik och tappat bort var du började och hur du skulle ta dig tillbaka till huvudgången? Att navigera i en stor onlinebutik kan kännas på samma sätt.

Brödsmulor är små navigeringsspår som visar dig vägen du har tagit på en webbplats, som hjälpsamma skyltar som guidar kunder genom din WooCommerce-butik.

De gör det inte bara lättare för kunderna att hitta rätt, utan ger också sökmotorerna en bättre förståelse för webbplatsens struktur, vilket kan förbättra din SEO.

Den goda nyheten är att det är förvånansvärt enkelt att lägga till brödsmulor i din WooCommerce-butik. I den här artikeln kommer vi att visa dig några enkla metoder för att få dessa användbara navigationsspår igång på din webbplats på nolltid.

Varför ska du add to Breadcrumbs i WooCommerce?

Breadcrumbs är navigationslänkar som visas högst upp på dina produktsidor eller blogginlägg. Dessa links visar dina besökare hur de hamnade på den page som de för närvarande viewar.

Om du till exempel har en WooCommerce store som säljer kläder, så kan breadcrumbs menyn se ut ungefär så här: Hem ” Herrmode ” Skjortor & Polo ” Formella skjortor.

Att aktivera breadcrumbs i WooCommerce gör det lättare för dina kunder att navigera i din online-butik och hitta de produkter de letar efter. De kan enkelt clicka på produktattributen eller kategorierna för att view related products.

Breadcrumbs hjälper också search engines att förstå hierarkin och strukturen hos länkarna i din store. Search engines som Google gillar även att displayed dem i sökresultaten, vilket kan öka din click through rate.

Med det sagt, låt oss titta på hur du kan aktivera breadcrumbs i din WooCommerce store. Vi kommer att täcka två metoder, och den första rekommenderas för de flesta användare:

Metod 1: Lägg till Breadcrumbs i WooCommerce med AIOSEO (rekommenderas)

Det enklaste sättet att aktivera breadcrumbs i WooCommerce är genom att använda All in One SEO (AIOSEO) plugin.

Det är det bästa pluginet för sökmotorsoptimering för WordPress på marknaden och allow you att add breadcrumbs i WooCommerce med ett click på en knapp. Tillägget hjälper dig också att optimera din store för search engines utan några tekniska färdigheter.

För denna tutorial kommer vi att använda AIOSEO Pro-versionen eftersom den innehåller breadcrumbs templates och erbjuder fler alternativ för customize.

Det finns också en gratis version tillgänglig som innehåller breadcrumbs men som inte erbjuder breadcrumb templates.

Först måste du installera och aktivera pluginet AIOSEO på din website. Du kan läsa vår guide för mer detaljer om hur du installerar ett plugin för WordPress.

Vid aktivering måste du navigera till All in One SEO ” Allmänna Settings och enter din license key. You can find the key in the AIOSEO account area.

Därefter måste du konfigurera AIOSEO i din WooCommerce store med hjälp av dess Setup Wizard. Om du behöver hjälp kan du följa vår guide om hur du ställer in All in One SEO för WordPress.

När du har korrekt konfigurerat pluginet på din webbplats måste du gå till All in One SEO ” General Settings page och sedan klicka på fliken ’Breadcrumbs’.

Efter det kan du aktivera alternativet ”Aktivera Breadcrumbs”, och AIOSEO kommer automatiskt att lägga till breadcrumbs schemamarkering i din WooCommerce stores kod.

Därefter måste du välja hur du gillar att visa breadcrumbs. Rulla bara ner så ser du de olika sätten att add to breadcrumbs till din store.

Du kan lägga till dem på en page eller post manuellt med hjälp av en shortcode eller block, eller lägga till dem i ett widget-område. Avancerade användare kan också använda PHP-kod för att add breadcrumbs till sina temas templates.

Vi kommer att visa dig hur du addar breadcrumbs till dina WooCommerce-produkter under, men först, låt oss ta en titt på alternativen för customomize.

Nu, om du rullar ner till Breadcrumbs Settings section, då ser du flera inställningar för att customize dina breadcrumbs.

You can for instance change the separator symbol, enable the homepage link, add a breadcrumb prefix, change the format, and more. Du kan till och med se en preview av hur dina navigations links appear på din WooCommerce store.

AIOSEO Pro ger dig också tillgång till breadcrumb templates.

These templates allow you to show professional looking breadcrumbs links on your website for different content types, taxonomies, and archives.

Inte bara det, men WordPress plugin erbjuder också olika alternativ för att customize templaten.

You kan till exempel inaktivera alternativet ”Use a standard template” och view more settings.

Det finns alternativ för att visa länken till homepage, länken till post type archive, taxonomilänken, add to tags till mallen och select om du vill prioritera kategorier eller tags taxonomi.

Om du har ställt in parent-kategorier för flera produkter kan du också customize dem i breadcrumbs template editor.

När you är klar, glöm inte att save dina ändringar.

Därefter måste du add breadcrumbs till dina WooCommerce-produktsidor.

AIOSEO kommer att visa fyra olika metoder, men det enklaste sättet är att använda en shortcode för att visa breadcrumbs navigationslänkar i din online store.

Allt du behöver göra är att add to följande shortcode där du gillar att visa breadcrumbs:

[aioseo_breadcrumbs]

Gå bara till Produkter ” All Products och edit en produkt page. Därefter kan du add the shortcode i WordPress editor’s ”Text” view och update your page.

You can now visit your product page to see the breadcrumb navigational links in action.

Så här gillade vi det på vår test website.

Förutom det kan du också add to breadcrumbs till din WooCommerce stores sidebar. På så sätt behöver du inte redigera varje enskild produkt page för att visa navigations links, eftersom de kommer att visas på hela din site i sidebaren.

För att visa breadcrumbs i sidebaren kan du heada till Appearance ” Widgets från din WordPress admin area.

Click the plus sign icon in the top left, and then search for ”breadcrumbs” to find the ”AIOSEO – Breadcrumbs” widget. Det är bara att drag and dropa in den i sidebaren. You can also enter a title for your navigational links.

När du har gjort det kan du klicka på knappen ”Save”.

Sedan är det bara att viewa din WooCommerce store för att se breadcrumbs i sidebaren.

Om du vill använda andra sätt att lägga till breadcrumbs i din WooCommerce store, kontrollera vår guide om hur man visar breadcrumb navigation länkar i WordPress.

Hur man lägger till Breadcrumbs för flera kategorier

Har du produkter i din WooCommerce store som har flera kategorier?

Om ja, då kan det vara en utmaning att ställa in breadcrumbs korrekt eftersom WordPress inte registrerar den väg en kund tog för att landa på produktsidan.

AIOSEO addar dock automatiskt den första kategorin i breadcrumb och gör det enkelt att visa korrekt navigation menu för produkter som har flera kategorier.

Pluginet erbjuder också en breadcrumbs-mall som du kan customize för WordPress taxonomier som produktkategorier. Allt du behöver göra är att heada till All in One SEO ” Allmänna Settings och sedan välja tabben ’Breadcrumbs’.

Därefter rullar du ner till sektionen ”Breadcrumbs Templates” och väljer tabben Taxonomies. Som standard kommer pluginet att visa länken till det parent objektet i breadcrumbs på din WooCommerce store.

Om du inaktiverar alternativet ”Använd en standard template” kommer du att se att ”Visa länk till parent objekt” är aktiverad. På så sätt kan du enkelt visa den primära kategorin för alla produkter på din website.

Låt oss till exempel säga att you run en online skoaffär och en av produkterna finns i både kategorierna Sneakers och Trainers.

AIOSEO kommer automatiskt att välja den första kategorin.

Sedan kommer den att visa det i navigationsmenyn Breadcrumb.

Metod 2: Add Breadcrumbs med hjälp av WooCommerce Breadcrumbs Plugin

Ett annat sätt att aktivera breadcrumbs i WooCommerce är genom att använda WooCommerce Breadcrumbs plugin.

Det är ett gratis plugin för WordPress som allow you to add breadcrumbs till your online store. Pluginet är användarvänligt men saknar de customize-funktioner som du hittar i AIOSEO.

Först måste du installera och aktivera WooCommerce Breadcrumbs plugin. För mer detaljer kan du läsa vår tutorial om hur du installerar ett WordPress plugin.

När pluginet är aktivt kan du heada över till Settings ” WC Breadcrumbs från din WordPress admin area. Efter det, gå vidare och klicka på kryssrutan för ”Aktivera breadcrumbs.

Därefter kan du ändra utseendet på de navigations links som kommer att visas på din WooCommerce store.

WooCommerce plugin låter dig välja symbolen för breadcrumb separator och HTML-taggar före och efter dina breadcrumbs.

Om du rullar ner nu hittar du fler alternativ för customize. For instance, you can change the text and URL for your homepage that will appear in the navigational links.

När du är klar med ändringarna, glöm inte att klicka på knappen ”Save Changes” längst ner.

Expertguider om navigation i WordPress och WooCommerce

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till brödsmulor i WooCommerce. Du kanske också vill se några andra guider relaterade till navigering i WordPress och WooCommerce:

• Ordlista: Breadcrumbs
• Hur man visar Breadcrumb navigation Links i WordPress
• Hur man gör en smart WooCommerce Product Search
• Så här addar du navigation med piltangenter i WordPress
• Så här addar du en navigation menu i WordPress (Beginner’s Guide)
• Så här addar du customize navigeringsmenyer i WordPress Themes
• Så här addar du Customize objekt till specifika WordPress-menyer
• Så här skapar du en dropdown-meny i WordPress (Guide för Beginnare)
• Hur man visar olika menyer till inloggade användare i WordPress
• Så här stylar du menyer för navigation i WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.