WooCommerce Ürün Listesi Görünümü Nasıl Oluşturulur

Web sitenizde bir WooCommerce ürün listesi görünümü oluşturmak ister misiniz? Müşterilerinize mağaza sayfasında bir ürün hakkında daha fazla bilgi göstermek için çok popülerdirler. Bu nedenle, bu eğitimde size ürün listesi görünümüne geçmek için adım adım bir eğitim sunacağız.

Ancak sürece geçmeden önce, bir ürün listesi görünümü oluşturmak için neye ihtiyacınız olabileceğini görelim.

WooCommerce'de Neden Ürün Listesi Görünümü Oluşturmalısınız?

Varsayılan olarak, mağaza sayfanızdaki ürünler ızgara stilinde görüntülenir. Evet, tamamen web sitenizin aktif temasına da bağlılar. Ancak çoğu temada, karolar gibi birbiri ardına bir ürünle bir ızgara temsili ile görüntülenirler.

Ancak bir liste görünümünde ürünler çok daha fazla ayrıntıyla görüntülenir. Her ürün, sevkiyat ayrıntıları, ürün açıklaması ve daha fazlası gibi ek bilgilerle birlikte dikey bir listede birbiri ardına görüntülenir. Örneğin , Best Buy çevrimiçi mağazasının tablo görünümünü ve liste görünümünü karşılaştıralım.

Web sitesindeki ürünlerin varsayılan ızgara görünümü şu şekilde temsil edilir:

Ancak, web sitesinin liste görünümüne doğrudan geçiş yapamazsınız. Ancak daha fazla ürün görüntülemek istiyorsanız, ürünler aşağıdaki düzende liste görünümünde görüntülenecektir :

Liste görünümünde, ızgara görünümünden daha fazla ürün detayının gösterildiğini açıkça görebiliriz. Müşteriler, gönderi detaylarını, ürün modelini ve SKU numaralarını, karşılaştırma ve istek listesi seçeneklerini vb. liste görünümünde kolayca görebilirler. Izgara görünümünde ise, web sitesinin sıkışık görünmesine neden olacağı için bu bilgiler eklenemez.

Aslında, toptan ürünler, ürün katalogları veya restoran sipariş sistemi içeren bir çevrimiçi mağaza işletiyorsanız, liste görünümü müşterileriniz için daha uygundur. Müşterilerinize gerekli tüm detaylar tek bir sayfada sunulabilir. Bu nedenle, ek bilgileri görüntülemek için tek tek ürün sayfalarına tıklamaları gerekmeyecek.

WooCommerce Ürün Listesi Görünümü Nasıl Oluşturulur?

WooCommerce ürün listesi görünümü oluşturmanın en kolay yolu bir eklenti kullanmaktır . WordPress eklentileri, web sitenizin işlevselliğini artırmasına ve esnekliğini artırmasına yardımcı olur. Benzer şekilde, ürünleri bir liste halinde görüntülemek için de kullanılabilirler.

Bir ürün listesi görünümü oluşturmanıza izin veren birçok eklenti olsa da, en iyilerinden bazıları şunlardır:

WooCommerce için Izgara/Liste Görünümü

WooCommerce için Izgara/Liste Görünümü, ürün listesi görünümü oluşturmak için en iyi ücretsiz eklentilerden biridir. Kullanımı çok basittir ve WooCommerce mağaza sayfanızdaki listeyi veya ızgara görünümünü etkinleştirmek için bir geçiş ekler.

Eklenti ayrıca size çeşitli liste ve ızgara ürün stili özelleştirme seçenekleri sunar. Hatta konumunu değiştirebileceğiniz ızgara/liste değiştirici düğmesini değiştirmek için size gelişmiş seçenekler sunar. Aynı şekilde sayfa başına ürünler de bu eklenti yardımıyla beğeninize göre değiştirilebilir.

Ana Özellikler:

• Liste ve ızgara değiştirici düğmesi
• Anahtarlayıcı düğmesi için gelişmiş özelleştirme
• Sayfa başına ürün seçenekleri
• Kısa kod dostu
• Başlıca WooCommerce eklentileriyle uyumluluk

Fiyat:

WooCommerce için Izgara/Liste Görünümü ücretsiz bir eklentidir. Resmi WordPress eklenti deposunda mevcuttur.

WooCommerce Ürün Tablosu

WooCommerce Ürün Tablosu , bir ürün listesi görünümü oluşturmanıza yardımcı olabilecek premium bir eklentidir. Başlangıçta, web sitenizde bir tablo tasarlamak için WooCommerce eklentilerinden biridir. Ancak ürünlerinizi tablo halinde bir liste görünümünde görüntülemek için kolayca değiştirilebilir.

Eklentinin kurulumu çok kolaydır ve kullanıcıların aynı anda birden fazla ürün sipariş etmesine olanak tanır. Ayrıca liste görünümü için yerleşik bir arama ve sıralama seçeneği sunar. Bu, kullanıcılarınız için çok uygun bir özellik olabilir, çünkü istedikleri ürünleri çok kolay bulabilirler.

Ana Özellikler:

• Ürünler için tablolu liste görünümü seçeneği
• Anında ürün arama ve sıralama seçenekleri
• Tek sayfalık hızlı sipariş
• Kullanımı kolay arayüz
• Hızlı "Sepete Ekle" düğmeleri

Fiyat:

WooCommerce Ürün Tablosu, yılda 499 USD'den başlayan premium bir eklentidir. 30 günlük para iade garantisi ve öncelikli desteğe sahip 20 site lisansı içerir.

Şimdi birkaç eklentiye göz attığımıza göre, onları da nasıl kullanacağımıza geçelim. Ancak başlamadan önce, lütfen herhangi bir adımı atlamadan WooCommerce'i düzgün bir şekilde kurduğunuzdan emin olun ve uyumlu WooCommerce temalarından birini kullanın.

Bir Eklenti Kullanarak WooCommerce Ürün Listesi Görünümü Oluşturun

WooCommerce ürün listesi görünümünü oluşturmak için bu gösteride WooCommerce için Izgara/Liste Görünümünü kullanacağız . Ücretsizdir, kullanımı çok kolaydır ve ürünler için bir liste görünümü oluşturmak için basit bir çözümdür.

Ancak herhangi bir eklentiyi kullanmaya başlamak için önce onu yüklemeniz ve etkinleştirmeniz gerekir.

1. Eklentiyi kurun ve etkinleştirin

Eklentiyi yüklemek için WordPress kontrol panelinizden Eklentiler > Yeni Ekle'ye gidin. Ardından, eklenti için anahtar kelimeleri arayın ve bulduktan sonra Şimdi Yükle'ye tıklayın.

Kurulum bir süre sonra tamamlanacaktır. Son olarak, eklentiyi kurduktan sonra etkinleştirin .

Premium bir eklenti kullanmak istiyorsanız, manuel olarak yüklemeniz ve yüklemeniz gerekecektir. Daha fazla bilgi için lütfen manuel olarak bir WordPress eklentisi yüklemek için ayrıntılı kılavuzumuza bakın.

2. Eklenti Ayarlarını Yapılandırın

Eklentiyi etkinleştirdikten sonra, ayarlarını bir WooCommerce ürün listesi görünümü oluşturacak şekilde yapılandırabilirsiniz. WordPress kontrol panelinizden BeRocket > Izgara/Liste Görünümü'nü açın. Ürün listesi görünümünüz için tüm özelleştirme seçeneklerine buradan ulaşabilirsiniz.

Üç ana özelleştirme, düğmeler, ürün sayısı ve Özel CSS'yi içerir.

2.1. Düğme Seçenekleri

Eklenti, ürünlerin ızgarasını veya liste görünümünü değiştirmek için düğmeleriniz için bir ton özelleştirme sağlar.

Genel seçenekler, web sitenizdeki masaüstü ve mobil görünüm için varsayılan düğme stillerini içerir. Bir sayfa için sabit bir düğme stili de ekleyebilirsiniz. Benzer şekilde, sayfanızda soldan, sağdan, menünün veya sayfalandırmanın üstünden veya menünün hemen altından görüntülenecek düğme konumlarını da ayarlayabilirsiniz.

Bu seçeneklerin yanı sıra, düğme için maksimum mobil genişliği, özel sınıfı ve dolguları da düzenleyebilirsiniz.

Ayrıca, eklentiyle birlikte kullanılabilen daha fazla düğme ön ayarı ve stili vardır. Mevcut bir düğmeyi seçebilir ve ayrıntılı ön ayar seçenekleriyle daha fazla düzenleyebilirsiniz. Bunun da ötesinde, düğme stillerini düğme genişliği, yükseklik, metin boyutu, satır yüksekliği ve daha fazlasıyla değiştirebilirsiniz.

Ek olarak, normal düğmeyi, fareyle üzerine gelinen düğmeyi ve seçili düğme stillerini de özelleştirebilirsiniz. Her biri arka plan rengi, kenarlık genişliği ve rengi ve gölge seçenekleri için ayarlamalar içerir.

İhtiyacınız olan tüm gerekli değişiklikleri yapın ve Değişiklikleri Kaydet'e tıklayın .

2.2. Ürün Sayısı Seçenekleri

Bir ürün listesi görünümü oluşturduğunuzda, WooCommerce eklentisi için Izgara/Liste Görünümünü kullanarak ürün sayısı seçeneklerini de ayarlayabilirsiniz . İlk olarak, ürün sayısını kullanmayı etkinleştirebilir veya devre dışı bırakabilirsiniz.

Etkinleştirirseniz, sayfa başına ürünler, ürün sayım değeri ve ayırıcı değeri için ayrıca girdiler ekleyebilirsiniz. Ürün sayımının konumu, kendi düğme seçenekleri ve bunların nerede gösterileceği ile birlikte burada da ayarlanabilir.

2.3. Özel CSS/JavaScript

Eklenti, WooCommerce ürün listesi görünümünüzü oluşturduğunuzda özel CSS veya JavaScript eklemenize de olanak tanır. Özel CSS ve JavaScript'inizi eklemek için belirlenmiş komut dosyaları vardır. JavaScript, liste veya ızgara stili kümesinden önce veya sonra, tanımlama bilgileri, ızgara/liste için seçilen düğmeler vb. gibi çeşitli koşullar altında eklenebilir.

Ayrıca Font Awesome CSS dosyalarını buradan devre dışı bırakabilir veya bir Font Awesome sürümü seçebilirsiniz.

Gerekli özel CSS veya JavaScript'i ekledikten sonra değişiklikleri kaydetmeyi unutmayın.

Mağaza sayfanızı önizledikten sonra, ızgara ve liste görünümü arasında geçiş yapmak için geçişi görebileceksiniz. Ürün sayısı da burada gösterilmektedir ve ürün açıklaması da ürünlerle birlikte yer almaktadır.

Ve aşağıdaki demoda gösterildiği gibi, liste görünümü düğmesine tıklayarak ürün listesi görünümüne geçebilirsiniz.

Müşterileriniz, gerekirse ızgara görünümüne bile geri dönebilir. Sadece ızgara görünümü düğmesine tıklayabilirler .

Bu kadar! Bu şekilde bir WooCommerce ürün listesi görünümü oluşturabilir ve müşterilerinizin ızgara ve liste görünümü arasında geçiş yapmasına izin verebilirsiniz.

Bonus: WooCommerce'de Katalog Modunu Etkinleştir

Size bir WooCommerce ürün listesi görünümü oluşturmanın en kolay yollarından birini zaten sunduk. Ürünlerinizi bir katalog web sitesinde sergilemek için çok kullanışlıdırlar. Ancak, WooCommerce'de katalog modunu etkinleştirmenize yardımcı olmak için size bonus olarak da basit bir kılavuz sağlayacağız.

Bunu yapmak için web sitenizdeki temanızın temel dosyalarından biri olan function.php dosyasına birkaç kod parçacığı eklemeniz gerekecek. Bu nedenle, sonraki adımlar için lütfen bir alt tema oluşturun ve WordPress temanızı güncellerken yaptığınız değişikliklerin kaydedilmesi için web sitenizi yedekleyin. Yardıma ihtiyacınız varsa, bir alt tema oluşturmak için WordPress için alt tema eklentilerinden birini de kullanabilirsiniz.

Alt temanızı etkinleştirdikten sonra Görünüm > Tema Dosyası Düzenleyici'ye gidin ve temanızın functions.php dosyasını açın. Ardından, düzenleyicinin sonuna kod parçacıklarını eklemeye başlayabilir ve Dosyayı güncelleyebilirsiniz .

Tema dosyaları, web sitenizin aktif temasına bağlıdır. Editörünüz biraz farklı görünebilir diye burada Divi temasını kullandık.

Öncelikle sepete ekle butonunu kaldırmanız ve ardından ürünlerin fiyatlarını gizlemeniz gerekiyor. Bu nedenle, düzenleyicide aşağıdaki kod parçacıklarını eklemeniz gerekir.

1. Sepete Ekle Düğmesini Kaldırın

Alışveriş sayfası ve ürün sayfası için sepete ekle düğmesini gizlemek için aşağıdaki komut dosyasını kullanabilirsiniz. Bu yüzden onu temanızın function.php dosyasına yapıştırın.

 remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Bu işlev, hem WooCommerce ürün sayfası hem de mağaza sayfası için sepete ekle sayfasını kaldıracaktır.

Ürünleri satın alınamaz hale getirmek isterseniz aşağıdaki kod parçasını da ekleyebilirsiniz.

 add_filter('woocommerce_is_purchasable', '__return_false');

Ayrıca sepete ekle butonunu “Devamını Oku” butonu ile değiştirecektir.

2. Ürün Fiyatlarını Gizleyin

WooCommerce içerisinde ürün fiyatlarını çeşitli şekillerde gizleyebilirsiniz. Yönetici hariç tüm kullanıcılar veya herkes için gizli tutulabilirler.

Tüm kullanıcılar için ürün fiyatlarını gizlemek istiyorsanız, aşağıdaki komut dosyasını kullanın:

 add_filter('woocommerce_get_price_html', 'QuadLayers_remove_price');
function QuadLayers_remove_price($fiyat){
dönüş ;
}

Alternatif olarak, admin dışındaki herkes için fiyatları gizlemek istiyorsanız aşağıdaki pasajı kullanın:

 add_filter('woocommerce_get_price_html', 'QuadLayers_remove_price');
function QuadLayers_remove_price($fiyat){
if ( is_admin() ) $fiyat döndürür;
dönüş ;
} 

Ayrıca, gerektiğinde ürünleri sadece mağaza sayfasında da gizleyebilirsiniz . Tek yapmanız gereken aşağıdaki kod parçasını functions.php dosyasına yapıştırmak.

 add_filter( 'woocommerce_after_shop_loop_item_title', 'remove_woocommerce_loop_price', 2 );
function remove_woocommerce_loop_price() {
if( ! is_shop() ) dönüş; // Fiyatları sadece mağaza sayfasında gizle
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
}

Aferin! Artık bir WooCommerce ürün listesi görünümü oluşturabilir ve web sitenizde katalog modunu uygun şekilde etkinleştirebilirsiniz. Katalog modunu görüntülemek için alternatif yöntemler istiyorsanız, WooCommerce'de katalog modunu etkinleştirmek için ayrıntılı bir kılavuzumuz var. Benzer şekilde, sepete ekle düğmesini kaldırmak veya WooCommerce'de fiyatları gizlemek için daha fazla bilgiye ihtiyacınız varsa, bunları da ele aldık.

Çözüm

Şimdi çevrimiçi mağazanız için bir WooCommerce ürün listesi oluşturabileceğinizi umuyoruz. Müşterilerinizin ürün listesi görünümüne geçmesine izin vermek için özel bir eklentiyi kolayca kullanabilirsiniz. Eklentiler, gerekirse diğer birçok özelleştirme seçeneğiyle birlikte ızgara görünümüne geri dönmelerine bile izin verir.

Ayrıca, web sitenizde ürün listesi görünümünü de gösterebileceğiniz mağaza sayfasını etkinleştirme katalog modunu özelleştirmek için bazı temel adımlar sağladık. Birkaç WooCommerce sayfasında değişiklik yapmak istiyorsanız, alışveriş sepeti sayfasını, kategori sayfasını ve hatta ödeme sayfasını WooCommerce Checkout Manager gibi eklentilerle özelleştirebilirsiniz.

Peki, çevrimiçi mağazanıza herhangi bir sorun yaşamadan bir ürün listesi görünümü ekleyebilir misiniz? Hiç denedin mi? Lütfen yorumlarda bize bildirin.

Bu arada, ilginizi çekebilecek birkaç makalemiz daha var:

• WooCommerce Ürün Galerisi Nasıl Özelleştirilir
• Sepet Mesajındaki Hiçbir Ürünü Değiştirme
• WooCommerce Checkout'a Ürün Resmi Nasıl Eklenir