WooCommerce-productpagina-elementen herschikken zonder plugin

Controleer welk productsjabloon je gebruikt

De PHP-methode hieronder werkt met het klassieke WooCommerce-sjabloon voor afzonderlijke producten, ook in klassieke thema’s zoals HoverCraft. Gebruikt je productpagina een blokgebaseerd Single Product-sjabloon, verplaats de betreffende blokken dan via de site-editor. De WooCommerce-handleiding voor productpagina’s legt die aanpak uit.

In een klassiek sjabloon voert WooCommerce een actiehook met de naam woocommerce_single_product_summary uit. Functies die aan deze hook zijn gekoppeld, heten callbacks en krijgen een numerieke prioriteit. Lagere waarden worden doorgaans eerder uitgevoerd. Je kunt de volgorde daarom wijzigen door een callback met de oorspronkelijke prioriteit te verwijderen en op een andere prioriteit opnieuw toe te voegen. Zie de hookreferentie voor meer informatie.

Standaardvolgorde in de productsamenvatting

Element	Callback	Prioriteit
Producttitel	woocommerce_template_single_title	5
Beoordeling	woocommerce_template_single_rating	10
Prijs	woocommerce_template_single_price	10
Korte beschrijving	woocommerce_template_single_excerpt	20
Knop om toe te voegen aan de winkelwagen	woocommerce_template_single_add_to_cart	30
SKU en productgegevens	woocommerce_template_single_meta	40

Het klassieke productsjabloon van WooCommerce vermeldt deze standaardcallbacks. Beoordeling en prijs hebben allebei prioriteit 10; hun onderlinge volgorde hangt daarom ook af van de volgorde waarin de callbacks zijn geregistreerd. Thema’s en extensies kunnen deze posities wijzigen.

De prijs onder de korte beschrijving plaatsen

1. Maak een back-up van je site en test de wijziging eerst in een testomgeving voordat je PHP aanpast.
2. Open functions.php van je actieve childtheme. Een site-specifieke plugin is een optioneel alternatief als je de aangepaste PHP buiten het thema wilt houden; je hoeft geen extra plugin te installeren. Bewerk het hoofdthema niet, want updates kunnen de wijziging overschrijven. Voor HoverCraft kun je de documentatie over Childthemes volgen.
3. Voeg het fragment toe binnen de bestaande PHP-code, zonder een tweede <?php-tag. Vervang myshop door een prefix die uniek is voor je site.
4. Sla de wijziging op en controleer verschillende producten, waaronder een variabel product.

function myshop_move_product_price() {
	if ( ! function_exists( 'is_product' ) || ! is_product() ) {
		return;
	}

	remove_action(
		'woocommerce_single_product_summary',
		'woocommerce_template_single_price',
		10
	);
	add_action(
		'woocommerce_single_product_summary',
		'woocommerce_template_single_price',
		25
	);
}
add_action( 'wp', 'myshop_move_product_price' );

De WordPress-actie wp wordt uitgevoerd nadat de huidige aanvraag is voorbereid. Op dat moment kan is_product() bepalen of het om een afzonderlijke productpagina gaat. Het fragment verwijdert de prijscallback met prioriteit 10 en voegt die opnieuw toe met prioriteit 25: na de korte beschrijving (20), maar vóór de winkelwagenknop (30). De zichtbare positie verandert; de opgeslagen productprijs en de winkelwagenberekening niet.

Een ander element verplaatsen

Gebruik dezelfde combinatie van remove_action() en add_action(), met de exacte callbacknaam en oorspronkelijke prioriteit uit de tabel. Als je bijvoorbeeld de korte beschrijving naar prioriteit 35 verplaatst, komt die na de standaard winkelwagenknop en vóór de productgegevens te staan. Pas zowel de callbacknaam als de oorspronkelijke prioriteit aan, niet alleen de nieuwe prioriteit. Kies een afzonderlijke prioriteit als je een voorspelbare volgorde ten opzichte van andere elementen wilt.

Deze methode wijzigt alleen de volgorde van callbacks binnen de klassieke productsamenvatting. Je verplaatst er niet de productgalerij mee, verandert de onderliggende HTML-indeling niet en kunt niet garanderen dat aangepaste thema’s of extensies de standaardvolgorde gebruiken. Voor berichten onder de bestelknoppen biedt HoverCraft ook het widgetgebied After Add To Cart. Bekijk daarvoor eerst de documentatie over Widgetgebieden voordat je alleen voor zo’n bericht PHP toevoegt.

Als de elementen niet verplaatsen

• Geen verandering of een verkeerde positie: Controleer of het fragment wordt geladen, WooCommerce actief is en de pagina een klassiek sjabloon gebruikt. Wis eventuele paginacaches en controleer of een andere aanpassing dezelfde callback verplaatst.
• Het element verschijnt dubbel: Controleer of remove_action() de exacte callbacknaam en oorspronkelijke prioriteit gebruikt. Een thema of plugin kan nog een callback toevoegen die dezelfde inhoud toont.
• De pagina werkt niet meer na het opslaan: Herstel de vorige werkende PHP-code. Test wijzigingen eerst in een testomgeving, zodat een syntaxfout de live winkel niet onderbreekt.

Wil je de aanpassing ongedaan maken, verwijder dan het volledige toegevoegde fragment. De oorspronkelijke callbackregistratie van WooCommerce bepaalt daarna weer de prijspositie, tenzij een andere aanpassing die verandert.