WooCommerce Hooks nasıl kullanılır – Örneklerle Kılavuz

WooCommerce kancalarını nasıl kullanacağınızı öğrenmek ister misiniz? Doğru yerdesin! Bu kılavuzda size eylem ve filtre kancalarının nasıl kullanılacağını göstereceğiz. Ayrıca WooCommerce mağazanıza uygulayabileceğiniz birçok örnek sunacağız!

WooCommerce'i web sitenize kurduğunuzda, özelleştirilmiş bir çözüm geliştirme olanaklarınızı genişleten uzun bir yeni kanca listesine erişebilirsiniz. WooCommerce kancaları, yerel WordPress kancalarıyla aynı şekilde çalışır ve herhangi bir WooCommerce sayfasında özel komut dosyaları yürütmenize izin verir.

WordPress kancalarına benzer şekilde, iki tür WooCommerce kancası vardır: eylem veya filtre. Eylem kancası, bir komut dosyası eklemenize izin verirken, filtre kancaları orijinal verileri alır ve bir tür değişiklikle geri döndürür.

WooCommerce kancalarının sözdizimi

WooCommerce kancaları, WordPress kancalarıyla aynı sözdizimini izler.

Eylem kancası

add_action('name_of_the_action_hook','your_action_hook_funcion');

Filtre kancası

add_filter('name_of_the_filter_hook','your_filter_hook_funcion');

Kancayı bildirdikten sonra, komut dosyalarınızı işleve eklemeniz gerekir:

 function your_action_hook_funcion(){
# kodunuz burada
}

Filtre kancaları, işlevin bir parametresindeki bazı verileri döndürmelidir:

 function filtreniz_hook_function($veri){
# $data'yı değiştiren kodunuz
$veri döndür;
}

Bir WooCommerce kancasını çalışırken görmek için, Alt Temanızın functions.php dosyasına aşağıdaki kodu yapıştırın:

 add_action( 'woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
function quadlayers_woocommerce_hooks() {
echo '<img src="https://kokohai.com/wp-content/uploads/2020/02/logo-kokohai-tienda-de-merchandising-de-anime-y-maga-e1584570981420.png">'; // İstenen resim url'sine geç
}

Bu, tüm ürün sayfalarına bir resim eklediğiniz en temel örnektir. Görsel, ürünün meta verilerinden önce Sepete ekle düğmesinin altında görüntülenecektir.

Gördüğünüz gibi, kancanın adı woocommerce_product_meta_start kendiliğinden açıklayıcıdır ve bu kancanın kodunuzu tam olarak nereye eklemenize izin verdiğini size söyler.

WooCommerce kancalarının listesi

Binden fazla WooCommerce kancası var. Burada, en yaygın ve iyi bilinen kancalara aşina olmanız için en popüler olanları listeleyeceğiz.

Listeyi ilgili oldukları sayfaya göre bölümlere ayırdık. Kancaların adı kendiliğinden açıklayıcıdır, bu nedenle ne yaptıklarını anlamakta zorluk çekmezsiniz.

• Araba

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents
  • woocommerce_cart_is_empty
  • woocommerce_cart_totals_before_shipping
  • woocommerce_cart_totals_after_shipping
  • woocommerce_cart_totals_before_order_total
  • woocommerce_cart_totals_after_order_total
  • woocommerce_after_shipping_rate
  • woocommerce_before_shipping_calculator
  • woocommerce_proceed_to_checkout
  • woocommerce_after_cart_totals
  • woocommerce_after_cart

• Ödeme

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_before_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_order_review
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_review_order_before_cart_contents
  • woocommerce_review_order_after_cart_contents
  • woocommerce_review_order_before_shipping
  • woocommerce_review_order_after_shipping
  • woocommerce_review_order_after_order_total
  • woocommerce_checkout_order_review
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form
  • woocommerce_thankyou
• Ödeme kancaları hakkında daha fazla bilgi için WooCommerce Ödeme Kancaları hakkındaki tam kılavuzumuza göz atabilirsiniz.

• Ürün:% s

  • woocommerce_before_main_content
  • woocommerce_after_main_content
  • woocommerce_before_single_product_summary
  • woocommerce_after_single_product_summary
  • woocommerce_before_single_product
  • woocommerce_after_single_product
  • woocommerce_single_product_summary
  • woocommerce_product_meta_start
  • woocommerce_product_meta_end
  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

• taksonomiler

  • woocommerce_archive_description
  • woocommerce_shop_loop
  • woocommerce_before_shop_loop
  • woocommerce_after_shop_loop
  • woocommerce_after_shop_loop_item
  • woocommerce_after_shop_loop_item_title
  • woocommerce_shop_loop_item_title

• Hesap

  • woocommerce_before_account_navigation
  • woocommerce_after_account_navigation
  • woocommerce_before_edit_account_address_form
  • woocommerce_account_content
  • woocommerce_before_my_account
  • woocommerce_after_my_account

• Mini Araba

  • woocommerce_before_mini_cart
  • woocommerce_before_mini_cart_contents
  • woocommerce_mini_cart_contents
  • woocommerce_widget_shopping_cart_before_buttons
  • woocommerce_widget_shopping_cart_buttons
  • woocommerce_after_mini_cart

• E-posta

  • woocommerce_email_after_order_table
  • woocommerce_email_before_order_table
  • woocommerce_email_customer_details
  • woocommerce_email_footer
  • woocommerce_email_header
  • woocommerce_email_order_details

• küresel

  • pre_get_product_search_form
  • woocommerce_breadcrumb
  • woocommerce_no_products_found

WooCommerce kancalarının tam listesini bulmak için resmi WC belgelerine göz atabilirsiniz.

Yararlı WooCommerce Hooks örnekleri

Şimdi, WooCommerce kancalarıyla yapabileceğiniz bazı faydalı şeylere örneklere bakalım.

NOT : Başlamadan önce bir alt tema oluşturmanızı öneririz. Bunlara aşina değilseniz, bir alt temanın nasıl oluşturulacağına ve en iyi alt tema eklentilerinin listesine ilişkin kılavuzumuza göz atabilirsiniz.

Kancalarla yeni başlıyorsanız, bu komut dosyalarını kopyalayıp alt temanızın functions.php dosyasına yapıştırabilirsiniz. Daha sonra kendinizi daha rahat hissettikçe scriptleri düzenleyebilir ve farklı bir mantık oluşturabilirsiniz.

Mağaza Sayfasına bir açıklama ekleyin

Varsayılan olarak, Mağaza Sayfası açıklamayı göstermez. Ancak, woocommerce_archive_description kancasını aşağıdaki gibi kullanarak etkinleştirebilirsiniz:

 function quadlayers_shop_description() {
$description = '<p>Dükkanıma hoş geldiniz, lütfen cömert olun ve birçok şey satın alın, teşekkürler.</p>';
yankı $açıklama;
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

Sepete Ekle butonundan sonra bilgi notu ekleyin

WooCommerce sepet kancaları, alışveriş sepeti sayfasının birçok bölümüne özel komut dosyaları eklemenize olanak tanır. Burada, Sepete ekle düğmesinden sonra nasıl metin ekleyeceğinizi göstereceğiz.

Bu komut dosyası, Sepete Ekle düğmesinden sonra özel bir metin yazdıracaktır.

 add_action('woocommerce_after_add_to_cart_form', 'quadlayers_after_addtocart_button');
function quadlayers_after_addtocart_button() {
	// NOT: 'müzik' için kategori bilgilerinizi değiştirin && geçerli bir url için /delivery-costs/ ile değiştirin
	if ( is_product() && has_term( array( 'music' ), 'product_cat' ) ) {
		echo '<div></div><div>;<a href="/delivery-costs/" target="_blank" rel="noopener"><i class="fa-truck" aria-hidden=" true"></i> 100 $ harcayın ve ücretsiz teslimat kazanın;</a></div>
'; } }

Bunu, örneğin minimum harcama veya ücretsiz teslimat gerektiren indirimleri tanıtmak için kullanabilirsiniz.

Kod açıklaması

• woocommerce_after_add_to_cart_form kancası, düğmeden sonra HTML kodunu yazdırır.
• Mevcut sayfanın bir ürün sayfası olup olmadığını ve belirttiğimiz kategoriye sahip olup olmadığını kontrol ediyoruz.
• Bir dizi içinde kategori bilgisi kullanın. Bu şekilde, birkaç kategoriyi kontrol edebilirsiniz.
• Yankılanan içerik, HTML etiketlerine, değişkenlere ve PHP kapsamındaki diğer her şeye izin verir.

Belirli bir ürün sınıflandırmasına metin ekleyin

Şimdi, belirli bir etikete sahip ürünlerde bir mesaj görüntülemek için WooCommerce kancalarının nasıl kullanılacağını görelim. Örneğin, belirli ürünler için indirim sunan bir mesaj göstereceğiz.

Önce ürünü etiketlemeyi unutmayın.

 add_action('woocommerce_before_single_product', 'my_product_notice_function');
function_product_notice_function() { 
if ( is_product() && has_term( 'indirim-25','product_tag' ) ) {
echo '<p><strong>Bu ürün önümüzdeki 48 saat boyunca %25 indirimli!</strong></p>';
}
}

Kod açıklaması

1. 1. Ürün sayfasının üst kısmında bir mesaj görüntülemek için woocommerce_before_single_product kancasını kullanıyoruz.
   2. Fonksiyonun içinde, bunun bir ürün sayfası olduğundan emin olmak için is_product() üzerinde bir koşullu kullanırız.
   3. Ve has_term() , mevcut ürünün "indirim-25" etiketine sahip olup olmadığını kontrol eder.
   4. Ardından, mesajınızı if ifadesine yazdırın.

Oturumu kapatılmış kullanıcılardan satın alma işlemini engelle

WooCommerce kancaları, çıkış yapmış kullanıcılar için ürün sayfalarında Sepete ekle düğmesini devre dışı bırakmanıza olanak tanır. Bu, yalnızca abonelere veya üyelere sunulan ürünler veya teklifler için yararlı olabilir. Örneği tamamlamak için, satın alma düğmesi devre dışı bırakıldığında bir mesaj görüntülemek için ikinci bir kanca ekleyeceğiz.

woocommerce_is_purchasable filtre kancası satın almayı engeller ve woocommerce_before_single_product eylem kancası mesajı görüntüler.

 add_action( 'woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
function quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ): true döndür;
başka: false döndür;
endif;
}

function quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>BU ÜRÜNÜ SATIN ALMAK İÇİN LÜTFEN GİRİŞ YAPIN</h2>';
endif;
}

Kod açıklaması

1. Bir mesaj yazdırmak için eylem kancasını ve Sepete ekle düğmesini devre dışı bırakmak için filtre kancasını kullanırız.
2. woocommerce_is_purchasable filtre kancası, kullanıcı oturum açmışsa doğru, oturumu kapatmışsa yanlış olacaktır.
3. Her iki işlevde de koşulları yalnızca oturumu kapatan kullanıcılara uygulamak için koşullu if() ifadesi de kullanırız (Sepete ekle düğmesi devre dışı ve mesaj).
4. Son olarak, mesaja bir H2 HTML etiketi içine alınmış bazı CSS stilleri ekledik.

WooCommerce Hooks'tan en iyi şekilde nasıl yararlanılır?

Sonuç olarak, WooCommerce kancaları sitenizi özelleştirmek için harika araçlardır. Kullanılacak yüzlerce kanca var ve hepsi aynı sözdizimini takip ediyor. Bu nedenle, örneklere göz atmanızı ve ihtiyaç duyduğunuz kancaları sitenize uygulamak için biraz ilham almanızı öneririz.

Kancalar, mağazanızın herhangi bir alanını iyileştirmenize olanak tanır: ödeme sayfasından alışveriş sepetine, ürün sayfalarına, sınıflandırmalara ve çok daha fazlasına! Bu yüzden, bunlardan en iyi şekilde yararlanmak istiyorsanız, devam edin, biraz oynayın ve bunun nasıl gittiğini bize bildirin. Ödeme kancaları hakkında daha ayrıntılı bilgi istiyorsanız, ödeme kancaları kılavuzumuza göz atabilirsiniz.

Son olarak, herhangi bir sorunuz olursa bizimle iletişime geçmekten çekinmeyin. Size yardımcı olmak için elimizden geleni yapacağız!