“ Ürünleri ara… ” WooCommerce formu, tema ayarlarınıza ve widget kurulumunuza bağlı olarak genellikle web sitesi başlığında ve/veya Mağaza sayfası kenar çubuğunda görünür.
Genellikle, görünür bir arama düğmesi olmayan, büyüteç simgesi olan (temanız CSS aracılığıyla özelleştirmediği sürece) bir giriş formu içerir ve giriş yapıldığında kullanıcıları arama sonucu sayfasına yönlendirir.
Örnek olay: Çoğu WooCommerce Ajax Arama eklentisi, WooCommerce ürün arama formu girişini hedefler, böylece yazmaya başladığınızda ” anında arama sonuçları ” penceresi açılır. Ancak, belirli alt sitelerde/dillerde bu davranışı devre dışı bırakmam gerekiyordu ve buradaki tek geçici çözüm, arama formuna bir sınıf eklemekti , böylece onu Ajax eklenti seçici hariç tutmalarımda hedefleyebilirim.
Yukarıdaki senaryo çok düşük bir ihtimal olsa bile, meydan okuma hâlâ geçerli. Peki, ” Ürünleri ara… ” WooCommerce formunun HTML’sini (yani CSS’yi değil, gerçek HTML çıktısını) nasıl özelleştirebiliriz ? Hadi gidelim!
Varsayılan WooCommerce Ürün Arama formu HTML’si aşağıdaki gibidir ( woocommerce/templates/product-searchform.php şablonuna göre ):
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="woocommerce-product-search-field-<?php echo isset( $index ) ? absint( $index ) : 0; ?>"><?php esc_html_e( 'Search for:', 'woocommerce' ); ?></label>
<input type="search" id="woocommerce-product-search-field-<?php echo isset( $index ) ? absint( $index ) : 0; ?>" class="search-field" placeholder="<?php echo esc_attr__( 'Search products…', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
<button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" class="<?php echo esc_attr( wc_wp_theme_get_element_class_name( 'button' ) ); ?>"><?php echo esc_html_x( 'Search', 'submit button', 'woocommerce' ); ?></button>
<input type="hidden" name="post_type" value="product" />
</form>
PHP Snippet'i: WooCommerce Ürün Arama Formu HTML'sini Düzenle
Not: Yukarıdaki HTML çıktısına dayalı olarak, “get_product_search_form” adı verilen ve HTML’nin tamamını veya bir kısmını geçersiz kılmamıza olanak tanıyan bir filtre mevcuttur.
Aşağıdaki örnekte, bazı HTML’leri str_replace() PHP işleviyle “değiştirerek” yeni bir sınıf ekliyorum . Elbette form HTML’sini sıfırdan yeniden oluşturabilir ve bunun yerine filtre aracılığıyla geri döndürebilirsiniz!
add_filter( 'get_product_search_form' , 'fks_custom_product_searchform' );
function fks_custom_product_searchform( $html ) {
return str_replace( 'class="search-field', 'class="additional-class search-field', $html );
}
Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook’ta da bulabilirsiniz.
