Hvis det er en funksjon du finner på nesten hvilket som helst tilknyttet nettsted, er det et diagram for produktsammenligning. Seriøst, jeg tror et krav for å bli med i Amazon Associates tilknyttede program er at du er i stand til å lage produktsammenligningstabeller.

Men til tross for sin allestedsnærværende, lager de fleste fortsatt møysommelige produkttabellene sine ved hjelp av sidebygger, tilpasset HTML eller et bordtillegg som Excel eller TablePress.

I denne opplæringen vil jeg vise deg en alternativ løsning som er et flott alternativ hvis du bruker et tilknyttet nettsted drevet av WooCommerce.

Du lærer hvordan du lager dynamisk genererte, søkbare, filtrerbare og sorterbare tabeller. Best av alt, du har full kontroll over informasjonen du viser i din tilknyttede produkttabell.

Ikke bare vil dette spare deg for tid, det vil gjøre ting bedre for deg Besøkende (og en bedre opplevelse betyr flere konverteringer!).

Hvordan lage et tilknyttet produktkort på WooCommerce

For denne veiledningen til arbeid, trenger du to plugins:

  • WooCommerce - dette er hva du vil bruke til å administrere de forskjellige tilknyttede produktene dine.
  • WooCommerce produkttabell - dette er hva du vil bruke til å vise disse tilknyttede produktene i en filtrerbar, sorterbar og søkbar tabell.

Jeg vil anta at du har installert og aktivert begge plugins før du starter guiden.

Det vil si, mens jeg skal vise deg hvordan du legger til et tilknyttet produkt WooCommerce, jeg skal ikke vise deg hvordan du setter opp en butikk WooCommerce. Hvis du trenger hjelp, kan du sjekke ut denne omfattende veiledningen.

Trinn 1: Legg dine tilknyttede produkter til WooCommerce

Mange tror at WooCommerce bare er en løsning å selge din egen Produkter. Men det inkluderer faktisk grunnleggende funksjonalitet for salg av eksterne tilknyttede produkter - ingen justeringer kreves!

For å legge til ditt første tilknyttede produkt, gå til Produkter → Legg til nytt i dashbordet ditt.

Det viktige er å finne Meta-boksen med produktdata og endre type produkt i Eksternt / tilknyttet:

Opprette et WordPress-tilknyttet produkt

Fyll deretter inn informasjonen for:

  • Produkt URL - dette er URL-en som fører direkte til produktet.
  • Knapptekst – WooCommerce vil vise en knapp for å koble til hvor besøkende kan kjøpe produktet, i stedet for en Legg i handlekurv-knapp.
  • Prix - Det er ikke obligatorisk . Og hvis du lenker til Amazon, må du huske å oppgi en statisk pris, da det er i strid med Amazon Associates-policyen å ha unøyaktige priser ( noe som sannsynligvis skyldes at Amazon endrer priser ). For andre tilknyttede programmer bør du ikke ha noe problem.

I tillegg til den tilknyttede spesifikke informasjonen, vil du også fylle ut generelle produktdetaljer som:

  • Tittel
  • Beskrivelse
  • Bilde
  • Etc.

Når du har publisert tilknyttet produkt, kan du bekrefte at produktsiden viser en knapp med en oppfordring til handling for å kjøpe fra en ekstern butikk:

Eksempel på et produkt å kjøpe i en butikkNå er alt du trenger å gjøre å gjenta den samme prosessen for så mange tilknyttede produkter som du vil legge til.

Jeg anbefaler å bruke en kategori eller tag for å dele produktene etter emne, da det vil være nyttig senere hvis du vil lage flere tilknyttede produkttabeller for forskjellige emner.

Trinn 2: Konfigurer WooCommerce produkttabell Shortcode

For å vise en tabell over tilknyttede produkter, bruker du WooCommerce Product Table plugin-kortnummeret.

Selv om du fremdeles kan redigere kortkoden per tabell manuelt, lar pluginen deg konfigurere kortkodens standardfunksjonalitet ved å gå til WooCommerce → Innstillinger → Produkter → Produkttabeller (Produkttabell):

Woocommerce produkttabell

Vi vil fokusere på innstillingene som gjelder for å lage en tilknyttet produkttabell.

I området av Borddesign, kan du konfigurere et tilpasset design for bordet ditt hvis du ønsker:

Woocommerce produktborddesign design

Eller du kan alltid holde deg med pluginens standardstil.

Å gå litt, kan du velge hvilken informasjon som skal vises i kolonner i bordet ditt. Personlig synes jeg standardoppsettet er ganske solid. Den viser:

  • Produktbilde
  • fornavn
  • Kort beskrivelse
  • Prix
  • Legg i handlekurven knappen ( direkte lenke til tilknyttet butikk )

Hvis du ikke planlegger å vise priser, kan du fjerne priskolonnen. Du kan også fjerne den korte beskrivelsen, da den kan gjøre brettet litt rotete hvis du har lange beskrivelser.

På samme måte kan du legge til flere kolonner for å vise mer informasjon. Denne hjelpeartikkelen inneholder en fullstendig liste over potensielle kolonner.

Konfigurere kortkoder

Disse er egentlig de eneste to ting som du  ta i betraktning. Selv om du alltid kan endre de andre innstillingene etter eget ønske, tror jeg standardene er ganske bra for de fleste bruksområder.

Trinn 3: Sett inn WooCommerce produktkode

Nå som du har konfigurert standardinnstillingene, kan du sette inn din tilknyttede produkttabell ved hjelp av kortkoden product_table ] (uten mellomrom).

Det eneste du trenger å legge til kortnummeret ditt er en parameter for å indikere de spesifikke produktene som skal inkluderes (ellers vil kortkoden vise alle tilgjengelige WooCommerce-produkter, som kanskje ikke er det du vil ha).

For å gjøre dette kan du bruke stikkord "Tag_name" ou kategori "Kategori navn" .

Her er for eksempel et eksempel på bruk av shortode:

Bruke kortkoden

Og slik ser det ut på grensesnittet:

Eksempel på produkttabell

Noen punkter å merke seg i denne tabellen når du bygger tabellen:

  • Tabellen bruker knappeteksten du skriver inn når du konfigurerer tilknyttet produkt. Så du kan bruke den samme teksten overalt, eller gjøre dem forskjellige som i eksemplet mitt.
  • Hvis du ikke angir en pris, vises den tom. Av denne grunn bør du sannsynligvis enten bruke priser eller ikke bruke priser på alle tilknyttede produkter.

4 Trinn: (Valgfritt) Ta med sidefeltfilterwidgets

En interessant ting du kan gjøre med WooCommerce Product Table ( og kan ikke gjøre med andre løsninger for sammenligning av produktsammenligning ) er å vise filterwidgeter på sidefeltet slik at din Besøkende kan samhandle med ditt utvalg av tilknyttede produkter.

Det er ikke nødvendig - men jeg tror de gjør brettet ditt mye mer brukbart.

For å legge til dem, gå til Utseende → Widgets og skyv på de forskjellige widgetene " Produkttabell lagdelt navfilter« .

Legg til widgets på wordpress

Når du gjør dette, vil din Besøkende vil kunne filtrere tilknyttede produkter.

For å fullføre

Denne opplæringen fungerer ikke for alle tilknyttede nettsteder, da det avhenger av å bruke WooCommerce til å administrere tilknyttede produkter.

Men hvis du bruker WooCommerce eller har muligheten, bør du vite at dette er en fin måte å vise et mer brukbart og fleksibelt utvalg av tilknyttede produkter på.

Og fordi den genereres dynamisk, vil eventuelle nye tilknyttede produkter du legger til WooCommerce automatisk vises på de tilsvarende tabellene, noe som er mye enklere enn å måtte redigere statiske tabeller manuelt hver gang du vil legge til. eller oppdater et produkt.