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 mogelijkheid om uw productpagina esthetisch te personaliseren van cruciaal belang voor het behouden van een consistent visueel ontwerp in uw online winkel.

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

Met veel ingebouwde Elementor WooCommerce-modules kunt u WooCommerce-inhoud of functionaliteitsblokken invoegen of deze opmaken met de Elementor-builder. Best geweldig, toch?

Voor het stylen en aanpassen van WooCommerce waren voor elke kleine verandering PHP en CSS nodig, maar naarmate tools als Elementor verbeteren en complexer worden, komen er steeds meer opties beschikbaar om controle te krijgen over de manier waarop uw winkel eruit ziet en werkt.

Laten we beginnen.

• Een Elementor-sjabloon maken
• Building Elementor-productafbeelding of galerij
• WooCommerce producttitel, prijs en toevoegen aan winkelwagen
• Elementor-producttabbladen instellen
• Korte productbeschrijving van Elementor
• Elementor- en WooCommerce-product-upsells
• 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-bouwerscherm bereikt voor een nieuwe pagina.

Building Elementor-productafbeelding of galerij

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

Maak een eenvoudige rij van 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 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 aangegeven volgorde te rangschikken; dit is volledig functioneel, maar we willen het aanpassen aan de stijl, zoals het Hello Elementor-thema hierboven. 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 deze overeenkomen met die van het Hello Elementor-thema.

Vervolgens moeten we hetzelfde doen voor de modules Productprijs en Toevoegen aan winkelwagen door op elke module te klikken en de tekstkleur aan te passen. Voor de productprijs ga ik donkergrijs gebruiken als contrast met de kop, dus typ deze hexadecimale code als je het volgt – #54595f

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

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

Ik heb de randradius van de bedragkiezer gewijzigd in 0, wat u kunt doen op het tabblad Stijl voor Aantal.

Elementor-producttabbladen instellen

Elk product moet een aantal basisinformatie weergeven, zoals een productbeschrijving en recensies, indien beschikbaar; Dit wordt meestal afgehandeld via producttabbladen.

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

Om dit te doen, hebben we weer een klein beetje aangepaste CSS nodig. Begin met het bewerken van de tabbladen 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 {achtergrondkleur: #cc3366; kleur: #fff; grensradius: 0px; }

Korte productbeschrijving van Elementor

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

Zoek naar de WooCommerce korte beschrijvingsmodule en sleep deze vervolgens onder de productprijs en boven de module Toevoegen aan winkelwagen.

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

Elementor- en WooCommerce-product- upsells

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

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

Zoals je kunt zien, vereist dit een beetje aanpassing om de rest van onze stijl aan te vullen. Begin met het aanpassen 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 in op 0 – 0

Het eindproduct ziet er uit zoals hierboven. U kunt de hexadecimale kleurcode naar eigen inzicht aanpassen als u deze handleiding als uitgangspunt 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 dit 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 lettertypekleur en typografie, bij het gebruik van Elementor. 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, moet u er rekening mee houden dat uw artikel in sommige gevallen uw aangepaste pagina-instellingen kan overschrijven.

U kunt ook een blanco pagina kiezen en er één vanaf het begin maken met behulp van de productwidgets voor een volledig op maat gemaakt uiterlijk. Gebruik een lege pagina, sluit het pop-upvenster van de sjabloonbibliotheek wanneer dit 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 waar u maar wilt op de pagina-indeling rangschikken 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 mogelijkheid om uw productpagina esthetisch te personaliseren van cruciaal belang voor het behouden van een consistent visueel ontwerp in uw online winkel. Elementor is een fantastisch hulpmiddel voor het aanpassen van de pagina's van uw 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. Heeft u Elementor in het verleden gebruikt om WooCommerce-pagina's te maken? U bent van harte welkom om uw mening te delen in het opmerkingengedeelte. Wij komen graag een kijkje nemen.