WooCommerce componenten uitlijnen

Hoe kan ik ervoor zorgen dat mijn verschillende ‘WooCommerce componenten’ op dezelfde lijnhoogte staan? Mijn website: cookiefarm.be

Op deze screenshot (http://prntscr.com/htbhko) zie je dat de producten die ‘in promo staan’ ervoor zorgen dat de prijs een regel lager wordt gezet. Ik zou graag willen dat bij elk artikel de prijs op dezelfde hoogte staat.

Hetzelfde probleem voor producten die een rating hebben meegekregen: http://prntscr.com/htbi4u en http://prntscr.com/htbikv. Zij zorgen er bovendien ook nog eens voor dat buttons ‘in winkelmand’ en ‘opties selecteren’ niet meer op dezelfde lijnhoogte staan.

Zet het ‘aanbieding’ blokje onder de prijs.

Of zet een aantal <br> voor de prijs :idea:

Het probleem is dat het hier gaan om de Storefront template. En als ik mij niet vergis, komt die rating <div> pas tevoorschijn als er effectief een rating aan het desbetreffende product is gegeven. Ik kan dus wel een css declaratie ingeven voor die rating <div>, maar dan heeft ie geen effect op alle artikelen waar er geen rating aan gegeven is.

Woocommerce maakt gebruik van hooks
Voordeel is dat je de templates zelf niet hoeft aan te passen, en dat je wijzigingen behouden blijven bij een update.

Je moet even uitvogelen welke template je precies moet hebben.

Ik neem aan deze:
https://github.com/woocommerce/woocommerce/blob/master/templates/content-product.php

Je ziet dat de rating gehooked is aan de “woocommerce_after_shop_loop_item_title” hook.(regel 55-60)

Dus als je hem weg wilt halen kan dat zo:

remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

Als je wilt kan je de volgorde veranderen door je item eerst weg te halen, dan een andere prioriteit toe te kennen en weer terug te zetten met “add_action” als volgt:


remove_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );

add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 12 );

Hij staat nu na de prijs want die heeft een prioriteit “10”.

Je kan hem ook op een heel andere plek zetten door hem aan een andere hook te hangen.

Hier een mooi visueel overzicht: https://businessbloomer.com/woocommerce-tips/visual-hook-series/

Thanks EagerB0bNerd, hier kan ik mee aan de slag. Fingers crossed… :wink: