Jak omezit odkaz pouze na obrázek v loopu produktu

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?

  1. První je hook woocommerce_before_shop_loop_item a ten obsahuje funkci s otevírací částí tagu A.
  2. Druhý je woocommerce_before_shop_loop_item_title, který obsahuje sale flash a obrázek produktu.
  3. Třetí je woocommerce_shop_loop_item_title – název produktu.
  4. Následuje woocommerce_after_shop_loop_item_title a v něm je hodnocení a cena produktu.
  5. 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

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *