Bouw en ontwerp een geweldige WooCommerce-productpagina met Elementor

U moet uw productpagina aanpassen om uw e-commerce winkel te onderscheiden van de concurrentie en uw klanten een unieke ervaring te bieden. Bovendien is de optie om uw productpagina esthetisch te personaliseren van cruciaal belang om een ​​consistent visueel ontwerp in uw hele online winkel te behouden.

Elementor is een van de toonaangevende WordPress-websitebouwers op de markt, maar wist je ook dat je hiermee WooCommerce-winkels kunt bouwen?

Veel ingebouwde Elementor WooCommerce-modules stellen u in staat om WooCommerce-inhoud of functionaliteitsblokken in te voegen of deze te stylen met behulp van de Elementor-builder. Best geweldig, toch?

Het stylen en aanpassen van WooCommerce had vroeger PHP en CSS nodig voor elke kleine verandering, maar naarmate tools zoals Elementor verbeteren en complexer worden, komen er steeds meer opties beschikbaar om controle te krijgen over de manier waarop je winkel eruitziet en werkt.

Laten we beginnen.

• Een Elementor-sjabloon maken
• Productafbeelding of galerij van Building Elementor
• WooCommerce producttitel, prijs en toevoegen aan winkelwagen
• Elementor-producttabbladen instellen
• Korte beschrijving van het Elementor-product:
• Upsells van Elementor- en WooCommerce-producten
• Conclusie - Elementor productpaginabuilder

Een Elementor-sjabloon maken

De eerste stap in de procedure is het bouwen van een nieuwe Elementor-sjabloon door naar Sjablonen in het WordPress-dashboard te navigeren. Klik op 'Nieuw bouwen' en kies vervolgens Eén product als de sjabloon die u wilt maken.

Omdat we deze sjabloon helemaal opnieuw ontwikkelen, is het niet nodig om blokken te plaatsen; verlaat het volgende vak totdat u het gebruikelijke Elementor-builderscherm voor een nieuwe pagina bereikt.

Productafbeelding of galerij van Building Elementor

Elk WooCommerce-product heeft een productafbeelding of afbeeldingengalerij met de foto's van het product aan klanten. Elementor biedt een ingebouwde module Productafbeeldingen waarmee we deze in onze sjabloon kunnen invoegen.

Maak een eenvoudige rij met 2 kolommen en voer de module Productafbeeldingen in de linkerkolom in; dit ziet er praktisch uit en doet zijn werk, maar laten we de verkoopbadge aanpassen aan het Elementor Hello-thema dat voor dit artikel wordt gebruikt. Om dit te doen, moeten we een kleine regel aangepaste CSS toepassen, die kan worden geïntroduceerd door naar Geavanceerd> Aangepaste CSS te gaan en de onderstaande code te plakken.

selector .onsale { \sachtergrondkleur: #cc3366; \s}

WooCommerce producttitel , prijs en toevoegen aan winkelwagen

We zullen de Elementor-modules voor Producttitel, Productprijs en Toevoegen aan winkelwagen toevoegen in de rechterkolom.

Zoek naar deze drie modules in de Elementor-constructor en sleep ze vervolgens naar de andere kant om ze in de hierboven vermelde volgorde te rangschikken; dit is volledig functioneel, maar we willen het aanpassen aan de stijl, zoals het bovenstaande gedeelte Hello Elementor-thema. Het stylen van modules met Elementor is eenvoudig, u hoeft alleen maar op de module te klikken en de editor zou de stylingopties aan de linkerkant moeten openen.

De inhoud van deze modules is uitstekend. We gaan dus werken onder het tabblad Stijl. Laten we eerst het lettertype en de kleur van de producttitel bijwerken zodat ze overeenkomen met die in het Hello Elementor-thema.

We moeten dan hetzelfde doen voor de modules Productprijs en Toevoegen aan winkelmandje door op elke module te klikken en de tekstkleur aan te passen. Voor de productprijs ga ik een donkergrijs gebruiken om te contrasteren met de kop, dus typ deze hexadecimale code als je meegaat - #54595f

Vervolgens zullen we in de module Toevoegen aan winkelwagentje een aantal dingen bijwerken. De achtergrondkleur van de knop en de randradius van de knop met de onderstaande instellingen:

• Stel de inhoud in op 'Toevoegen aan winkelwagen'.
• Zet de achtergrondkleur op '#cc3366'
• Stel de grensradius in op 0

Ik heb de randradius van de hoeveelheidkiezer gewijzigd in 0, wat je kunt doen op het tabblad Stijl voor Hoeveelheid.

Elementor-producttabbladen instellen

Elk product moet wat basisinformatie weergeven, zoals een productbeschrijving en recensies, indien beschikbaar; dit wordt gewoonlijk afgehandeld via producttabbladen.

Maak een nieuwe rij onder het bovenste gedeelte en sleep de module Productgegevenstabbladen van de Elementor-builder naar de rij om deze in te voegen. Er is hier niet veel styling vereist omdat het enkele stijlen van het Hello Elementor-thema erft. Laten we echter de stijl van de knop voor het indienen van een recensie wijzigen.

Om dit te doen, hebben we weer een beetje aangepaste CSS nodig. Begin met het bewerken van de tabbladen met productgegevens, klik vervolgens op het tabblad Geavanceerd en scrol omlaag naar Aangepaste CSS. Voer de onderstaande CSS in en u kunt de kleuren aanpassen aan uw ontwerp.

.woocommerce #reviewformulier #reply .form-submit input { background-color: #cc3366; kleur: #fff; grensradius: 0px; }

Korte beschrijving van het Elementor-product

Oké, dus we hebben tot nu toe een fatsoenlijk, eenvoudig ogend ontwerp, maar het ziet er een beetje mager uit. Het toevoegen van een module met korte productbeschrijvingen aan het bovenste gedeelte kan dit helpen opvullen en meer context toevoegen.

Zoek naar de WooCommerce Short Description-module en sleep deze vervolgens onder de productprijs en boven de module Toevoegen aan winkelwagentje.

Er is hier nog geen styling vereist omdat het de stijlen van Hello Elementor heeft geërfd.

Elementor en WooCommerce product upsells p

Het verhogen van uw gemiddelde winkelmandwaarde is cruciaal voor elke WooCommerce-site. Daarom is het fijn dat Elementor een Product Upsells-module bevat waarmee u eenvoudig maatwerk in uw winkel kunt integreren.

Zoek naar de product Upsells-module in de Elementor-builder en plaats deze in een nieuwe rij achter de tabbladen met productgegevens.

Zoals je kunt zien, vereist dit een kleine aanpassing om de rest van onze stijl aan te vullen. Begin met het wijzigen van de module en breng de volgende wijzigingen aan:

• Stel de titelkleur in op - #cc3366
• Stel de kopkleur in op - #cc3366
• Stel de prijskleur in op - #54595f
• Stel de achtergrondkleur van de knop in op - #cc3366
• Stel de knopkleur in op – #fff
• Stel de knoprandradius t0 – 0 . in

Het eindproduct ziet er uit zoals hierboven. U kunt de hexadecimale kleurcode naar eigen inzicht aanpassen als u deze handleiding als startpunt voor uw sjabloon gebruikt.

Als u klaar bent, publiceert u uw sjabloon. In het volgende venster ziet u de vraag "Waar wilt u uw sjabloon weergeven?". Klik op "Voorwaarde toevoegen" om te bepalen wanneer deze sjabloon moet worden gebruikt. U kunt "Alle producten" selecteren om de sjabloon op al uw productpagina's te gebruiken. U kunt er ook voor kiezen om deze sjabloon alleen te gebruiken voor producten die in een specifieke categorie vallen of waaraan een bepaalde tag is gekoppeld.

Conclusie – Elementor - productpaginabuilder

Sommige gebruikers kunnen problemen ondervinden bij het weergeven van hun aangepaste ontwerpinstellingen, zoals de kleur van het lettertype en de typografie, wanneer ze Elementor gebruiken. Het uiterlijk van uw WooCommerce-winkel kan worden beïnvloed als u een WordPress-thema gebruikt dat het uiterlijk van uw winkel kan bepalen. Als u dit probleem tegenkomt, houd er dan rekening mee dat uw artikel in sommige gevallen uw aangepaste pagina-instellingen kan overschrijven.

U kunt ook een blanco pagina kiezen en er een vanaf het begin maken met behulp van de productwidgets voor een volledig aangepast uiterlijk. Gebruik een lege pagina, sluit het pop-upvenster van de sjabloonbibliotheek wanneer het verschijnt en begin met bouwen op de nieuw gemaakte pagina. De aangepaste knop "Toevoegen aan winkelwagen", "Productprijs", "Productafbeelding" en "Producttitel en -beschrijving" zijn slechts enkele van de WooCommerce-widgets die u kunt gebruiken om uw productpagina aan te passen. U kunt alle verschillende widgets bekijken die momenteel beschikbaar zijn door deze pagina te bezoeken. Als u wilt, kunt u de widgets op de paginalay-out plaatsen waar u maar wilt en hun stijlen aanpassen aan uw gewenste uiterlijk.

U moet uw productpagina aanpassen om uw e-commerce winkel te onderscheiden van de concurrentie en uw klanten een unieke ervaring te bieden. Bovendien is de optie om uw productpagina esthetisch te personaliseren van cruciaal belang om een consistent visueel ontwerp in uw hele online winkel te behouden. Elementor is een fantastische tool voor het aanpassen van de pagina's van je WooCommerce-winkel, en het wordt ten zeerste aanbevolen. De paginabuilder is niet alleen eenvoudig te gebruiken, maar bevat ook alle benodigde widgets en stijlopties om u te helpen bij het maken van aangepaste productpagina's. We hopen dat je deze tutorial informatief vond en je de informatie hebt gegeven die je nodig hebt om je WooCommerce-product en productarchiefpagina's aan te passen met Elementor. Heb je Elementor in het verleden gebruikt om WooCommerce-pagina's te maken? U bent van harte welkom om uw mening te delen in het opmerkingengedeelte. We komen graag een kijkje nemen.