Bygg och design en fantastisk WooCommerce-produktsida med Elementor

Du måste ändra din produktsida för att skilja din e-handelsbutik från konkurrenterna och ge dina kunder en unik upplevelse. Dessutom är alternativet att estetiskt anpassa din produktsida avgörande för att upprätthålla en konsekvent visuell design i hela din webbutik.

Elementor är en av de ledande WordPress-webbplatsbyggarna på marknaden, men visste du också att du kunde bygga WooCommerce-butiker med den?

Många inbyggda Elementor WooCommerce-moduler låter dig infoga WooCommerce-innehåll eller funktionsblock eller utforma dem med Elementor-byggaren. Ganska bra, eller hur?

Styling och anpassning av WooCommerce krävde tidigare PHP och CSS för varje liten förändring, men när verktyg som Elementor förbättras och blir mer komplexa blir fler och fler alternativ tillgängliga för att ta kontroll över hur din butik ser ut och fungerar.

Låt oss börja.

• Skapa en Elementor-mall
• Building Imageors produktbild eller galleri
• WooCommerce produkttitel, pris och lägg i kundvagnen
• Ställa in Elementors produktflikar
• Elementor produkt kort beskrivning
• Elementor och WooCommerce produkt upsells
• Slutsats - Elementors produktsidebyggare

Skapa en Elementor-mall

Det första steget i proceduren är att bygga en ny Elementor-mall genom att navigera till Mallar i WordPress-instrumentpanelen. Klicka på "Bygg ny" och välj sedan Enstaka produkt som mall du vill skapa.

När vi utvecklar den här mallen från grunden finns det inget behov av att sätta några block; stäng nästa ruta tills du kommer till den vanliga Elementor-skärmen för en ny sida.

Building Imageors produktbild eller galleri

Varje WooCommerce-produkt har en produktbild eller bildgalleri som visar produktens fotografier för kunderna. Elementor tillhandahåller en inbyggd produktbildsmodul som gör att vi kan infoga detta i vår mall.

Skapa en enkel rad med två kolumner och gå in i produktbilder-modulen i den vänstra kolumnen. detta ser praktiskt ut och utför jobbet, men låt oss anpassa försäljningsmärket så att det matchar Elementor Hello-temat som används för den här artikeln. För att göra detta måste vi använda en liten rad anpassad CSS, som kan introduceras genom att gå till Avancerat> Anpassad CSS och klistra in koden nedan.

väljare .onsale {\ sbackground-color: # cc3366; \ s}

WooCommerce p roduct titel, pris och lägg i kundvagnen

Vi kommer att lägga till Elementor-modulerna för produkttitel, produktpris och Lägg i kundvagn i den högra kolumnen.

Sök efter dessa tre moduler i Elementor-konstruktören, dra och släpp dem över för att ordna dem i den ordning som anges ovan; detta är helt funktionellt, men vi vill anpassa det för att matcha stylingen som ovanstående avsnitt Hello Elementor. Styling-moduler med Elementor är enkla, allt du behöver göra är att klicka på modulen och redigeraren bör öppna stylingsalternativen till vänster.

Innehållet i dessa moduler är utmärkt. Således kommer vi att arbeta under fliken Style. Låt oss först uppdatera teckensnittet och färgen på produkttiteln så att de matchar de som används i Hello Elementor-temat.

Vi måste sedan göra detsamma för modulerna Produktpris och Lägg till i korg genom att klicka på varje modul och ändra textfärgen. För produktpriset ska jag använda en mörkgrå kontrast mot rubriken, så skriv den här hex-koden om du följer med - # 54595f

Därefter uppdaterar vi några saker på modulen Lägg i varukorg. Knappens bakgrundsfärg och ramens radie med hjälp av inställningarna nedan:

• Ställ in innehållet på "Lägg i kundvagn".
• Ställ in bakgrundsfärgen till '# cc3366'
• Ställ in kantradien till 0

Jag ändrade gränsväljaren till mängdsväljaren till 0, vilket du kan göra på fliken Stil för kvantitet.

Ställa in Elementors produktflikar

Varje produkt måste visa lite grundläggande information som en produktbeskrivning och recensioner om tillgängliga; detta hanteras vanligtvis via produktflikar.

Skapa en ny rad under det översta avsnittet och dra modulen Produktdata-flikar från Elementor-byggaren till raden för att infoga den. Det krävs inte mycket styling här eftersom det ärver vissa stilar från Hello Elementor-temat. Låt oss dock ändra stilen på knappen för inlämning av granskning.

För att göra detta behöver vi lite anpassad CSS igen. Börja redigera produktdataflikarna och klicka sedan på fliken Avancerat och bläddra ner till anpassad CSS. Ange CSS nedan och du kan justera färgerna efter din design.

.woocommerce #review form #reply .form-submit input {background-color: # cc3366; färg: #fff; gränsradie: 0px; }

Elementor p roduct kort beskrivning

Okej, så vi har en anständig, enkel design hittills, men det ser lite gles ut. Att lägga till en produktbeskrivningsmodul till den övre delen kan hjälpa till att lägga till detta och lägga till mer sammanhang.

Sök efter WooCommerce kort beskrivningsmodul och dra och släpp den under produktpriset och ovanför Add to Cart-modulen.

Det krävs ingen styling här ännu eftersom den ärvt stilarna från Hello Elementor.

Elementor och WooCommerce p roduct upsells

Att öka ditt genomsnittliga korgvärde är avgörande för varje WooCommerce-webbplats, varför det är trevligt att Elementor innehåller en produktuppsäljningsmodul så att du enkelt kan integrera anpassning i din butik.

Sök efter produkten Upsells-modul i Elementor-byggaren och sätt in den i en ny rad bakom fliken Produktdata.

Som du kan se kräver detta lite justering för att komplettera resten av vår stil. Börja modifiera modulen och gör följande ändringar:

• Ställ in titelfärgen till - # cc3366
• Ställ in rubrikfärgen till - # cc3366
• Ställ in prisfärgen till - # 54595f
• Ställ in knappens bakgrundsfärg till - # cc3366
• Ställ in knappfärgen till - #fff
• Ställ in knappradien t0 - 0

Den färdiga produkten kommer att se ut som ovan. Du kan justera färgkoden enligt önskemål om du använder den här guiden som utgångspunkt för din mall.

När du är klar publicerar du din mall. I nästa fönster ser du frågan ”Var vill du visa din mall?”. Klicka på "Lägg till villkor" för att avgöra när den här mallen ska användas. Du kan välja "Alla produkter" för att använda mallen på alla dina produktsidor. Du kan också välja att använda den här mallen endast för produkter som faller inom en viss kategori eller som har en viss tagg associerad med sig.

Slutsats – Elementor p roduct sidbyggare

Vissa användare kan ha svårt att få sina anpassade designinställningar, som teckensnittsfärg och typografi, att visas när de använder Elementor. Utseendet på din WooCommerce-butik kan påverkas om du använder ett WordPress-tema som kan styra utseendet på din butik. Om du stöter på detta problem, kom ihåg att din artikel i vissa fall kan åsidosätta dina anpassade sidinställningar.

Du kan också välja en tom sida och skapa en från grunden med hjälp av produktwidgets för ett helt anpassat utseende. Använd en tom sida, stäng popup-fönstret för mallbiblioteket när det visas och börja bygga på den nyligen skapade sidan. Den anpassade knappen "Lägg i kundvagn", "Produktpris", "Produktbild" och "Produktnamn och beskrivning" är bara några av WooCommerce-widgetarna som du kan använda för att anpassa din produktsida. Du kan titta på alla de olika widgets som för närvarande är tillgängliga genom att besöka den här sidan. Om du föredrar kan du ordna widgetarna vart du vill på sidlayouten och anpassa deras stilar för att matcha ditt önskade utseende.

Du måste ändra din produktsida för att skilja din e-handelsbutik från konkurrenterna och ge dina kunder en unik upplevelse. Dessutom är alternativet att estetiskt anpassa din produktsida avgörande för att upprätthålla en konsekvent visuell design i hela din webbutik. Elementor är ett fantastiskt verktyg för att anpassa sidorna i din WooCommerce-butik, och det rekommenderas starkt. Förutom att vara enkel att använda, innehåller sidbyggaren alla nödvändiga widgets och stylingsalternativ för att hjälpa dig att skapa anpassade produktsidor. Vi hoppas att du tyckte att denna handledning var informativ och gav dig den information du behövde för att anpassa din WooCommerce-produkt och produktarkivsidor med Elementor. Har du använt Elementor för att skapa WooCommerce-sidor tidigare? Du är välkommen att dela dina tankar i kommentarfältet. Vi skulle gärna ta en titt.