Een inleiding tot Theming WooCommerce voor WordPress

WooCommerce is een populair eCommerce-platform voor WordPress dat snel wordt ontwikkeld door WooThemes. In dit artikel ga ik je door de basisprincipes van theming voor WooCommerce leiden.

Dit artikel maakt een paar veronderstellingen over uw ontwikkelomgeving:

Je hebt WordPress en WooCommerce geïnstalleerd.
Je bent bekend met het maken van WordPress-thema's en het gebruik van HTML en CSS.
U hebt de Chrome-ontwikkelaarstools of soortgelijke webontwikkelingstools zoals Firebug gebruikt.

De WooCommerce CSS aanpassen

Out-of-the-box, WooCommerce wordt geleverd met een aantal ingebouwde CSS die ervoor zorgen dat het compatibel is met zoveel mogelijk thema's. De standaard CSS is een goed startpunt, maar het is onwaarschijnlijk dat deze meteen na de installatie perfect overeenkomt met de stijl van uw thema.

Als zodanig zijn er twee manieren om de CSS voor een WooCommerce-thema te bewerken:

U kunt de standaardstijlen gebruiken als basis en deze overschrijven.
U kunt ervoor kiezen om de standaardstijlen uit te schakelen en helemaal opnieuw te beginnen.

WooCommerce voegt een body-class van "woocommerce" toe aan alle pagina's

Standaardstijlen overschrijven

Het negeren van de standaardstijlen is de snelste manier om aan de slag te gaan en zal waarschijnlijk voor de meeste mensen geschikt zijn.

U kunt het volledige standaard WooCommerce CSS-bestand kopiëren (gelokaliseerd in wp-content \ plugins \ woocommerce \ activa \ css \ woocommerce.css of woocommerce.less), verwijder alles dat u niet nodig hebt en verander alles dat u nodig hebt; dit kan echter tijdrovend zijn en kan resulteren in veel herhaalde CSS.

Daartoe gebruik ik normaal gesproken de volgende aanpak:

Ik navigeer door de site om de stijlen te vinden die ik moet veranderen.
Daarna gebruik ik de Chrome-ontwikkelaarstools (of een vergelijkbare tool) om de klassen te identificeren en zelfs de wijzigingen in de browser aan te brengen om ervoor te zorgen dat ik begrijp hoe het eruit zal zien. Dit gebeurt meestal door met de rechtermuisknop op de pagina te klikken en 'element inspecteren' in de vervolgkeuzelijst te kiezen.
Vervolgens kopieer ik de CSS van Chrome Developer Tools naar het CSS-bestand van mijn thema.
Ik beoordeel de CSS in de Chrome-ontwikkelaarstools, omdat deze mogelijk doorsnedestijlen van leveranciers voor andere browsers kan doorbreken of grijs kan maken. Het is belangrijk om deze waarden te wijzigen om uw CSS consistent te houden in de verschillende browsers die uw bezoekers mogelijk gebruiken.
Ten slotte verwijder ik alle waarden die ik niet heb gewijzigd in de gekopieerde CSS. Als ik bijvoorbeeld de breedte van iets heb gewijzigd, maar ik heb de hoogte niet gemaakt, dan hoef ik de hoogte niet op te nemen in mijn aangepaste CSS-bestand.

Persoonlijk vind ik dat deze aanpak in de meeste gevallen het beste werkt en de ontwikkelingstijd echt verkort.

In Google Chrome kunt u met de rechtermuisknop klikken op een element in het venster Ontwikkelaarstools om de verschillende toestanden in te schakelen (zweven, actief, etc.). Hiermee kunt u alle statussen bekijken zonder het originele CSS-bestand te doorzoeken.

Standaard stylesheet uitschakelen en starten met krassen

De standaard stylesheet kan worden uitgeschakeld door een klein codefragment aan uw thema's toe te voegen functions.php:

define ('WOOCOMMERCE_USE_CSS', false);

De snelste manier om alle WooCommerce-klassen te krijgen, is door het originele WooCommerce CSS-bestand naar je eigen exemplaar te kopiëren en alles te verwijderen wat je niet nodig hebt.

Declareren van WooCommerce-ondersteuning in uw thema

Dit is vooral belangrijk als u thema's verkoopt of deze openbaar maakt.

Zonder specifiek WooCommerce-ondersteuning toe te kennen binnen uw thema, krijgen gebruikers een foutmelding bij de installatie van WooCommerce en blijven ze daar totdat het wordt verwijderd.

Gelukkig kan dit allemaal worden opgelost met een klein codefragment dat is ingevoegd in uw thema's functions.php het dossier:

add_theme_support ('woocommerce');

Duiken in een beetje dieper: sjablonen bewerken

Het bewerken van de CSS binnen WooCommerce zal je behoorlijk ver brengen, maar hoe zit het als je de lay-out van pagina's echt wilt aanpassen? Gelukkig is er een leuke manier om dit te doen.

De WooCommerce-plug-in wordt geleverd met een aantal front-end HTML-sjablonen en e-mailsjablonen. In plaats van deze bestanden rechtstreeks in de plug-in te bewerken (wat een heel slecht idee is, omdat de plug-in en al uw wijzigingen eenmaal verloren zijn gegaan!), Kunt u ze kopiëren naar uw thema:

Maak in je themadirectory een nieuwe map met de naam "woocommerce."
Navigeer naar de WooCommerce-invoegmap en open de map "sjablonen". De map Sjablonen heeft veel submappen met alle verschillende sjablonen die WooCommerce gebruikt. Gelukkig is de structuur van het sjabloonbestand en de naamgeving in WooCommerce gemakkelijk te volgen.
Kopieer het sjabloonbestand dat u wilt bewerken in uw nieuw aangemaakte map "woocommerce". Vergeet niet om de directorystructuur hier hetzelfde te houden. Als de sjabloon die u wilt bewerken zich in een submap bevindt, vergeet dan niet om die submap aan te maken in de map van uw thema.
Bewerk het bestand vanuit uw "woocommerce" -map en sla de wijzigingen op.

Een praktisch voorbeeld

Laten we zeggen dat we een deel van de HTML in het scherm "Mijn bestellingen" van WooCommerce willen wijzigen.

Het eerste wat we moeten doen is de juiste sjabloon vinden. In dit geval staat het gedeelte 'Mijn bestellingen' onder 'Mijn account' in WooCommerce. De mappenstructuur ziet er als volgt uit:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Maak vervolgens een map binnen je thema met de naam "woocommerce" en maak binnen die map een tweede map met de naam "mijn account". Daarna kopieer je de map mijn-orders.php bestand in die map.

Je zou het volgende moeten hebben:

/wp-content/themes/yourtheme/woocommerce/myaccount/my-orders.php

Alle wijzigingen die in dit bestand zijn aangebracht, hebben nu voorrang boven het origineel.

De WooCommerce-lus

Als u eerder WordPress-thema's heeft gemaakt of bewerkt, moet u bekend zijn met The Loop. WooCommerce heeft zijn eigen lus die u kunt gebruiken en waarmee u WooCommerce-pagina's kunt aanpassen. U wilt dit bijvoorbeeld doen wanneer u een andere zijbalk wilt laden voor uw WooCommerce-pagina's.

Dit is de meest elementaire integratie en door het maken van een aangepaste WooCommerce-sjabloon wordt dit toegepast op elke WooCommerce-pagina, inclusief producten, categorieën en archieven. Als u niet wilt dat uw WooCommerce-sjabloon er anders uitziet dan uw standaardsjabloon, hoeft u geen aangepaste WooCommerce-sjabloon te maken.

Het maken van de sjabloon is een eenvoudig proces:

Dupliceer je thema's page.php bestand en hernoem het woocommerce.php.
Zoek de WordPress-lus in uw woocommerce.php het dossier. Het ziet er ongeveer zo uit:

Vervang je lus door de WooCommerce-lus:
Breng nu nog andere wijzigingen aan die u wilt maken, zoals wisselen in een andere zijbalk of het wijzigen van de lay-out.

Laten we het omwikkelen

U kent nu de basisprincipes voor het integreren van het WooCommerce eCommerce-platform in uw WordPress-thema's.

De vaardigheden die in dit artikel worden behandeld, hebben betrekking op de meeste situaties in WooCommerce. Als je een meer geavanceerde of flexibele thema-integratie nodig hebt, dan is de volgende stap om de verschillende haken, filters en voorwaardelijke uitspraken die beschikbaar zijn voor gebruik met WooCommerce te verkennen..

Handige links: WooCommerce-plugins van CodeCanyon.

Code