• Genel

  CSS ile E-Ticaret sitesinde özel ürün arama bar tasarlama

  Bu yazı Silinmiş Kullanıcı tarafından oluşturuldu 16/01/2022 at 21:33

  Merhaba, bugünkü konu CSS ile var olan arama hem eklenti hemde eklentisiz örnekler paylaşacağım,

  1- ilki https://tr.wordpress.org/plugins/yith-woocommerce-ajax-search/ eklentisi ile hazırlanmış Ajax içeren bir ürün arama formudur,

  CSS kodu:

  Sabit Header (Üst Kısım)

  input#yith-s {
      border-radius: 50px 0px 0px 50px;
  	padding: 9px
  
  } 
  input#yith-s {
      border-color: #5b2365;
  } 

  Sticky Header (Yapışkan Üst kısım)

  input#yith-searchsubmit {
   	 border-radius: 0px 50px 50px 0px;
  	padding: 11px 25px
  }
  input#yith-searchsubmit {
   	 margin: -4px
  }

  2. WordPress kendi sunduğu ürün arama formu için paylaşıyorum, eklentisiz olarak css uygulaması yaptım.

  Sabit Header (Üst kısım)

  input#woocommerce-product-search-field-0
  {
      border-color: grey;
  		border-radius: 0px;
  		border-top: 0px	;
  		border-left: 0px ;
  		border-right: 0px;
  	padding: 9px
  }
  

  Stciky Header (Yapışkan Üst Kısım)

  input#woocommerce-product-search-field-1
  {
      border-color: grey;
  		border-radius: 0px;
  		border-top: 0px	;
  		border-left: 0px ;
  		border-right: 0px;
  	padding: 9px
  }
  

  Not: 2 Örnek çalışmada Astra teması ile uygulanmıştır.

  Fikret Tozak cevapladı 3 yıllar, 3 ay önce 2 Üye · 1 Reply
• 1 Reply

• 

  Fikret Tozak

  Eğitmen

  17/01/2022 at 15:22

  Teşekürler Barış. 👏🏼

Giriş Yap ve Yanıtla