• avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar

WooCommerce Stokta Olmayan Ürün Görseline Tükendi Yazmak - Out Of Stock Products

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ı...

Başlatan: Kerem - Güncelleme: 06 Aralık 2023, 21:30:09 - Gösterim: 479

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

Aşağı git Sayfa1
06 Aralık 2023, 21:30:09
WooCommerce Stokta Olmayan Ürün Görseline Tükendi Yazmak - Out Of Stock Products


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.
  (1.47 MB, 1525x536 - Gösterim: %1$d 103 .)
  (24.49 KB , 834x386 - Gösterim: %1$d 106 .)
  (53.7 KB , 1595x926 - Gösterim: %1$d 100 .)
Kerem imza


Deli tarafıma denk gelmeyin, zira orada ben bile hükümsüzüm...
06 Aralık 2023, 22:04:03 #1
Burda da mobil cihazlarda ki görünümü 👍

Screenshot_2023-12-06-22-03-24-799_com.android.chrome-edit.jpg
  (997.03 KB , 1080x2004 - Gösterim: %1$d 92 .)
Kerem imza


Deli tarafıma denk gelmeyin, zira orada ben bile hükümsüzüm...
Yukarı git Sayfa1

Benzer Konular (5)

Clicky