Hoe u WooCommerce-productkenmerken kunt maken die meer voor de hand liggen

De productkenmerken van WooCommerce zijn een heel nuttige functie, maar standaard zijn ze behoorlijk wat verborgen op de pagina, in de Extra informatie sectie. Afhankelijk van uw thema zijn ze mogelijk niet zichtbaar totdat de gebruiker op een tabblad klikt, wat betekent dat veel gebruikers er mogelijk niet naar kijken. 

Soms is het handiger om ze samen met productcategorieën in het bovenste gedeelte van de pagina met één product op te nemen. In deze zelfstudie laat ik u zien hoe u productattributen verplaatst van de Extra informatie tab naar het bovenste gedeelte van de pagina.

Wat je nodig hebt

Om mee te gaan, heb je nodig:

• Een ontwikkelingsinstallatie van WordPress.
• Een code-editor.
• WooCommerce geïnstalleerd en geactiveerd.
• Producten toegevoegd - Ik heb de dummy-productgegevens geïmporteerd die bij WooCommerce worden geleverd; Raadpleeg deze handleiding voor meer informatie over hoe u dit kunt doen.
• Een of meer productattributen toegevoegd (het ingebouwde kleurkenmerk met de dummygegevens werkt niet op de standaardmanier).
• Een WooCommerce-compatibel thema geactiveerd - Ik gebruik Storefront.

Als u de kenmerken dichter bij de bovenkant van de pagina met één product wilt toevoegen, doen we het volgende:

1. Maak een lege plug-in en activeer deze.
2. Kijk naar de WooCommerce-broncode om het filter te identificeren dat de productkenmerken controleert die worden toegevoegd aan de tabbladen naar de onderkant van de pagina.
3. Voeg een functie toe die aan dat filter is gekoppeld om het tabblad voor kenmerken te verwijderen.
4. Kijk opnieuw naar de bronbestanden om de haak te identificeren die inhoud boven aan de pagina ophaalt.
5. Haak daarvoor een functie.

Laten we beginnen met een blik op de manier waarop onze productkenmerken standaard worden weergegeven. Ik heb een kenmerk gemaakt met de naam Grootte en ik heb er drie waarden aan toegevoegd: klein, middelgroot en groot. Hier wordt het weergegeven in de Extra informatie sectie onderaan een productpagina:

We willen die productkenmerken van de onderkant van het scherm verplaatsen naar de linkerbovenhoek, onder de productbeschrijving.

De plug-in maken

Maak een nieuw bestand in de map wp-content / plugins. Ik bel de mijne woocommerce-prominent-product-attributes.php. Open dat bestand en voeg het volgende toe:

Sla uw bestand op en ga naar plugins scherm in uw WordPress-dashboard. Activeer de plugin.
Broncode WooCommerce: weergave van productkenmerk
Laten we beginnen met het identificeren van de functie en haak die worden gebruikt om productkenmerken uit te voeren. Dit omvat het reizen door enkele van de plug-inbestanden:
 
De sjabloon die de afzonderlijke productpagina uitvoert, is woocommerce / templates / single-product.php.
 
Binnen dat bestand is er een get_template_part () bel naar de gehalte-single-product.php het dossier.
 
In dat bestand is er een actie genoemd woocommerce_after_single_product_summary. Drie functies zijn eraan verslaafd: degene waar we naar moeten kijken is woocommerce_output_product_data_tabs ().
 
Je kunt de woocommerce_output_product_data_tabs () functie in woocommerce / includes / wc-template-functions.php.
 
De functie gebruikt wc_get_template () om een ​​ander sjabloononderdeel op te halen, in dit geval wooocommerce / templates / single-product / tabs / tabs.php.
 
In dat bestand (we komen er, ik beloof het!) Is er een variabele genaamd $ tabs, die is gedefinieerd als apply_filters ('woocommerce_product_tabs', array ());.
 
Dus om het tabblad met productkenmerken te verwijderen, moeten we een functie maken die dat tabblad verwijdert en aan het tabblad koppelen woocommerce_product_tabs filter. 
 
Phew! We zijn er uiteindelijk.
Productkenmerken verwijderen van de tabbladen met behulp van een filter
Gelukkig biedt de WooCommerce-documentatie richtlijnen voor het verwijderen van tabbladen met dit filter, wat ons werk een beetje makkelijker maakt.
Voeg deze code toe aan uw plugin-bestand:
/ ** * Verwijdert het tabblad "Aanvullende informatie" met de productkenmerken. * * @param array $ tabs WooCommerce tabs om weer te geven. * * @return-array WooCommerce-tabbladen om weer te geven, minus "Aanvullende informatie". * / function tutsplus_remove_product_attributes_tab ($ tabs) unset ($ tabs ['additional_information']); return $ tabs;  add_filter ('woocommerce_product_tabs', 'tutsplus_remove_product_attributes_tab', 100);
Deze functie heeft $ tabs als het object, want dat is de variabele waarmee we werken. Het verwijdert de 'Extra informatie' tab uit de reeks waarden opgeslagen door de $ tabs variabel. Merk op dat ik een hoge prioriteit heb gebruikt van 100 bij het koppelen van mijn functie om ervoor te zorgen dat deze vuurt na de functies die de tabbladen in de eerste plaats toevoegen.
Sla uw bestand op en ververs uw productpagina:
Dus dat is het tabblad verwijderd. Nu moeten we de productkenmerken terug aan de bovenkant van de pagina toevoegen.
De plaats in de code vinden om attributen toe te voegen
We moeten opnieuw bepalen waar we in de code een functie moeten toevoegen om productkenmerken weer te geven. Met andere woorden, we moeten een actiehaak vinden.
Teruggaan naar de gehalte-single-product.php bestand, er is een haak genoemd woocommerce_single_product_summary die wordt gebruikt door zeven functies die elk een ander stukje gegevens over het product uitvoeren, namelijk:
 
de titel
 
de beoordeling
 
de prijs
 
het fragment (d.w.z. de korte beschrijving)
 
de knop Toevoegen aan winkelwagentje
 
metadata
 
links delen
 
Ik wil mijn attributen toevoegen in het gedeelte voor metadata, dus laten we eens kijken naar de functie die dat weergeeft.
De functie bevindt zich in de wc_template_functions.php bestand, en het gebruikt wc_get_template () om een ​​ander include-bestand te bellen, woocommerce / templates / single / product / meta.php.
In de meta.php bestand, er is code om metadata over het product uit te voeren, met de woocommerce_product_meta_start haak er voor en de woocommerce_product_meta_end haak er achteraan. Dus we kunnen een van die twee haken gebruiken om onze productkenmerken uit te voeren. Laten we de laatste gebruiken, want dan verschijnen de kenmerken na de categorieën en tags.
Een functie schrijven om productattributen uit te voeren
De code dupliceren die al is geleverd door WooCommerce
Om een ​​lijst met taxonomietermen voor ons product uit te voeren, kunnen we de functie gebruiken die door WooCommerce wordt geboden list_attributes (). Je zult deze functie vinden in de templates / single / product / tabs / extra-information.php het dossier.
Voeg dit toe aan uw plugin-bestand:
/ ** * Geeft productkenmerken weer in de rechterbovenhoek van de pagina met één product. * * @param $ product * / functie tutsplus_list_attributes ($ product) global $ product; $ Product-> get_attributes ();  add_action ('woocommerce_product_meta_end', 'tutsplus_list_attributes');
Merk op dat u geen prioriteit hoeft te gebruiken, want WooCommerce heeft geen andere functies die aan die actiehaak zijn gekoppeld.
Vernieuw nu uw productpagina:
Nu worden de attributen weergegeven. Ze gebruiken een tabbladachtige interface met het Storefront-thema, want dat is wat is ingesteld voor de standaard Extra informatie tabblad en de HTML-uitvoer gebruikt een tabel met de standaardlay-out. 
Alternatieve aanpak zonder een tafel
Die tabel is niet ideaal: het is beter om een ​​lijst met productkenmerken te hebben, zodat deze overeenkomt met de lijst met productcategorieën erboven. Laten we dat doen.
WooCommerce slaat attributen op als aangepaste taxonomieën. De slug die u maakt voor elk van uw attribuutwaarden wordt voorafgegaan door een vader_ suffix wanneer het attribuut in de database is opgeslagen. 
Het slaat deze taxonomieën echter niet op in de wp_term_taxonomy tafel en wp_terms tabel zoals u zou doen bij het registreren van een normale aangepaste taxonomie in WordPress. In plaats daarvan maakt WooCommerce tabellen voor de kenmerken, wat betekent dat de gegevens anders worden opgeslagen. Dit betekent dat we een meer omslachtige benadering moeten volgen om toegang te krijgen tot het label voor elke taxonomie bij het uitvoeren van die lijst.
In uw tutsplus_list_attributes () functie, verwijder de twee regels in de functie. Vervang ze door deze code:
wereldwijd $ product; wereldwijde $ post; $ attributes = $ product-> get_attributes (); if (! $ attributes) return;  foreach ($ attributen als $ attribuut) // Ontvang de taxonomie. $ terms = wp_get_post_terms ($ product-> id, $ attribute ['name'], 'all'); $ taxonomy = $ terms [0] -> taxonomie; // Download het taxonomie-object. $ taxonomy_object = get_taxonomy ($ taxonomy); // Haal het kenmerklabel op. $ attribute_label = $ taxonomy_object-> labels-> naam; // Geef het label weer gevolgd door een aanklikbare lijst met termen. echo get_the_term_list ($ post-> ID, $ attribute ['name'], '
'. $ attribute_label. ':', ',', '
'); 
Dit is wat die code doet:
 
Het definieert de globale $ product variabele (wat een object is van onze functie).
 
Het gebruikt $ Product-> get_attributes () om alle kenmerken voor dit product op te halen.
 
Als er geen zijn, doet het niets.
 
Als er kenmerken zijn, wordt er een geopend foreach loop voor elk van hen.
 
Om het label op te halen, gebruikt het de wp_get_post_terms () en get_taxonomy () functies voor het ophalen van de reeks gegevens met betrekking tot deze taxonomie voor dit bericht.
 
Het echoot dan de naam (of label) van de taxonomie (of attribuut), gevolgd door een lijst met koppelingen naar de archieven voor elk van de gebruikte waarden get_the_term_list ().
 
De attributen worden nu in een lijst weergegeven:
Veel beter!
Dank: dank aan Isabel Castillo voor de code om het kenmerklabel weer te geven. 
Samenvatting
Verplaatsen van productkenmerken op de productpagina vergt een beetje werk in de broncode van WooCommerce en identificeert de sjabloonbestanden, hooks en functies die een rol spelen bij het weergeven van productkenmerken.
Door het filter te vinden dat bepaalt welke tabbladen worden uitgevoerd, konden we het verwijderen Extra informatie tab, die attributen uit de onderkant van het scherm verwijderde. Door vervolgens een nieuwe functie toe te voegen aan een haak hoger op de pagina, konden we ze naar eigen inzicht exporteren.
Als u geïnteresseerd bent in het integreren van andere WooCommerce-functionaliteit op uw site, kijk dan ook naar wat er beschikbaar is op de marktplaats.



		
			
	   
	




Code