Liste produkter i Elementor med WooCommerce Product Table

I dette innlegget viser vi deg hvordan du kombinerer Elementor og WC Product Table for å lage et mer tilpasset WordPress-nettsted, samtidig som salget til WooCommerce-butikken øker.

WordPress forenkler prosessen med å lage et nettsted og få det i gang raskt. WooCommerce er et WordPress- plugin som lar deg gjøre ethvert WordPress-nettsted til en fullt fungerende nettbutikk. Du risikerer å produsere et kopieringssted, men hvis du fortsetter med standardalternativene og funksjonene, er dette kanskje ikke riktig for dine forretningsbehov. Det er viktig å finne de beste verktøyene for å designe og tilpasse nettstedet ditt til det er det du vil ha.

Mange WordPress og WooCommerce plugin s er tilgjengelig for å forbedre butikkens funksjonalitet - Elementor, for ex amp le, er den enkleste verktøy for å tilpasse ditt WooCommerce produktsiden. Selv om det er en av de viktigste fordelene, har det også noen betydelige ulemper. For ex amp le, når du kombinerer WordPress plugin s fra forskjellige forfattere, kjører du sjansen til å møte kompatibilitetsfeil og andre komplikasjoner; dette er ikke tilfelle når du bruker WooCommerce Product Table og Elementor- plugin er for WordPress-nettsteder. Du vil ha større kontroll over utseendet og funksjonaliteten til nettstedet ditt når du bruker en av disse plugin , og de kan brukes sammen for å få enda mer gode resultater.

En rask oversikt over WooCommerce Product Table og Elementor Frameworks

Som tidligere nevnt er det et stort utvalg av WordPress- plugin er tilgjengelig for å hjelpe deg med å lage et bedre WordPress-nettsted som er tilpasset dine spesifikke behov. Noen plugin er designet for å brukes i stor skala, mens andre er designet for å legge til et bestemt aspekt eller funksjon.

Elementor er en ex amp le av den første typen applikasjoner:

Vår sidebygger- plugin tilbyr deg et helt nytt grensesnitt for å lage websider og opprette WordPress-nettstedet. Du får stor kontroll over måten nettstedet ditt er satt sammen ved å velge fra og tilpasse et omfattende bibliotek med widgets, blokker og layouter.

Mens WooCommerce-produkttabellen er en mer generell løsning, er den også mer målrettet:

Dette plugin lar deg lage dynamiske, fullt tilpassbare tabeller som viser WooCommerce-produktene og -tjenestene dine. Imidlertid, på grunn av deres interaksjon med WooCommerce, er disse tabellene spesielt godt egnet for å vise varer og tjenester på en brukervennlig og visuelt tiltalende måte for online-kunder. plugin innlegget Posts Posts Pro samhandler likt med Elementor og viser en hvilken som helst WordPress-innholdstype i en tabell i stedet for bare WooCommerce-produkter (hvis du ønsker å vise noe bortsett fra produkter - for eksempel innlegg, sider eller dokumenter), kan brukes i stedet.

Når det brukes sammen med hverandre, gir Elementor og WooCommerce Product Table betydelig forskjellige muligheter. Du kan bruke dem til å produsere noen svært betydningsfulle påvirkninger som vil bidra til å øke antall salg for din WooCommerce-butikk.

Nå er det på tide å komme i gang. I de følgende avsnittene ser vi på noen virkelige eks- amp av hvordan du kan bruke WooCommerce Product Table og Elementor til å lage effekter som ligner på de som er vist ovenfor.

Når det gjelder å kombinere disse to plugin , er himmelen grensen - og dette er bare noen få av mulighetene. Med litt prøving og feiling kan du sette sammen forskjellige sider ved å bruke den samme grunnleggende tilnærmingen som vi vil demonstrere.

Først og fremst vil du sørge for at begge plugin er riktig installert på nettstedet ditt. Det er bra at installering av Elementor og konfigurering av WooCommerce Product Table er smertefri og grei. WooCommerce i seg selv må også være installert og aktivert før du kan fortsette med dette trinnet. Da er du klar til å jobbe med prosjektet ditt.

Følg disse trinnene for å innlemme en WooCommerce-produkttabell i en teksteditor eller kortkodeprogram:

La oss starte med den mest grunnleggende og fordelaktige applikasjonen som er mulig. Alternativt, hvis du bare vil bruke en dynamisk produkttabell på Elementor-nettstedet ditt, kan du legge det til i en widget og få den til å vises på forsiden av nettstedet.

Forsikre deg om at du bruker Elementor-editoren når du åpner en side eller et innlegg for å oppnå dette. Hvis du får presentert det velkjente WordPress-grensesnittet, klikker du på Rediger med Elementor-knappen for å bytte til Elementor-grensesnittet:

Hvis dette er første gang du jobber med Elementor, la oss ta en liten tur rundt plattformen. Et stort område vises til høyre der innholdet ditt vises, og det vil bli oppdatert i sanntid når du legger til og endrer det. På venstre side av skjermen er det en liste over 'widgets' som du kan dra inn i det angitte området og deretter omorganisere og konfigurere etter behov:

En produkttabell kan brukes med en rekke forskjellige Elementor-widgets. Hvis du bare vil vise en enkelt produkttabell på en side, kan du oppnå det ved å inkludere en innledende tekstdel i sidens HTML-kode. Plukk opp Teksteditor-widgeten og flytt den til et tomt sted som følger:

Etter det kan du klikke inne i modulen for å fjerne standardteksten og erstatte den med hvilket innhold du vil ha. Når det gjelder selve produkttabellen, kan du inkludere den ved å lime inn i denne enkle kortkoden:

[produkttabell]

Når du setter inn kortkoden på siden din, vises tabellen på stedet du angir, som du kan bekrefte ved å se den i frontenden:

Hvis du bare vil bruke et element for selve koden, kan du bruke Shortcode-widgeten.

Glem aldri å lagre siden når du er ferdig med å plassere bordet, uansett hvor du bestemmer deg for å legge den. Etter det vil du sannsynligvis gjøre noen endringer i hvordan tabellen ser ut og fungerer.

Gå tilbake til WordPress-dashbordet ditt og naviger til WooCommerce> Innstillinger-fanen for å fullføre denne oppgaven. Produktbord finner du ved å velge Produkter øverst på skjermen og deretter Produkttabeller:

En grundig liste over alternativer for konfigurering av WooCommerce-produkttabellen finner du her. Du har full kontroll over informasjonen som vises i tabellen, og du kan tilpasse den ved å legge til filtre og variabler, blant annet. Sjekk ut plugin -dokumentasjonen for mer informasjon om de forskjellige valgene.

Du vil kunne endre produkttabellen du nettopp opprettet ved hjelp av Elementor uten å måtte gjøre noe annet. Når du er ferdig med å tilpasse tabellen til dine spesifikasjoner, er det bare å lagre endringene, og du er klar til å gå!

Trekkspill, faner og veksler kan brukes til å organisere flere produkttabeller.

Ovennevnte løsning fungerer bra hvis du vil presentere et enkelt bord med WooCommerce-produktene dine. Hvis du skal lage mange tabeller, som hver har en annen kategori av objekter, er dette ikke det beste alternativet.

Det er flere forskjellige måter å oppnå dette på Elementor. Trekkspill-widgeten, for eksempel amp , kan brukes til å generere den samme effekten som vi så i den siste casestudien. Fra høyre redigeringsområde flytter du trekkspill-widgeten til venstre redigeringsområde.

Du kan opprette så mange separate faner som du vil ved å klikke på plusstegnene, og du kan tilpasse overskriftene og teksten i hver enkelt. I tillegg kan du legge til en produkttabell i en eller flere faner ved å bruke den samme kortkoden som tidligere nevnt.

Bare å legge til den grunnleggende kortkoden vil selvfølgelig resultere i en rekke lignende produkttabeller, noe som sannsynligvis ikke er det du lette etter i utgangspunktet. I stedet må du tilpasse hver kortkode for å vise bare spesifiserte produkter - for eksempel amp , varer fra en bestemt kategori - i stedet for alle produkter.

Metoden du bruker vil bli bestemt av produktene du ønsker å inkludere og utelate fra hvert bord. For mer informasjon, se den komplette veiledningen for å tilpasse WooCommerce-produkttabell-kortkodene.

Det er verdt å merke seg at du kan oppnå en lignende effekt ved hjelp av noen andre nyttige Elementor-widgets; dette omfatter widgeten Toggle og Tabs, blant andre komponenter. Når det gjelder å presentere flere WooCommerce-produkttabeller på en tiltalende og velorganisert måte, er Elementor ditt beste verktøy.

Rydd opp den slurvete markeringen din takket være gratis online HTML-, CSS- og JavaScript-arrangører!

Legg litt alvorlig tanker i utformingen av e-handelsnettstedet ditt hvis du vil at virksomheten din skal skille seg ut fra konkurrentene. For ex amp le, vil du ønsker å finne den mest effektive måten å vise frem dine produkter, helst i en stil som er både brukervennlig og visuelt tiltalende for øyet.

Heldigvis bruker WooCommerce Product Table plugin med Elementor dette til en grei oppgave. Produktkortskortkoden din kan brukes til å vise alt nettstedet ditt har å tilby (eller bare et utvalg) på en virkelig dynamisk måte.

Legg igjen en kommentar

E-postadressen din vil ikke offentliggjøres. Obligatoriske felt er merket med *