Vill du lära dig hur man skapar en personlig butikssida? WooCommerce med Elementor?
Som du kanske vet kommer Elementor Pro med byggfunktion WooCommerce vilket tillåter dig att skapa en webbplats av personlig e-handel med WooCommerce utan kodning. Denna funktion låter dig skapa anpassade WooCommerce-sidor med hjälp av Elementors visuella redigerare som erbjuder ett intuitivt gränssnitt.
Se även: Hur man installerar Elementor på WordPress
När denna artikel skrivs kan du skapa anpassade sidor för butikssidan, produktsidan och produktarkivsidorna (taggar och kategorier). Snart kommer du också att kunna skapa egna sidor för kassasidan och kundvagnssidan.
I den här artikeln visar vi dig hur du skapar en anpassad WooCommerce-butiksida med Elementor Pro's WooCommerce-byggfunktion.
Själva butiksidan är en av standardsidorna i WooCommerce. Denna sida fungerar som en utställning för att visa dina produkter. Du kan komma åt den här sidan genom att gå till yoursite.com/store. Som standard visar WooCommerce-butiksidan endast WooCommerce-produkter.
Genom att skapa en anpassad butikssida med Elementor Pro kan du lägga till element för att göra din butik mer attraktiv.
Hur man skapar en anpassad sida i en WooCommerce-butik med Elementor
Det finns minst två Elementor-widgets som du kan använda för att skapa en anpassad sida i en WooCommerce-butik: Arkivera produkter och Produkter.
I det här exemplet använder vi det senare.
Funktionen för widgeten Produkter är ganska lik widgetens Inlägg. Skillnaden är att widgeten Produkter används för att visa WooCommerce-produkter medan Posts-widgeten används för att visa blogginlägg.
Läs också: Hur man importerar eller exporterar modeller i Elementor
Observera att du bara kan hitta widgeten Produkter när plugin-programmet WooCommerce är installerat och aktiverat.
För att börja skapa en anpassad WooCommerce-butiksida med Elementor Pro, gå till för det första à Mallar -> Temabyggare på din WordPress-instrumentpanel. Klicka på fliken Produkter arkiv på sidan Temabyggare och klicka sedan på knappen ajouter a PRODUKTARKIV.
Ge din modell ett namn och klicka på knappen SKAPA EN MODELL.
Det finns tre anpassade butikssidemallar du kan välja mellan om du vill skapa den anpassade butiksidan från en mall. Om du vill bygga den anpassade butiksidan från grunden kan du bara stänga mallbiblioteket.
Se även: Hur man använder Color Sampler i Elementor
I det här exemplet skapar vi den anpassade butiksidan från grunden. Som nämnts ovan använder vi widgeten Produkter för att visa produkterna.
Innan du lägger till widgeten Produkter i redigeringsrutan kan du definiera layouten genom att lägga till avsnitt och kolumner. När layouten är klar kan du helt enkelt dra widgeten Produkter till redigeringsrutan.
Som du kan se laddar widgeten Produkter automatiskt och visar de senaste WooCommerce-produkterna. Du kan ändra frågan genom att öppna blocket Fråga under fliken Innehåll från inställningspanelen. Det finns fem alternativ att välja mellan:
- Aktuell fråga - Aktuell fråga
- Senaste produkterna - Senaste produkterna
- Försäljning - Försäljning
- Utvalda - Utvalda
- Manuellt val - Manuellt val
Du kan också ange i vilken ordning produkterna ska visas eller utesluta vissa
För att ställa in antalet kolumner och rader kan du öppna blocket Innehåll under fliken Innehåll. Från detta block kan du också aktivera paginering.
Du kan leka med inställningspanelen tills du får de bästa inställningarna för widgeten Produkter. När du är klar med widgeten Produkter kan du lägga till fler widgets på din sida.
Läs också: Hur man använder färgväljaren i Elementor
När du är klar med att redigera sidan kan du klicka på knappen PUBLICERA längst ner på inställningspanelen.
Lägg till ett visningsvillkor genom att klicka på knappen lägg till ett villkor. Eftersom du vill skapa en anpassad butikssida, välj alternativet Butik Sida. Klicka på knappen SPARA & STÄNG för att spara ändringen.
Hittills har du framgångsrikt skapat den anpassade WooCommerce-butiksidan med Elementor Pro. Du kan gå på din webbplats.com/store för att kontrollera resultatet.
Anpassa produktwidgeten
Innan du publicerar din sida kan du anpassa widgeten Produkter för att göra den mer attraktiv. För att göra det, klicka på widgeten i redigeringsrutan och navigera till fliken Stil från inställningspanelen. Det finns fyra block som du kan öppna enligt följande:
Produkter
Du kan öppna detta block för att definiera klyftan mellan kolumner och rader. Från detta block kan du också ställa in typografi (teckensnittsfamilj, teckensnittsstorlek, etc.) samt textfärg för produktelement som produkttitel, produktpris, produktbedömning, produkt, etc.…. Du kan också ställa in gränsen för produktbilden,
- Box
I detta sammanhang hänvisar Box till behållaren för varje produkt. Du kan öppna blocket Box för att definiera kantens bredd, kantradien, lådans skugga, bakgrundsfärg, kantfärg etc.
- Paginering
Om du aktiverar alternativet Paginering från blocket Innehåll, du kan öppna blocket Paginering under fliken Stil för att anpassa sidan. Du kan ställa in saker som avstånd, kantfärg, bakgrundsfärg etc.
Du kan också definiera olika parametrar för varje tillstånd (normal, pekande och aktiv).
- Rea Flash
När du lägger till en ny produkt i WooCommerce kan du ställa in ett försäljningsprisattribut för att visa dina besökare att den tillhörande produkten är rabatterad. För att betona detta kan du visa försäljningsattributet på butikssidan så att rabatterade produkter har ett försäljningsmärke.
Du kan öppna blocket Rea Flash för att anpassa försäljningsmärket. Du kan definiera element som textfärg, bakgrundsfärg, typografi, kantradie, storlek (bredd och höjd), avstånd osv.
I finalen
WooCommerce Builder är en av funktionerna som erbjuds av Elementor Pro. Det låter dig skapa en webbplats personlig och unik e-handelsplattform med WooCommerce och utan kodning. Inget behov av att installera en Wordpress tema som påstår sig vara designad för WooCommerce. Istället kan du själv skapa anpassade WooCommerce-sidor med hjälp av Elementors visuella redigerare.
Läs också: Hur man lägger till avdelare för att skapa avsnitt i Elementor
Fram till version 3.2.2 tillåter Elementor Pro dig bara att skapa sidor med anpassad butik, sida med anpassad produkt och anpassade produktarkivsidor. Men Elementor meddelade att i nästa version av Elementor Pro kommer du också att kunna skapa en anpassad kundvagnssida, en anpassad kassasida och en anpassad kundkontosida.
Skaffa Elementor Pro nu!
Slutsats
Här! Det är det för den här artikeln som visar hur du skapar en anpassad sida för en WooCommerce-butik med Elementor. Om du har några frågor om hur du kommer dit flåt oss veta i commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
