Bygg och designa en fantastisk WooCommerce-produktsida med Elementor

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

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

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

Styling och anpassning av WooCommerce brukade kräva 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
• Bygga Elementor produktbild eller galleri
• WooCommerce produkttitel, pris och lägg till i kundvagnen
• Konfigurera Elementor produktflikar
• Elementor produkt kort beskrivning
• Merförsäljning av Elementor- och WooCommerce-produkter
• Slutsats – Elementor produktsidabyggare

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 nytt" och välj sedan Enstaka produkt som mallen du vill skapa.

När vi utvecklar den här mallen från grunden behöver vi inte sätta några block; avsluta nästa ruta tills du kommer till den vanliga Elementor-byggarskärmen för en ny sida.

Bygga Elementor produktbild eller galleri

Varje WooCommerce-produkt har en produktbild eller bildgalleri som visar upp produktens fotografier för kunder. Elementor tillhandahåller en inbyggd produktbildsmodul som låter oss infoga denna i vår mall.

Skapa en enkel rad med två kolumner och ange modulen Produktbilder i den vänstra kolumnen; det här ser praktiskt ut och utför jobbet, men låt oss anpassa försäljningsmärket så att det matchar Elementor Hello-tema 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.

selector .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce produkttitel, pris och lägg till i kundvagnen

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

Sök efter dessa tre moduler i Elementor-konstruktorn, dra och släpp dem sedan för att ordna dem i sekvensen ovan; detta är fullt funktionellt, men vi vill anpassa det för att matcha stilen som ovanstående avsnitt Hello Elementor-tema. Att styla moduler med Elementor är enkelt, allt du behöver göra är att klicka på modulen, och redigeraren bör öppna stylingalternativen till vänster.

Innehållet i dessa moduler är utmärkt. Därför kommer vi att arbeta under stilfliken. Låt oss först uppdatera typsnittet och färgen på produkttiteln för att matcha de som används i Hello Elementor-temat.

Vi måste sedan göra samma sak för modulerna Produktpris och Lägg i varukorg genom att klicka på varje modul och ändra textfärgen. För produktpriset kommer jag att använda en mörkgrå för att kontrastera mot rubriken, så skriv in den här hexadecimalkoden om du följer med – #54595f

Därefter kommer vi att uppdatera några saker i modulen Lägg till i kundvagn. Knappens bakgrundsfärg och knappens ramradie med inställningarna nedan:

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

Jag ändrade gränsradien för mängdväljaren till 0, vilket du kan göra på fliken Stil för Kvantitet.

Konfigurera Elementor produktflikar

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

Skapa en ny rad under den övre delen och dra modulen Produktdataflikar från Elementor-byggaren till raden för att infoga den. Det krävs inte mycket styling här eftersom det ärver några stilar från Hello Elementor-temat. Men låt oss ändra stilen på knappen för granskning.

För att göra detta kommer vi att behöva lite anpassad CSS igen. Börja redigera produktdataflikarna och klicka sedan på fliken Avancerat och scrolla ned till Anpassad CSS. Mata in CSS nedan, så kan du justera färgerna efter din design.

.woocommerce #granskningsformulär #svara .form-submit input { background-color: #cc3366; färg: #fff; border-radie: 0px; }

Elementor produkt kort beskrivning

Ok, så vi har en anständig, enkel design än så länge, men den ser lite sparsam ut. Att lägga till en kort produktbeskrivningsmodul till den övre delen kan hjälpa till att fylla ut detta och lägga till mer sammanhang.

Vänligen sök efter WooCommerce Short Description-modulen och dra och släpp den under produktpriset och ovanför Lägg i kundvagn-modulen.

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

Merförsäljning av Elementor- och WooCommerce-produkter

Att öka ditt genomsnittliga korgvärde är avgörande för varje WooCommerce-sajt, och det är därför det är trevligt att Elementor inkluderar en produktförsäljningsmodul så att du enkelt kan integrera anpassning i din butik.

Vänligen sök efter produktförsäljningsmodulen i Elementor-byggaren och infoga den i en ny rad bakom produktdataflikarna.

Som du kan se kräver detta lite anpassning 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 knappens färg till – #fff
• Ställ in knappens ramradie t0 – 0

Den färdiga produkten kommer att se ut som ovan. Du kan justera färgens hexadecimalkod som du vill om du använder den här guiden som en startpunkt 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 bestämma när denna mall 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 endast använda den här mallen för produkter som faller inom en specifik kategori eller har en särskild tagg kopplad till dem.

Slutsats – Elementor p roduct sidbyggare

Vissa användare kan ha svårt att få sina anpassade designinställningar, så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å det här problemet, kom ihåg att din artikel kan åsidosätta dina anpassade sidinställningar i vissa fall.

Du kan också välja en tom sida och skapa en från grunden med hjälp av produktwidgetarna 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 vidare på den nyskapade sidan. Den anpassade knappen "Lägg till i kundvagn", "Produktpris", "Produktbild" och "Produkttitel och beskrivning" är bara några av WooCommerce-widgetarna du kan använda för att anpassa din produktsida. Du kan titta på alla de olika widgets som är tillgängliga för närvarande genom att besöka den här sidan. Om du föredrar det kan du ordna widgetarna var du vill på sidlayouten och anpassa deras stilar för att matcha ditt önskade utseende.

Du måste modifiera din produktsida för att skilja din e-handelsbutik från konkurrenterna och ge dina kunder en unik upplevelse. Dessutom är möjligheten att estetiskt anpassa din produktsida avgörande för att upprätthålla en konsekvent visuell design i hela din onlinebutik. 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 stilalternativ 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 hjälp av Elementor. Har du använt Elementor för att skapa WooCommerce-sidor tidigare? Du är välkommen att dela dina tankar i kommentarsfältet. Vi tar gärna en titt.