Satışın önemli bir kısmı sunumdur, bu kadarı verilir. Fakat online mağazalar için sunum sadece satış yapmakla ilgili değildir: aynı zamanda profesyonel ve güvenilir bir imaj yansıtmakla, estetikle ve para el değiştirmese bile kullanıcı deneyimiyle ilgilidir. Bu yazımızda WooCommerce mağazanız için ürün kategorisi listesi oluşturmaktan bahsedeceğiz. Bu cazip görüntü, web sitenize harika bir katkı olabilir.
Dakikalar içinde mükemmel bir ürün kategorisi listesi hazırlayabilirsiniz. Aşağıdaki videodan nasıl olduğunu öğrenebilirsiniz. Fakat öğreticilerinizi adım adım metin biçiminde tercih ederseniz, ihtiyacınız olan her şeyi videonun altında bulabilirsiniz.
Ama bir adım geriye gidelim: İlk etapta ürün kategori listesi nedir ve onu oluşturmak için ne yapmanız gerekir? Cevapları bu yazıda bulacaksınız. İhtiyacınız olan tek şeyin eğitim bölümü olduğundan eminseniz, aşağıdaki içindekiler bölümünde bulabilirsiniz.
İşte tartışmak istediklerimiz:
-
WooCommerce’de Ürün Kategorisi Listeleri Nelerdir?
-
Önceden Yapmanız Gerekenler
-
Elementor için WordPress Eklentilerini Kullanarak Ürün Kategorisi Listesi Nasıl Oluşturulur
-
WordPress Eklentilerinizi Nasıl Tarzlandırırsınız Ürün Kategorisi Listesi
WooCommerce’de Ürün Kategorisi Listeleri Nelerdir?
WooCommerce’in temel özelliklerinden biri, ürüne özel gönderi türüdür ve bu ürün gönderileri kategorilere ayrılabilir. Ne sattığınıza bağlı olarak bu kategoriler, örneğin giyim için erkek giyim ve kadın giyimi, edebiyat için kurgu ve kurgu dışı, yiyecek veya kozmetik için vegan veya vejetaryen vb. gibi gruplamaları içerebilir.
Bir ürün kategorisi listesi, alışveriş yapanlarınıza aralarından seçim yapabilecekleri bir dizi kategori sunar – tıpkı bir restoran menüsündeki alt başlıklar gibi. Ürün kategori listeleri bir başka deyişle bir sunum ve gezinme özelliğidir. Mağazanızda birkaç üründen daha fazlası varsa ve bunlar kategoriler halinde düzenlenebiliyorsa kullanışlıdır.
Önceden Yapmanız Gerekenler
Web sitenizi düzenlemek için öncelikle bir web sitenizin olması gerekir. Şimdiye kadar, çok iyi. Aynı şekilde WooCommerce ürün kategorilerinden faydalanmak için de web sitenizde bir WooCommerce mağazası oluşturmuş olmanız gerekir.
Bunu yaptıktan sonra, ürün kategorileri oluşturmuş olmanız gerekir. Gösterimizde, dört kategoriye sahip bir giyim mağazası ve varsayılan Kategorilenmemiş kategorisi kullanacağız.
Son olarak iki WordPress eklentisini kurmanız ve etkinleştirmeniz gerekir: Elementor ve Elementor için WordPress Eklentileri. Altmış güzel tasarlanmış ve kullanımı kolay widget içeren kendi WordPress Addons eklentimizi kullanacağız. WooCommerce ürün kategorisi listesi bunlardan sadece bir tanesidir. WordPress Addons eklentisini kullanmak için, sayfa düzenleyiciniz olarak önde gelen görsel düzenleyici olan Elementor’u kullanmanız gerekir. En son sürüm, ücretsiz veya premium, işinizi görecektir. WordPress Eklentileri, diğer sayfa editörleriyle çalışmaz.
Yani, tekrarlamak için yapmanız gerekenler:
-
WooCommerce’i yükleyin
-
ürün kategorileri oluştur
-
Elementor’u kurun ve
-
Elementor için WordPress Eklentilerini yükleyin
Yukarıdakilerin hepsini yaptıktan sonra, ürün kategorisi listenize başlayabilirsiniz.
Elementor için WordPress Eklentilerini Kullanarak Ürün Kategorisi Listesi Nasıl Oluşturulur
Bir sayfanın parçası olarak bir ürün kategorisi listesinin nasıl oluşturulacağını size göstereceğiz. Başlamak için bir sayfa oluşturduk, ona bir başlık verdik ve sayfa düzenleyici başlığındaki Elementor ile Düzenle düğmesine tıkladık.
Widget’ı sol taraftaki menüde bulun ve sayfada istediğiniz yere sürükleyin.
Widget şimdi yerinde. Kategorize edilmemiş kategorisi de dahil olmak üzere mağazamızda tüm kategorilere sahip olduğunu görebilirsiniz.
Genel Sekmesi, Genel Bölüm
Widget’ın Genel sekmesi ve içinde Genel bölümü açılmalıdır. Liste Görünümü menüsünde, Galeri ve Duvarcılık görüntüleme türleri arasında seçim yapabilirsiniz. Galeri’nin varsayılan değerinde bırakacağız. Görüntü Oranları menüsünde, görüntü boyutunu ve kırpma türünü (Küçük Resim, Kare, Portre vb.) seçebilirsiniz. Bu tanıtım için varsayılan Orijinal ayarını kullanacağız.
Sütun Sayısı menüsü, Varsayılan’ın yanı sıra birden sekize kadar bir değere ayarlanabilir. Üçte bırakacağız. Duyarlı Sütunlar menüsünde, Önceden Belirlenmiş ve Özel arasında seçim yapabilirsiniz. Özel’i seçmek, ekran genişliğine göre sıralanan çeşitli aygıtlar için sütun sayısını seçmenize olanak tanır. Daha büyük iki cihaz için Üç sütun ve geri kalanı için Bir sütun ile gittik.
Öğeler Arasındaki Boşluk kaydırıcısı, ürün kategorisi kılavuzunuzdaki öğeler arasındaki sınırı kontrol eder. Bizimkini 27 piksele ayarlayacağız. Zigzag’ı Etkinleştir seçeneği, ızgaradaki diğer tüm döşemeleri kaydırmanıza izin verirken Kenarlıklar menüsü, ızgara öğeleriniz için farklı türde bir kenarlık belirlemenize olanak tanır. Burada iki seçeneğe de ihtiyacımız olmayacak.
Genel Sekmesi, Sorgu Bölümü
Şimdi, Genel sekmesinin Sorgu bölümünde, ilk seçenek Sayfa Başına Gönderi: ızgarada görüntülenen gönderi sayısıdır. Bizimkini 3’e ayarlayacağız. Sonraki iki seçenek, Sırala ve Sırala, ızgara döşemelerinizin ziyaretçiye görüneceği sırayı ayarlamanıza izin verir. Kategorileri tarihe göre ve azalan düzende sıralayarak varsayılan değeri değiştirmedik. Boşluğu Gizle denetimi, herhangi bir ürün içermeyen kategorileri gizlemenizi sağlar. Son olarak Ek Parametreler kontrolü, kimliklerini bilmeniz koşuluyla ızgaranızda kullanmak istediğiniz kategorileri seçmenize izin verir. Yapıyoruz ve bu yüzden üç kategorimizle gittik. Ürün kategorinizin kimliğini herhangi bir kategoride olduğu gibi öğrenebilirsiniz. Ayrıntılı bir açıklama için bağlantılı makaleye bakın.
Genel Sekmesi, Düzen Bölümü
Genel sekmesinin Düzen bölümü, kategori adının (başlığın) tablonuzda nasıl görüntüleneceğini seçmenizi sağlar. Öğe Düzeni menüsü, varsayılan olan ve bağlı kalacağımız Resim Kutulu Bilgi, Resim Üzerine Bilgi ve Düğmeli Bilgi Tarafı arasında seçim yapmanızı sağlar. Başlık Etiketi, kategori başlığının başlık durumunu seçmenizi sağlar. Varsayılan H5’tir ve bu gösteri için onu tutacağız.
Genel Sekmesi, Düğme Bölümleri
Genel sekmesinin sonraki iki bölümü Düğme ve Düğme Simgesidir. Ürün kategori listemiz için Info Side With Button seçeneğini seçmediğimiz için hiçbir şey yapmayacaklar. Fakat düğmenizi özelleştirmek için bunları kullanabilirsiniz. Düzen ve Tür menüleri, istediğiniz düğme türünü seçmenize izin verir. Örneğin Standart, İç Kenarlıklı veya Simge Kutulu düğme türüyle birleştirilmiş bir Dolgulu, Anahatlı veya Metinsel Düzene sahip olabilirsiniz. Düğme Metni Altı Çizili’yi Etkinleştir denetimi, Boyut menüsü gibi hemen hemen kendi kendini açıklayıcıdır. Son olarak alttaki alana istediğiniz Düğme Metni’ni girebilirsiniz.
Düğme Simgesi bölümünde, düğme simgeniz için bir .svg dosyası yükleyebilir veya simge kitaplığından bir tane seçip Simge Konumu kontrolünü kullanarak düğme metninin soluna veya sağına konumlandırabilirsiniz. Yine, bu tasarım için düğmeler kullanmadığımız için, bu kontroller bu gösteri için önemsizdir. Fakat kendi ürün kategorisi listelerinizi beğeninize göre şekillendirmek için bunları kullanabilirsiniz.
WordPress Eklentilerinizi Nasıl Tarzlandırırsınız Ürün Kategorisi Listesi
Genel seçenekler, ürün kategorisi listenizi yapılandırırken sahip olduğunuz neredeyse sınırsız seçeneklerin yalnızca bir parçasıdır. Ürün kategorisi listelerinizi biçimlendirmenin birçok yolu vardır ve bunlar Stil sekmesinde bulunabilir.
Stil Sekmesi, Stil Bölümü
Stil sekmesinde, yukarıdaki ilk bölüm Stil bölümüdür. Burada, tablonuzdaki kategori başlığını şekillendirebilirsiniz. Bir seçiciyi kullanarak veya onaltılık bir renk kodu girerek Başlık Rengini seçebilirsiniz. Başlık Tipografisi bölümünde, tipografi seçenekleri açısından olağan şüphelilere sahipsiniz: yazı tipi ailesi, boyut, ağırlık, boşluk vb. Başlık ayarlarımızdan memnunuz, bu nedenle ürün kategorisi listemiz için bu seçenekleri kullanmayacağız.
Başlık Kutusu Genişliği kontrolü, başlık kutunuzun genişliğini ayarlamanızı sağlar. 184 piksel olarak ayarlayacağız. Başlık Dolgusu seçenekleri, başlık metni ile kutu kenarı arasındaki mesafeyi etkiler. Bağlantı düğmesine tıklayarak değerlerin bağlantısını kaldıracağız ve dolgu değerlerini ayarlayacağız: Üst için 19 piksel ve Alt alan için aynı. Başlık Arka Plan Rengi seçeneği, başlığın arkasındaki kutu için bir renk seçmenizi sağlar. Varsayılan beyazda bırakacağız.
Stil Sekmesi, Düğme Bölümleri
Aşağıdaki birkaç bölüm, bir düğmeyi seçmiş olmanız durumunda, bizim seçmediğimiz bir düğmenin stilini ve davranışını yönetir. Yine de, Stil sekmesinin Düğme Stili, Düğme Simge Stili, Düğme İç Kenarlık Stili ve Düğme Altı Çizili Stili bölümleri, düğmenin ve simgenin hem normal düğme görünümü hem de fareyle üzerine gelindiğindeki davranışı için çok sayıda stil seçeneği sunar. .
Stil Sekmesi, Görüntü Stili Bölümü
Stil sekmesinin Görüntü Stili bölümünde Normal/Hover anahtarını görebilirsiniz. Bu durum bir kullanıcı faresini resmin üzerine getirdiğinde görüntünün davranışını belirlemenizi sağlar. Normal görünümde, tüm yapabileceğiniz Kaplama Rengi kontrolünü kullanarak her görüntü için bir renk kaplaması ayarlamaktır.
Fareyle Üzerine Gelme görünümünde, bir kullanıcı faresini görüntünün üzerine getirdiğinde kullanılacak bir kaplama ayarlamak için Kaplama Vurgulu Rengini tekrar kullanabilirsiniz. Image Hover kontrolünü kullanarak, üzerine gelindiğinde animasyon türünü seçebilirsiniz; Image Hover Zoom Origin, birinin seçilmesi durumunda animasyon efektinin odağını seçmenize izin verir. Bu gösteri için, varsayılan değerler olan Image Hover için Zoom In seçeneğini ve Image Hover Zoom Origin için Center seçeneğini kullanacağız.
Stil Sekmesi, Kenarlık Stili Bölümü
Stil sekmesinin Kenarlık Stili bölümü, görüntünün köşelerinin yuvarlatılabileceği piksel sayısını (yüzdeler veya ems) ayarlamanıza olanak tanır. Bu gösteri için o efekti kullanmayacağız.
Stil Sekmesi, Aralık Stili Bölümü
Son olarak Spacing Style bölümüne geliyoruz. Bunun yalnızca bir kontrolü vardır: Başlık Alt Uzaklığı ve görüntünün altı ile başlık arasındaki mesafeyi temsil eder. Kaydırıcıyı kullanarak değeri seçebilir veya istediğiniz bir değeri girebilirsiniz. Bir kez daha varsayılan ayardan memnunuz ve bu seçeneği kullanmayacağız.
Ve gördüğünüz gibi, bir ürün kategori listesi oluşturabilir ve bunu dakikalar içinde beğeninize göre özelleştirebilirsiniz! Tek ihtiyacınız olan Elementor ve WordPress Eklentileri.
Konu Özeti
Bu hızlı demoda gösterdiğimiz gibi, birkaç dakika içinde, sadece birkaç fare tıklamasıyla ve çoğunlukla varsayılan seçenekleri kullanarak, minimalist olsa da güzel bir ürün kategorisi listesine sahip olabilirsiniz. Bununla birlikte hepsi bu kadar değil: kullanmadığımız. Fakat WooCommerce ürün kategorisi listenizi neredeyse tüm web sitesi düzenine veya stiline sığdırabileceğiniz sayısız stil ve düğme seçeneği var. Ve hiçbirinin size bir kuruşa mal olmasına gerek yok.