Hooki na stronie koszyka w WooCommerce

Hooki w koszyku

Zastanawiacie się jak edytować stronę koszyka w WooCommerce ? Oczywiście po wyświetleniu wszystkich elementów na stronie możemy użyć magii CSS i chwytać kolejne elementy DOMu przez klasy oraz identyfikatory lecz często bywa to kłopotliwe, szczególnie dla osób, które są na bakier ze stylami 😋

Dodatkowym utrudnieniem może być to że coś chcemy przesunąć w górę, inny element zaś wyświetlić na dole, kolejny jeszcze gdzieś indziej. Z pomocą przychodzą hooki, czyli akcje i filtry, którymi możemy definiować położenie elementów „woocommercowych” tam gdzie chcemy.

Dzięki używaniu hooków, możemy przemieszczać i układać elementy strony tak jak chcemy, następnie wystarczy ostylować konkretne elementy.

Czemu używać hooków ?

Ponieważ jest to prawidłowe podejście w tworzeniu customowych motywów sklepów opartych o WordPress oraz WooCommerce. Możesz edytować poszczególne strony w katalogu woocommerce Twojego motywu ale co jeśli Twój sklep będzie wymagał krytycznej aktualizacji ? Zmiany przepadną a hooki są i będą.

Lista hooków dostępnych „w koszyku”

woocommerce_before_cart
woocommerce_before_cart_table
woocommerce_before_cart_contents
woocommerce_cart_contents
woocommerce_cart_coupon
woocommerce_cart_actions
woocommerce_after_cart_contents
woocommerce_after_cart_table
woocommerce_cart_collaterals
woocommerce_before_cart_totals
woocommerce_cart_totals_before_shipping
woocommerce_after_shipping_rate
woocommerce_before_shipping_calculator
woocommerce_after_shipping_calculator
woocommerce_cart_totals_after_shipping
woocommerce_cart_totals_before_order_total
woocommerce_cart_totals_after_order_total
woocommerce_proceed_to_checkout
woocommerce_after_cart_totals
woocommerce_after_cart
woocommerce_cart_is_empty

Jak ich używać ?

To całkiem proste. Najpierw musimy zlokalizować element i przepiąć go w inne miejsce. Dla przykładu przepnijmy produkty cross-sell (woocommerce_cross_sell_display) na sam dół strony koszyka.

Najpierw musimy usunąć „akcje” z hooka 'woocommerce_cart_collaterals

remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' ); 

Następnie musimy mieć świadomość gdzie chcemy aby produkty cross-sell się wyświetlały. W naszym przypadku będzie to 'woocommerce_after_cart’ a więc dodajemy akcje

add_action( 'woocommerce_after_cart', 'woocommerce_cross_sell_display' );

Dzięki temu przesuniemy wszystkie produkty cross-sell na dół koszyka.

Dzięki usuwaniu/dodawaniu poszczególnych hooków zmodyfikujemy wygląd naszego koszyka według własnego uznania.

Więcej wkrótce !

Komentarze