Güzel Bir WooCommerce Mağaza Sayfası Nasıl Oluşturulur (5 Adımda)

WooCommerce mağaza sayfasını özelleştirmenin en kolay yolunu mu arıyorsunuz?

WordPress, profesyonel web siteleri oluşturmanıza yardımcı olacak çok çeşitli bloklar sunar. WooCommerce kullanıyorsanız, çevrimiçi mağazanız için kullanabileceğiniz özel WooCommerce bloklarına da erişebilirsiniz.

Bu nedenle, dönüşümleri artıran bir WooCommerce mağaza sayfası oluşturmak için bu öğeleri nasıl kullanacağınızı merak ediyor olabilirsiniz.

Neyse ki, süreç çok basittir. WooCommerce, bu blokları kullanarak ürünlerinizi farklı şekillerde sergilemenize olanak tanır. Ek olarak, kullanıcıların mağazanıza göz atmasını kolaylaştırmak için filtreler ve arama işlevleri ekleyebilirsiniz.

Bu makalede, blokları kullanarak güzel bir WooCommerce mağaza sayfasının nasıl oluşturulacağını göstereceğiz. Yönergelerimizi takip edebilir ve ihtiyaçlarınıza göre hangi blokları kullanmak istediğinizi seçebilirsiniz. Başlayalım!

İçindekiler:

1. Tüm Ürünler bloğunu yerleştirin
2. Öne Çıkan Ürün ve/veya Özenle Seçilmiş Ürünler blokları ekleyin
3. Mağaza sayfasında ürün aramayı etkinleştir
4. Öne Çıkan Kategori bloklarını kullanın
5. Ürünleri fiyata göre filtreleme seçeneği ekleyin

WooCommerce mağaza sayfası bloklarla nasıl özelleştirilir

Başlamak için mağazanızın Mağaza sayfasının düzenleyicisini açmak isteyeceksiniz. Ardından, içeriğini özelleştirmek için bu talimatları izleyin.

1. Tüm Ürünler bloğunu yerleştirin

Mağaza sayfaları tüm şekil ve boyutlarda gelir. Bir çevrimiçi mağazada, bu sayfa genellikle satılık tüm ürünlerinizi gösterir. Kullanıcılar, ilgili ürün sayfalarını açmak için tek tek öğeleri tıklayabilir veya bunları doğrudan sepetlerine ekleyebilir (mağaza izin veriyorsa):

WordPress ve WooCommerce ile mağaza sayfanıza hangi öğeleri ekleyeceğiniz üzerinde tam kontrole sahipsiniz. Bu sayfanın görünümü ve hissi, kullandığınız temaya ve onu nasıl yapılandırdığınıza bağlı olacaktır.

Eklentiyi kullanmaya başladığınızda WooCommerce otomatik olarak bir mağaza sayfası kurar, böylece devam edebilir ve sizinkinin neye benzediğini kontrol edebilirsiniz. Düzenlemeye hazır olduğunuzda Sayfalar'a gidin ve Mağaza seçeneğini bulun.

Bu sayfayı Blok Düzenleyici'de açın ve şöyle bir şey görmelisiniz:

Varsayılan olarak, Mağaza sayfası Tüm Ürünler bloğunu ve bir başlığı içerir. Bu bloğu görmüyorsanız, artı (+) işaretini tıklayıp seçenekler listesinden seçerek sayfaya ekleyebilirsiniz:

Tüm Ürünler bloğu, mağazanızın tüm ürünlerini yeniden eskiye doğru sıralanmış olarak içeren bir ızgara görüntüler. Ürünlerinizin görüntülenme sırasını değiştirmek için bloğa tıklayın ve sağdaki ayarlar paneline gidin. Ardından, İçerik Ayarları bölümüne gidin ve Ürünleri Sipariş Ölçütü menüsünden tercihinizi seçin:

Bu arada, Düzen Ayarları altında, ürün kılavuzunda görüntülemek istediğiniz sütun ve satır sayısını seçebilirsiniz. Bu blokla kullanılabilen diğer seçenekleri keşfetmekten çekinmeyin.

2. Öne Çıkan Ürün ve/veya Özenle Seçilmiş Ürünler blokları ekleyin

Birçok mağaza sayfası belirli ürünleri vurgular. Bunlar genellikle yeni veya indirimli stoklar veya yeni eklenen ürünler gibi mağaza sahiplerinin dikkat çekmek istediği ürünlerdir. WooCommerce, mağazanızdaki herhangi bir ürünü sergilemenizi sağlayan bir Öne Çıkan Ürün bloğu ile birlikte gelir.

Bu bloğu sayfanıza yerleştirdikten sonra, öne çıkarmak istediğiniz ürünü seçmeniz ve Bitti'ye tıklamanız gerekir:

Ardından, WooCommerce ürünün resmini, adını, fiyatını, açıklamasını ve harekete geçirici mesajı (CTA) görüntüler. Blok şöyle görünmelidir:

Daha sonra bu bloğu beğeninize göre özelleştirebilirsiniz. Örneğin, resmi değiştirebilir ve CTA düğmesini değiştirebilirsiniz.

Öne Çıkan Ürün bloğunu WooCommerce mağaza sayfanıza eklemenin dezavantajı, kullanıcıları diğer ürünlerinizden uzaklaştırabilmesidir. Buna karşı koymak için, öne çıkan birden çok ürünü yan yana görüntülemek için sütunlar kullanmanızı öneririz:

Öne Çıkan Ürünler bloğuna bir alternatif, Elle Seçilmiş Ürünler seçeneğidir. Bu blok, birkaç ürün seçmenizi ve bunları yan yana görüntülemenizi sağlar. Tüm Ürünler bloğuyla aynı stili kullanır:

Hem Öne Çıkan Ürünler hem de Elle Seçilmiş Ürünler blokları benzer amaçları yerine getirir. İdeal olarak, ziyaretçileri çok fazla öne çıkan öğeyle boğmamak için iki seçenekten birini seçeceksiniz. Ayrıca, kullanıcıların bunları gözden kaçırmaması için bu blokları sayfanın en üstüne yerleştirmenizi öneririz.

3. Mağaza sayfasında ürün aramayı etkinleştirin

Büyük bir ürün kataloğuna sahip bir mağazanız varsa, bir arama özelliği sunmanız gerekir. Bu şekilde kullanıcılar, mağazanın tamamına göz atmak zorunda kalmadan akıllarında kalan belirli öğeleri arayabilirler.

Mağaza sayfanıza bir arama bloğu eklerken, varsayılan WordPress arama bloğunu değil, Ürün Arama seçeneğini aramak isteyeceksiniz. Ürün Arama , sonuçları WooCommerce ürünleriyle sınırlandırırken, diğer arama bloğu sitenizdeki diğer tüm sayfaları içerecektir.

WooCommerce arama işlevi şöyle görünür:

Ürün Arama bloğunun düzenleyicide çalışmadığını, bu nedenle ön uçta test etmeniz gerektiğini unutmayın. Ek olarak, blok otomatik tamamlama işlevi sunmaz, bu nedenle kullanıcıların sonuçları görmek için tam bir sorgu yazması ve yeni bir sayfa yüklemesi gerekir.

4. Öne Çıkan Kategori bloklarını kullanın

Kullanıcıları elle seçilmiş ürünlere yönlendirmenin yanı sıra, belirli ürün kategorilerini de vurgulamak isteyebilirsiniz. Bu, kullanıcıların belirli bir departmandaki öğeleri aramasını sağlayacağından, birkaç tür ürün satıyorsanız özellikle yararlı olabilir.

WooCommerce mağaza sayfanıza Öne Çıkan Kategori bloğunu ekleyerek başlayın. Ardından, vurgulamak istediğiniz ürün kategorisini seçin ve Bitti'ye tıklayın:

Öne Çıkan Kategori bloğu şöyle görünecek:

Blok, arka planın ve metnin rengini değiştirmenize izin verir, ancak çok fazla ek özelleştirme seçeneği sunmaz. Ayrıca, blok çok yer kapladığından, sütunları kullanarak birden fazla öne çıkan kategoriyi yan yana yerleştirmenizi öneririz:

Öne Çıkan Ürün Kategorisi bloğu çok basit olduğundan, daha fazla özelleştirme için Otter Blokları gibi eklentilere bakmanızı öneririz.

Otter Blocks ile, animasyonlar ve diğer görünürlük ayarları ekleyerek WooCommerce bloklarını değiştirebilirsiniz:

Ayrıca, Otter Blocks, çevrimiçi mağazanızda kullanabileceğiniz çeşitli yeni bloklar ekler. Bunlar, pop-up'lar (e-posta kayıtlarını toplamak için mükemmel olan) ve ürün incelemeleri gibi seçenekleri içerir.

5. Ürünleri fiyata göre filtreleme seçeneği ekleyin

Şimdiye kadar mağazanızda bir arama çubuğu, elle seçilmiş ürünler, öne çıkan kategoriler ve tüm ürün kataloğunuz var. Tek kaçırdığınız şey, kullanıcıların ürünleri filtrelemesinin bir yolu.

Ürünleri Fiyata Göre Filtrele bloğu, müşterilerin tam da bunu yapmasını sağlar. Blok, müşterilerin görmek istedikleri ürünler için minimum ve maksimum fiyatları belirlemesine olanak tanıyan bir kaydırıcı görüntüler:

Fiyat değerleri düzenlenemez – ürünlerinizin fiyatlarına bağlıdır. Ziyaretçiler istedikleri değerleri girebilir veya bunları değiştirmek için kaydırıcıyı kullanabilir.

Fiyat kaydırıcısında değişiklik yaptığınızda, Tüm Ürünler bloğu, kriterleri karşılayan ürünleri gösterecek şekilde güncellenecektir. Bu, kullanıcıların sayfayı yeniden yüklemesine gerek kalmadan gerçekleşir.

Yerleştirme söz konusu olduğunda, ürün kataloğunuzun yukarısına Ürünleri Fiyata Göre Filtrele bloğunu eklemenizi öneririz. Bu şekilde, kullanıcılar sayfayı aşağı kaydırırken görecekler.

Ayrıca kullanıcıların ürünleri boyut, renk ve diğer özelliklere göre filtrelemesini sağlayabilirsiniz. Ürünleri Özelliğe Göre Filtrele bloğu, mağazanızda bulunan seçeneklere göre seçilen bir özelliği karşılayan ürünlere göz atmanıza olanak tanır.

Ve bu kadar! İşiniz bittiğinde, değişikliklerinizi kaydettiğinizden emin olun; yeni mağaza sayfanız hemen çalışmaya başlayacaktır.

WooCommerce mağaza sayfanızı bugün kurun

Nihai hedefiniz, kullanıcılara aradıkları tüm seçenekleri anlamlı bir düzen ve düzen içinde sunarak dönüşümleri en üst düzeye çıkaran bir sayfa oluşturmaktır.

WooCommerce mağaza sayfanızı kurduktan sonra, dikkatinizi tek ürün sayfalarınıza çevirebilirsiniz. Bu amaçla, WooCommerce ürün sayfasının nasıl optimize edileceğine ilişkin kılavuzumuza göz atmayı unutmayın.

Blokları kullanarak bir WooCommerce mağaza sayfasının nasıl oluşturulacağı hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde bize bildirin!