HUSKY - WooCommerce Ürünleri Filtre Uzmanı


Demo sitesinde uygulanan stiller ve kodlar

Demo sitesini daha çekici hale getirmek ve farklı özellikler göstermek için aşağıdaki kod uygulanır:

  1. Eklenti ayarlarında -> Gelişmiş sekmesi -> "Özel CSS kodu"
    .woof_price3_search_container{ genişlik: %100 !önemli; ikisini de temizle; } button.woof_submit_search_form, button.woof_reset_search_form{ arka plan: #6BBE92 !important; genişlik: 100 piksel; sınır: 0; dolgu: 10 piksel 0; kenar boşluğu: 5 piksel 0; metin hizalama: merkez; renk: #fff !önemli; yazı tipi ağırlığı: kalın !önemli; geçiş: tüm .4'ler; yazı tipi boyutu: 1.1em; } button.woof_submit_search_form:hover, button.woof_reset_search_form:hover{ renk: #fff !important; arka plan: #6ddE92 !önemli; } .woof_container h4{ kenar boşluğu: 11px !important; yazı tipi boyutu: 1.32em !önemli; arka plan: #f2f3f5; dolgu: 11 piksel 7 piksel; renk: #333; satır yüksekliği: 1.12em !önemli; metin hizalama: merkez; sınır yarıçapı: 3 piksel; } .woof_color_term{ border-radius: 80px !important; } .woof_color_term:hover{ border-color: #444; kenarlık stili: çift; } .woof_sid_auto_shortcode .woof_submit_search_form_container { kenar boşluğu: -5px 0 15px 10px; justify-content: boşluk-arasında; } body.page-id-1003 .woof_sid_auto_shortcode .woof_container { genişlik: %25; } @media (maksimum genişlik: 1400 piksel){ body.page-id-1003 .woof_sid_auto_shortcode .woof_container { genişlik: %33; } } @media (maksimum genişlik: 1200 piksel){ body.page-id-1003 .woof_sid_auto_shortcode .woof_container { genişlik: %50; } } @media (maksimum genişlik: 768 piksel){ body.page-id-1003 .woof_sid_auto_shortcode .woof_container { genişlik: %100; } } .woof_list{ yazı tipi boyutu: 14 piksel; } .woof_list.woof_list_image{ ekran: esnek; esnek sarma: sarma; } .woof_image_term{ genişlik: 138 piksel; yükseklik: 110 piksel; kenar boşluğu: 0 3px 3px 0; arka plan boyutu: %100 %100; arka plan klibi: içerik kutusu; kenarlık: 1 piksel düz #e2e6e7; dolgu: 2 piksel; renk: #292f38; yazı tipi boyutu: 0; metin hizalama: merkez; imleç: işaretçi; sınır yarıçapı: 0; geçiş: kenarlık rengi .35s kolaylığı; } .woof_childs_list_opener yayılma alanı{ filtre: drop-shadow( 1px 1px 3px rgba(110, 210, 210, .7)); }
    
  2. Renk paleti için yuvarlatılmış karelerin kodu buradan alınmıştır: https://products-filter.com/possible-color-selector-show-circular-shaped-colors-instead-square/
  3. Geçerli wp temasının functions.php dosyasına bir sonraki PHP kodunu ekledi:
    1. https://products-filter.com/hook/woof_get_more_less_button_xxxx/ - resimler için örnek
    2. https://products-filter.com/hook/woof_print_content_before_search_form/

 


Sorunlar mı? Destek İsteyin!