ForumSever WordPress
Pages: 1
WooCommerce Stokta Olmayan Ürün Görseline Tükendi Yazmak - Out Of Stock Products By: Kerem Date: 06 Aralık 2023, 21:30:09
WordPress WooCommerce tabanlı alışveriş sitelerinde ürünlerin stoklarının tükendiğini göstermenin birkaç yolu var, fakat aşağıda paylaştığım görselde ki gibi ürün görseli üstünde tükendi yazısının anlatımını bulamadığım için basit bir çözüm ile yapabildim. Buradan paylaşayım ki kullanmak isteyenlerin işine yarasın. 

Ekran Alıntısı tükendi 3.PNG

En solda bulunan görselin üzerinde ki TÜKENDİ yazısını nasıl yaptığımıza gelelim. Öncelikli olarak wordpress panel >> eklentiler >> yeni eklenti ekle sayfasına geliyoruz ve Sold Out Badge for WooCommerce isimli eklentimizi bularak kuruyor ve etkinleştiriyoruz. 

Ekran Alıntısı tükendi.PNG
Bu eklentinin kendine ait bir ayar (settings) sayfası var ama o sayfadan ilk görseldeki görüntüyü yakalayamıyoruz bu nedenle konun en altında vereceğim css kodlarını bu modun kurulumunu tamamladıktan ve ayar sayfasında görsel üzerinde yazmasını istediğimiz kelimeyi yazarak kaydettikten sonra temanızın ek css sayfasının en altına ekliyor ve kaydediyoruz. 

Ekran Alıntısı tükendi2.PNG

 
Css sayfasına eklnecek kodlar: 

.wcsob_soldout {
position: absolute;
  line-height: 40px;
  background: rgba(255,255,255,.8);
  left: 0;
  right: 0;
  max-width: 200px;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  border-radius: 0;
  text-transform: uppercase;
  margin: 0 auto;
  padding-top: 3px;
}

.single-product .wcsob_soldout {
  display: none;
}


Bu kodlar, temanızda ki görsellerin boyutuna ve yerleşimine göre yer değiştirebilir. Biraz düzenleme ile istediğinizi elde edebilirsiniz.
WooCommerce Stokta Olmayan Ürün Görseline Tükendi Yazmak - Out Of Stock Products By: Kerem Date: 06 Aralık 2023, 22:04:03
Burda da mobil cihazlarda ki görünümü 👍

Screenshot_2023-12-06-22-03-24-799_com.android.chrome-edit.jpg