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.
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.
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}
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 stylingen som ovanstående avsnitt Hello Elementor-tema. Det är enkelt att styla moduler med Elementor, 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:
Jag ändrade gränsradien för mängdväljaren till 0, vilket du kan göra på fliken Stil för Kvantitet.
Varje produkt måste visa en del grundläggande information som en produktbeskrivning och recensioner om tillgängliga; 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; }
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.
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:
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.
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.
En webbplats sidhuvuden och sidfötter är viktiga element. I de flesta fall ger rubriken navigering...
Två av de mest populära WordPress-temanen på marknaden är Astra och OceanWP. Professionell…
Att skapa en utmärkt nyhetswebbplats kräver inte att du blir webbdesigner. Vi…
The Newspaper-temat är ett av de viktigaste WordPress-teman som designats av tagDiv, en...
När det gäller att skapa en onlinebutik är WooCommerce det bästa plugin . Den…
En rubrik är i allmänhet det första en person ser när de besöker din webbplats,...
Visa kommentarer
Om du är personlig, kommer jag att vara en associerad prodotto del negozio?
Hej, Detta ställs in när du sparar första gången din siddesign eller använder den lilla pilen ovanför Spara-knappen i Elementor