Yeni WooCommerce Blokları Eklentisine Genel Bakış

Yayınlanan: 2019-01-21

WooCommerce'i yüklediğinizde veya güncellediğinizde, WooCommerce Blocks adlı yeni bir eklenti içerir. Bu, WordPress blok düzenleyicisine, sayfalarınıza ve yayınlarınıza WooCommerce ürünleri eklemenize izin veren yeni bloklar ekler. Bu yazıda WooCommerce Bloklarına bir göz atacağız ve neler yapabileceklerini göreceğiz.

WooCommerce Blokları Eklentisi

WooCommerce Blocks, Gutenberg'e 7 blok ekleyen WooCommerce için yeni bir eklentidir:

  1. Özellikli ürün
  2. Özenle Seçilmiş Ürünler
  3. En Çok Satan Ürünler
  4. En Çok Oy Alan Ürünler
  5. En Yeni Ürünler
  6. İndirimdeki Ürünler
  7. Kategoriye Göre Ürünler

Blokların her biri ayarlanabilir bir ızgara içinde görüntülenir ve sıralanabilir veya filtrelenebilir. Izgaralar, mizanpajdaki sütun sayısını belirlemenizi sağlar. Bir kaydırıcı kontrolünü ayarlayarak 1 ila 6 sütun arasından seçim yapabilirsiniz. Blokların birkaçı ayrıca satır sayısını ayarlamanıza izin verir. 4, sütun veya satır içeren tüm bloklar için varsayılandır. Sayfalandırma içermez, bu nedenle ayarladığınız sayı görüntülenecektir.

Filtreler, kategorileri seçmenize izin verir. Bazıları, yenilik, fiyat, derecelendirme, satış, başlık veya menü sırasına göre sıralamanıza olanak tanıyan bir sıralama özelliği içerir.

Bloklar ayrıca özel CSS alanlarıyla standart Gutenberg Gelişmiş sekmesini de içerir.

Ürünler Bloğu'nu etkinleştirin

WooCommerce'i güncellediğinizde veya etkinleştirdiğinizde, eklentiler listenizde yeni eklentiyi göreceksiniz. Burada göremiyorsanız, Eklentiler altındaki Yeni Ekle sekmesinde WooCommerce Bloklarını arayabilirsiniz.

Eklenti listesinde veya WordPress panosunun üst kısmındaki düğmeyi tıklayarak bloğu etkinleştirebilirsiniz.

WooCommerce Bloklarını Kullanma

WooCommerce adlı yeni sekme, Gutenberg düzenleyicisindeki mevcut bloklar listesine eklenir. Bu sekmenin içinde 7 WooCommerce bloğu kümesi bulunur. Blokların her biri, yaptıklarıyla eşleşen bir simgeye sahiptir, böylece onları bir bakışta tanıyabilirsiniz.

Blokları sayfaya eklediğinizde, onları hızlı bir şekilde eklemek için tıklayabileceğiniz sayfada semboller belirir.

Her bloğa bakalım.

Özellikli ürün

Öne Çıkan Ürün, görüntülemek için listeden tek bir ürün seçmenizi sağlar. Metni hizalayabilir, kaplamayı düzenleyebilir ve resmi düzenleyebilirsiniz. Ayrıca Ek CSS Sınıfı alanına sahiptir.

Bu blok, tüm WooCommerce blokları arasında mevcut olan en fazla özelleştirmeye sahiptir. Üst kısımdaki metin düğmeleriyle metin yönünü ayarlayın. Düzenle'ye tıklamak, kaplama için özelleştirmeleri açar. Burada ürünü seçebilir, açıklamayı gösterebilir, fiyatı gösterebilir, kaplamanın rengini seçebilir ve opaklığını ayarlayabilirsiniz.

Kullanmak için bir renk seçebilir veya çok renkli daireye tıklayarak özel bir renk seçebilirsiniz. Burada hex kodunu, RGB kodunu girebilir veya kaydırıcı ve renk seçici ile rengi ayarlayabilirsiniz. Bindirme ayarlamalarını beğendim. Metni veya düğmeyi ayarlamak için CSS kullanmanız gerekir.

Özenle Seçilmiş Ürünler

Elle Seçilmiş Ürünler, görüntülenecek ürünleri seçmenize olanak tanır. Bunları bloğun kendisinden veya sağ sütundan arayabilirsiniz. 1-6 arasında sütun sayısını ayarlayın. Yenilik, fiyat, derecelendirme, satış, başlık veya menü sırasına göre sıralayın.

Ürünleri seçmek, onları ızgara içindeki yerleşime ekler.

En Çok Satan Ürünler

En Çok Satan Ürünler, bloktan herhangi bir şey seçmenize izin vermez, ancak yine de tüm özelleştirmelerinizi sağdaki ayarlardan yapabilirsiniz. Burada sütun ve satır sayısını seçebilir (her biri için 1-6 arasından seçim yapabilir), kategoriye göre filtreleyebilir ve CSS'yi ayarlayabilirsiniz.

Bu örnekte 6 sütun, 2 satır ve Giyim kategorisini seçtim.

En Çok Oy Alan Ürünler

En Çok Oy Alan Ürünler, siz bloğu seçtikçe ürünleri de ekler. Ayarlar, 1-6 sütun ve satır için standart düzeni, kategoriye göre filtrelemeyi ve CSS'yi içerir. Bu, varsayılan ayarları gösteriyor.

En Yeni Ürünler

En Yeni Ürünler, siz bloğu seçtiğinizde ürünleri otomatik olarak ekler. Ayarlar standart düzeni, kategori filtresini ve CSS'yi içerir. Bu örnekte 5 sütun ve 3 satır seçtim. Her kategoriyi içeren kategori filtresini varsayılan olarak bıraktım.

İndirimdeki Ürünler

İndirimdeki Ürünler, indirimde olan tüm ürünleri otomatik olarak yükler. Ayrıca sütunlar ve satırlar için düzen seçeneklerini, ürün filtresini ve CSS'yi içerir. Bu, Yenilik, fiyat, derecelendirme, satış, başlık veya menü sırasına göre sipariş verebilmeniz için bir Siparişe Göre seçeneği ekler. Bu örnekte, sütunları 2'ye ve satırları 4'e ayarladım. Ürün kategorisini varsayılan olarak bıraktım.

Kategoriye Göre Ürünler

Kategoriye Göre Ürünler, blok içindeki kategorileri seçmenize olanak tanır ve seçenekleri iyileştirmeye yardımcı olacak bir seçici içerir. Örneğimde, yalnızca bir seçeneği vardı (Seçilen herhangi bir kategori). Ayrıca düzen seçeneklerini, kategori seçimini, sıralama ölçütü ve CSS ayarlarını da içerir.

Bu örnekte kategorilerimi seçtim, sütunları 4'e, satırları 2'ye ayarladım ve ürünleri alfabetik olarak sıraladım.

WooCommerce Blokları ile Örnek Sayfalar

İşte ön uçtaki her bloğa bir bakış. Onları tanımlamak için bir etiket ekledim. Her birini farklı sayıda sütuna ayarladım, ancak görüntünün kontrolden çıkmasına yardımcı olmak için hepsinde 1 satır var. Bu blokları kullanarak her kategori için kolayca bir mağaza sayfası oluşturabilirsiniz.

Örneğin, sadece aksesuarları sergilemek için bir sayfa oluşturdum. Bir kapak resmi ve bir başlık ekledim ve Kategoriye Göre Ürünler bloğunu 3 sütun ve 6 satır gösterecek şekilde ayarladım.

Güzel bir tasarıma sahip temiz bir sayfa oluşturur ve elbette sadece aksesuar kategorisine ait ürünleri gösterir. Bu, her tür ürün sayfası oluşturmak için kullanılabilir.

İşte bir çift sütunda bir Elle seçilmiş blok ve bir metin bloğu ekleyen kısa bir CTA.

Sayfa basittir, ancak işlevseldir.

Bu sayfa için bir blog yazısı düzenine En Çok Satan Ürünleri ekledim. 4 sütun ve 1 satır olarak ayarladım ve kategori olarak Giyim'i seçtim.

Yazı harika görünüyor. Yayınlamadan önce, muhtemelen biraz boşluk, ürünler için bir etiket ve belki metne biraz dolgu eklerdim, ancak potansiyeli görmek kolay.

Bunun için iki sütunlu bir düzen ekledim ve bir metin bloğu ve 2 sütunlu ve 2 satırlı En Çok Satan Ürünler bloğunu ekledim.

Biten Düşünceler

WooCommerce Blokları ilginç bir eklentidir. Blokların kullanımı basittir ve bazı kullanışlı kategori, düzen ve filtreleme araçları sağlar. Sütun ve satır düzeni kaydırıcılarını beğendim. Metinlerinde, düğmelerinde, vurgulu bindirmelerinde vb. ayarlamalar yapmak istiyorsanız CSS kullanmanız gerekir, ancak en azından özel CSS bir seçenektir. Bloklar, satış sayfaları oluşturmak veya içeriğinize ürün eklemek için harikadır.

Daha fazla stil özelliği görmek istiyorum (özellikle düğmeler, metin ve vurgulu kaplamalar için). Divi'de yaptığım gibi kişiselleştirmek istedim (sanırım Divi beni şımarttı). CSS kullananlara yardımcı olacak CSS sınıfı alanlarını içerir. Çok fazla özelleştirme olmasa bile blokları kullanmayı sevdim. WooCommerce ürünlerini Gutenberg sayfalarınıza ve gönderilerinize dahil etmek istiyorsanız, WooCommerce Blocks denemeye değer.

Senden duymak istiyoruz. WooCommerce bloklarını denediniz mi? Yorumlarda deneyiminizi bize bildirin.

Jomic / Shutterstock.com aracılığıyla Öne Çıkan Görsel