Gå till innehållet

Hur man skapar en anpassad sida i en WooCommerce-butik med Elementor

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Vill du lära dig hur du skapar en anpassad sida för en WooCommerce-butik med Elementor?

Som du kanske vet kommer Elementor Pro med en WooCommerce-byggfunktion som låter dig bygga en anpassad e-handelswebbplats med WooCommerce utan kodning. Med den här funktionen kan du skapa anpassade WooCommerce-sidor med 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 votresite.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 Våra 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 Våra 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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

hur man skapar en anpassad sida för en WooCommerce-butik med ElementorDet 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

hur man skapar en anpassad sida för en WooCommerce-butik med Elementor

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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 Shoppa Sida. Klicka på knappen SPARA & STÄNG för att spara ändringen.

hur man skapar en anpassad sida för en WooCommerce-butik med Elementor

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:

  • Våra 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 bygga en personlig och unik e-handelswebbplats med WooCommerce och ingen kodning. Inget behov av att installera ett WordPress-tema som påstår sig vara utformat för WooCommerce. Istället kan du skapa egna WooCommerce-sidor själv med Elementors visuella redigerare.

Läs också: Hur man lägger till avdelare för att skapa avsnitt i Elementor

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

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

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer