Lista produkter i Elementor med WooCommerce Product Table

I det här inlägget visar vi dig hur du kombinerar Elementor och WC Product Table för att skapa en mer anpassad WordPress-webbplats samtidigt som du ökar försäljningen av din WooCommerce-butik.

WordPress förenklar processen att skapa en webbplats och få den igång snabbt. WooCommerce är ett WordPress- plugin som låter dig förvandla alla WordPress-webbplatser till en fullt fungerande webbutik. Du riskerar att producera en kopieringswebbplats, men om du fortsätter med deras standardalternativ och funktioner kanske det inte passar dina affärsbehov. Det är viktigt att hitta de bästa verktygen för att designa och anpassa din webbplats tills det är vad du vill.

Många Wordpress och WooCommerce plugin s finns tillgängliga för att förbättra din butikens funktion - Elementor för ex amp le, är det enklaste verktyget för att anpassa WooCommerce produktsidan. Även om det är en av dess viktigaste fördelar, har det också några betydande nackdelar. För ex amp le, när du kombinerar Wordpress plugin s från olika författare, du kör chansen att stöta på kompatibilitets fel och andra komplikationer; detta är inte fallet när du använder WooCommerce Product Table och Elementor- plugin för WordPress-webbplatser. Du kommer att ha större kontroll över utseendet och funktionaliteten på din webbplats när du använder något av dessa plugin program, och de kan användas tillsammans för att få ännu mer utmärkta resultat.

En snabb översikt över WooCommerce Product Table och Elementor Frameworks

Som tidigare nämnts finns det ett stort urval av WordPress- plugin program tillgängliga för att hjälpa dig att skapa en bättre WordPress-webbplats som är anpassad till dina specifika krav. Vissa plugin program är utformade för att användas i stor skala, medan andra är utformade för att lägga till en viss aspekt eller funktion.

Elementor är en amp av den första typen av applikation:

Vår sidbyggare- plugin erbjuder dig ett helt nytt gränssnitt för att skapa webbsidor och skapa din WordPress-webbplats. Du får stor kontroll över hur din webbplats är sammansatt genom att välja från och anpassa ett omfattande bibliotek med widgets, block och layouter.

Medan WooCommerce-produktbordet är en mer allmän lösning är den också mer riktad:

Detta plugin låter dig skapa dynamiska, helt anpassningsbara tabeller som visar dina WooCommerce-produkter och tjänster. Men på grund av deras interaktion med WooCommerce är dessa tabeller särskilt väl lämpade för att visa artiklar och tjänster på ett användarvänligt och visuellt tilltalande sätt för online-kunder. Stolparna Tabell Pro plugin samverkar lika med Elementor och listor varje Wordpress innehållstypen i en tabell istället för att bara WooCommerce produkter (om du vill visa något bortsett från produkter - såsom stolpar, sidor, eller dokument), kan användas i stället.

När de används tillsammans med varandra ger Elementor och WooCommerce Product Table betydligt olika funktioner. Du kan använda dem för att producera några mycket betydande effekter som hjälper till att öka antalet försäljningar för din WooCommerce-butik.

Nu är det dags att komma igång. I de följande avsnitten tittar vi på några verkliga amp av hur du kan använda WooCommerce Product Table och Elementor för att skapa effekter som liknar de som visas ovan.

När det gäller att kombinera dessa två plugin är himlen gränsen - och det här är bara några av möjligheterna. Med lite försök och fel kan du sätta ihop olika sidor med samma grundläggande tillvägagångssätt som vi kommer att visa.

Först och främst vill du se till att båda plugin är korrekt installerade på din webbplats. Det är bra att installera Elementor och konfigurera WooCommerce-produktbordet är smärtfritt och enkelt. WooCommerce själv måste också installeras och aktiveras innan du kan fortsätta med detta steg. Då är du redo att börja arbeta med ditt projekt.

Följ dessa steg för att integrera en WooCommerce-produkttabell i en textredigerare eller kortkodsvidget:

Låt oss börja med den mest grundläggande och fördelaktiga applikationen som är möjlig. Alternativt, om du bara vill använda en dynamisk produkttabell på din Elementor-webbplats kan du lägga till den i en widget och låta den visas på framsidan av webbplatsen.

Se till att du använder Elementor-redigeraren när du öppnar en sida eller ett inlägg för att uppnå detta. Om du får det välbekanta WordPress-gränssnittet klickar du på knappen Redigera med Elementor för att växla till Elementor-gränssnittet:

Om det här är första gången du arbetar med Elementor, låt oss ta en liten rundtur runt plattformen. Ett stort område visas till höger där ditt innehåll kommer att visas och det kommer att uppdateras i realtid när du lägger till och ändrar det. På vänster sida av skärmen finns en lista med "widgets" som du kan dra in i det angivna området och sedan omorganisera och konfigurera efter behov:

En produkttabell kan användas med en mängd olika Elementor-widgets. Om du bara vill visa en enskild produkttabell på en sida kan du göra det genom att inkludera ett inledande textavsnitt i sidans HTML-kod. Plocka upp textredigeringswidgeten och flytta den till en tom plats enligt följande:

Därefter kan du klicka inuti widgeten för att ta bort standardtexten och ersätta den med vilket innehåll du vill ha. När det gäller själva produkttabellen kan du inkludera den genom att klistra in den här enkla kortkoden:

[produkttabell]

När du sätter in kortkoden på din sida kommer tabellen att visas på den plats du anger, som du kan verifiera genom att visa den i fronten:

Om du bara vill använda ett element för själva koden kan du använda Shortcode-widgeten.

Glöm aldrig att spara sidan när du är klar med placeringen av bordet, oavsett var du väljer att lägga den. Därefter vill du förmodligen göra några ändringar i hur tabellen ser ut och fungerar.

Gå tillbaka till din WordPress-instrumentpanel och navigera till fliken WooCommerce> Inställningar för att slutföra den här uppgiften. Produkttabeller kan hittas genom att välja Produkter högst upp på skärmen och sedan Produkttabeller:

En grundlig lista med alternativ för att konfigurera din WooCommerce-produkttabell hittar du här. Du har fullständig kontroll över informationen som visas i tabellen och du kan anpassa den genom att bland annat lägga till filter och variabler. Kolla in plugin dokumentation för mer information om de olika alternativen.

Du kommer att kunna ändra produkttabellen du just skapade med Elementor utan att behöva göra något annat. När du har anpassat tabellen efter dina specifikationer sparar du bara dina ändringar så är du redo att börja!

Dragspel, flikar och växlar kan användas för att organisera flera produkttabeller.

Ovanstående lösning fungerar bra om du vill presentera ett enda bord med dina WooCommerce-produkter. Om du ska konstruera många tabeller, som alla har en annan kategori av objekt, är det inte det bästa alternativet.

Det finns flera olika sätt att åstadkomma detta i Elementor. Accordion-widgeten, för ex amp , kan användas för att generera samma effekt som vi såg i den senaste fallstudien. Börja från det högra redigeringsområdet och flytta dragspelwidgeten till det vänstra redigeringsområdet.

Du kan skapa så många separata flikar som du vill genom att klicka på plustecknen och du kan anpassa rubrikerna och texten i var och en. Dessutom kan du lägga till en produkttabell i en eller flera flikar med samma kortkod som tidigare nämnts.

Att helt enkelt lägga till den grundläggande kortkoden kommer naturligtvis att resultera i en följd av liknande produkttabeller, vilket troligen inte är vad du letade efter i första hand. I stället måste du anpassa varje kortkod att visa bara vissa produkter - för ex amp le, objekt från en viss kategori - i stället för alla produkter.

Metoden du använder bestäms av de produkter du vill inkludera och utelämna från varje tabell i fråga. Mer information finns i den kompletta guiden för att anpassa dina WooCommerce-produktkortskortkoder.

Det är värt att notera att du kan uppnå en liknande effekt med hjälp av några andra användbara Elementor-widgets; detta omfattar bland annat widgeten Toggle och Tabs-widgeten. När det gäller att presentera flera WooCommerce-produkttabeller på ett tilltalande och välorganiserat sätt är Elementor ditt bästa verktyg.

Rensa upp din slarviga markering tack vare gratis online HTML-, CSS- och JavaScript-arrangörer!

Tänk på utformningen av din e-handelswebbplats om du vill att ditt företag ska sticka ut från konkurrenterna. För ex amp , vill du bestämma det mest effektiva sättet att visa upp dina produkter, helst i en stil som är både användarvänlig och visuellt tilltalande för ögat.

Lyckligtvis använder WooCommerce Product Table plugin med Elementor detta till en enkel uppgift. Din produktkorts kortkod kan användas för att visa allt som din webbplats har att erbjuda (eller bara ett urval) på ett verkligt dynamiskt sätt.

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *