Ücretsiz bir eklentiyle WooCommerce ürünleri için renk örnekleri

Yayınlanan: 2021-05-28

WooCommerce ürünleri için renk kartelalarını ve daha fazla ürün seçeneğini etkinleştirmek satışlarınızı artırabilir. En popüler çözüm, varyasyonları olan bir WooCommerce ürünüdür. Bugün size basit ve değişken ürünler için renk örnekleri ile ürün renklerini nasıl değiştireceğinizi ve ücretsiz bir WooCommerce eklentisi kullanarak özel alanlar nasıl ekleyeceğinizi göstereceğim!

Hiçbir ürün seçeneği sunmamak, müşterilerinizi satın alma konusunda caydırabilir . Öte yandan, bildiğiniz gibi, değişken ürünler her zaman en iyi seçim değildir .

Size WooCommerce ürünlerini renk örnekleri, daha fazla ürün seçeneği ve özel alanlarla nasıl zenginleştireceğinizi göstereyim. Önemli olan, WooCommerce için ücretsiz bir ürün oluşturucu eklentisi kullanacağım. Hadi başlayalım!

İçindekiler

  • WooCommerce'de Değişken Ürünler
  • Ücretsiz bir eklenti ile WooCommerce renk örnekleri!
  • WooCommerce renk örnekleri - adım adım kılavuz
  • Özel alanlar hakkında özet ve daha fazlası

WooCommerce'de Değişken Ürünler

Varsayılan olarak, basit ve değişken ürünler dahil olmak üzere birkaç WooCommerce ürün türü kullanabilirsiniz.

WooCommerce basit ürününün kurulumu kolaydır ancak renk seçenekleri eklemek isterseniz yeterli gelmeyebilir. Renk örnekleri eklemeniz gerektiğinde, WooCommerce değişken ürünleri daha iyi bir seçim olabilir.

Değişken ürünler: varyasyonlar

Müşterileriniz WooCommerce ürününü 3 seçenekle görecek.

Ürün sayfasındaki varyantlar

Varyasyonlarla bir WooCommerce ürününün nasıl ekleneceği hakkında daha fazla bilgi edinin.

Renk örneklerini daha çekici bir şekilde eklemek isteyebileceğinizi düşünüyorum!

Ücretsiz bir eklenti ile WooCommerce renk örnekleri!

Kolayca istediğiniz kadar renk örneği ekleyebilirsiniz.

Esnek Ürün Alanları - CSS değişikliklerinden sonraki alan
Esnek Ürün Alanları ile eklenen WooCommerce ürün varyasyon örnekleri

Müşterinin seçtiği seçili seçeneği görselleştirmek, metnin kendisinden daha iyi bir etki verecektir. Ürünün rengi söz konusu olduğunda bu kural daha da önemlidir. WooCommerce ürünleri için renk örnekleri eklemek, yanlış renk seçiminden kaynaklanan memnuniyetsizliği en aza indirecek ve web sitesinin daha güzel görünmesini sağlayacaktır.

Renkli Radyo alanı, WooCommerce ürünlerinize renk örnekleri eklemenizi sağlar.

Esnek Ürün Alanlarının ÜCRETSİZ sürümünü indirin ve renkli alanlara sahip yeni bir Radyo ekleyin.

WooCommerce için Esnek Ürün Alanları

Renklerle Radyo alanları ekleyerek WooCommerce renklerini değiştirin. WooCommerce renk örnekleri, Esnek Ürün Alanları ile basitleştirilmiştir.

İndirin veya WordPress.org'a gidin
10.000+ Aktif Kurulum
Son Güncelleme: 2023-03-13
WooCommerce 7.1 - 7.5.x ile çalışır

Ayrıca, bu eklentinin ücretsiz sürümde neler yapabileceğini gösteren videoyu izleyin:

WooCommerce renk örnekleri - adım adım kılavuz

Böyle bir alanı eklemek oldukça basittir ve CSS sayesinde örneğin şeklini veya boyutunu değiştirmek gibi ayarlamak mümkün olacaktır. Aşağıdaki adımları takip et:

İlk olarak, WordPress kontrol paneli → Ürünler → Ürün Alanları'na gidin.

Renk örnekleri ekleyin
WordPress Menüsündeki Esnek Ürün Alanları

Ardından, yeni bir Grup ekleyin veya mevcut bir Grubu seçin. Grup yeniyse - ona bir ad verin (örn. "Renk seçenekleri") ve onu ürünlere/kategorilere veya etiketlere ekleyin.

renkli radyo
Yeni bir alan grubu oluştur

Ardından, yeni bir alan ekleyin. Seçenek Alanları kategorisine gidin ve seçenekler listesinden Renkli Radyo'yu seçin.

WooCommerce ürün sayfasına renk örneği ekleme
Görüntülü Radyoyu seçin

Son olarak, aynı zamanda alan adınız olacak alan etiketini girin. "Ürün rengi" diyelim.

Renk örneği alanı için etiket
Yeni alanınıza bir etiket verin

Ürün alanları özelleştirme

Şimdi ek eklenti seçeneklerini görelim:

    1. Ayrıca, bu noktada göreceğiniz alanların her biri hakkında daha fazla bilgiye ihtiyacınız varsa Belgelerimizi okuyun:

      WooCommerce ürün varyasyonu renk örnekleri
      Renk Örnekleri: farklı alan türleri
    2. Alanları, WooCommerce ürün sayfanızda görüntülemek istediğiniz bilgilerle doldurun.

      Renk alanı türüne sahip bir Radyo ekleyerek WooCommerce renklerini değiştirin
      Renk Örnekleri yapılandırması
    3. Gelişmiş sekmesine gidin. Burada Tek öğe genişliğini px cinsinden değiştirebilirsiniz:

      WooCommerce ürün varyasyonu renk örnekleri - Gelişmiş sekmesi
      Renk alan tipine sahip radyo WooCommerce ürün sayfası
    4. Gerekirse fiyatlandırmayı (sabit veya yüzde) ayarlayabilir veya başka bir seçenek (örn. koşullu mantık ) kullanabilirsiniz. Örneğin, alan stilini özelleştirmek için "özel renk örnekleri" gibi bir CSS sınıfı ekleyelim.

      Renk örnekleri için fiyatlandırma
      Renk Örnekleri için fiyatlandırma belirleme. Her seçenek için sabit veya yüzde fiyat türü arasından seçim yapabilirsiniz.

WooCommerce renk örneklerini CSS ile özelleştirme

Zorunlu değildir ancak renk alanını özelleştirmek için sayfaya CSS kodunu yapıştırmak mümkündür. Ancak, elbette, 4. adımda atanan CSS sınıfını kullanabilirsiniz, örneğin, özel renk örnekleri .

Resmin altındaki yazıyı gizleme

/* WooCommerce ürünleri için renk örnekleri - resmin altında başlık yok */
div.fpf-radyo görüntüleri s. özel renk örnekleri girişi + etiket aralığı {
görüntü yok;
}

Görüntü boyutunu 50 piksele ve çerçeve boyutunu 10 piksele değiştirme

/* WooCommerce ürünleri için renk örnekleri - 50 piksel resim ve 10 piksel kenarlık */
div.fpf-radyo görüntüleri s. özel renk örnekleri girişi + etiketi {
genişlik: calc( 50px + 2* 10px );
}
div.fpf-radyo görüntüleri s. özel renk örnekleri girişi+etiket img {
genişlik: calc( 50px + 2* 10px );
yükseklik: calc( 50px + 2* 10px );
kenarlık: 10 piksel katı şeffaf;
}

Kenarlık rengini (seçildiğinde) #d3d3d3 olarak değiştirin

/* WooCommerce ürünleri için renk örnekleri - kenarlık rengi (seçili) #d3d3d3 */
div.fpf-radyo görüntüleri s. özel renk örnekleri girişi:işaretli+etiket img {
kenarlık rengi: #d3d3d3 ;
}

Resmin şeklini daire olarak değiştirin

/* WooCommerce ürünleri için renk örnekleri - daire şeklindeki resimler */
div.fpf-radyo görüntüleri s. özel renk örnekleri girişi+etiket img {
sınır yarıçapı: %50;
}
CSS sınıfları hakkında daha fazla rehberliğe mi ihtiyacınız var? CSS ile Özel Alan Özelleştirme hakkındaki makalemizi faydalı bulabilirsiniz.

Ürün sayfasındaki WooCommerce renk örnekleri

Şimdi WooCommerce ürün sayfasındaki son efekt ve renk örnekleri seçeneklerini görelim!

Esnek Ürün Alanları - CSS değişikliklerinden sonraki alan
Esnek Ürün Alanları ile eklenen WooCommerce ürün varyasyon örnekleri

Özel alanlar hakkında özet ve daha fazlası

WooCommerce ürünleri için renk örnekleri müşterinin ilgisini çeken önemli bir unsurdur.

Elbette bu çözüm, belirli bir web sitesine uyarlanması oldukça basit olduğu için çok çeşitli mağazalarda işe yarayacaktır . Ayrıca renk yerine bir desen veya resim (örneğin ürünün dokusunu gösteren) eklemek de mümkündür.

Esnek Ürün Alanları eklentisini kullanırken kolayca ekleyeceğiniz ve özelleştireceğiniz Radyo renkli alan türü sayesinde aradığınız etkiyi elde edebilirsiniz.

Ek olarak, eklentinin ücretsiz sürümünde daha fazla alan türü bulabilirsiniz, örneğin:

      • metin alanları - E-posta ve URL
      • seçenek alanları - Çoklu onay kutusu ve renkli Radyo
      • seçici alanlar - Zaman ve Renk
      • ve ürün sayfasını biçimlendirmek için diğer alanlar - Metin ve Resim eklemek için Paragraf veya HTML