Ve výpisu produktů zahrnuje odkaz na detail produktu obrázek, název produktu i cenu. Pokud potřebujete mezi cenu a název přidat jiné prvky, může to být problém.
Jak Woocommerce skládá jednotlivé prvky?
- První je hook woocommerce_before_shop_loop_item a ten obsahuje funkci s otevírací částí tagu A.
- Druhý je woocommerce_before_shop_loop_item_title, který obsahuje sale flash a obrázek produktu.
- Třetí je woocommerce_shop_loop_item_title – název produktu.
- Následuje woocommerce_after_shop_loop_item_title a v něm je hodnocení a cena produktu.
- Nakonec woocommerce_after_shop_loop_item, kde je konečně uzavírací část tagu A. Za ním je ještě tlačítko „Přidat do košíku“.
Všechno co se nachází mezi body 1 až 5, je uvnitř odkazu. Cílem úpravy je uzavřít do odkazu obrázek a sale flash a vytvořit odkaz z názvu produktu, tak aby bylo možné přidávat prvky nad a pod název produktu, bez toho, aby byli uvnitř odkazu.
Postup
Nejprve odebereme z loopu uzavírací tag odkazu:
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );Přesuneme jej za obrázek:
add_action( ‚woocommerce_before_shop_loop_item_title‘, ‚woocommerce_template_loop_product_link_close‘, 20 );
Nakonec upravíme název produktu, který je aktuálně vypisován jako H2 nadpis, což lze udělat dvěma způsoby.
1. využitím toho, že funkce woocommerce_template_loop_product_title je uzavřená ve podmínce a funkci function_exists. To nám umožňuje do functions.php vložit rovnou celou funkci a přepsat její kód:
function woocommerce_template_loop_product_title() {
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
}2. Nebo funkci deregistrovat a zaregistrovat si vlastní
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
add_action( 'woocommerce_shop_loop_item_title', 'musilda_template_loop_product_title', 10 );
function musilda_template_loop_product_title() {
echo '<h2 class="' . esc_attr( apply_filters( 'woocommerce_product_loop_title_classes', 'woocommerce-loop-product__title' ) ) . '"><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></h2>';
}A máme hotovo. Budu se těšit u dalšího návodu.
Další užitečné snippety najdete na stránce Užitečné snippety pro WooCommerce
