Wooocommerce Ürünleri Listesinin Bir Listesi Nasıl Yapılır
Web sitenizde bir WooCommerce ürün listesi ekranı yapmak ister misiniz? Mağaza sayfasındaki müşterilerinize bir ürün hakkında daha fazla bilgi görüntülemek için çok popülerdir. Bu nedenle, bu öğreticide ürün listesi ekranına geçmek için adım adım bir öğretici vereceğiz. Ancak süreçten geçmeden önce, bir ürün listesi ekranı yapmak için neye ihtiyacınız olabileceğini görelim. Neden WooCommerce’de bir ürün listesi ekranı yapmalısınız? Varsayılan olarak, mağaza sayfanızdaki ürünler kafes stilinde görüntülenir. Evet, tamamen web sitenizin aktif temasına bağımlıdırlar. Ancak çoğu tema durumunda, fayanslar gibi ürünlerle bir ızgara gösterimi ile görüntülenir.
Ancak liste ekranında, ürün daha ayrıntılı olarak görüntülenir. Her ürün, gönderim detayları, ürün açıklamaları ve diğerleri gibi ek bilgiler içeren dikey bir listede birbirleriyle görüntülenir. Örneğin, Best Buy çevrimiçi mağazalarının ızgara ve ekran listesinin ekranını karşılaştıralım. Web sitesindeki varsayılan kafes ekranı aşağıdaki gibi temsil edilir:
Bir ürün listesi ekranı yapmanıza izin veren birçok eklenti olmasına rağmen, işte en iyilerinden bazıları: WooCommerce için ekran kutuları/listeleri
WooCommerce için Ekran ızgarası/Listesi, bir ürün listesi ekranı yapmak için en iyi ücretsiz eklentilerden biridir. Bu kullanımı çok kolaydır ve yalnızca Woocommerce Shop sayfanızdaki liste veya kafes ekranını etkinleştirmek için bir anahtar ekleyin. Bu eklenti ayrıca ürün stilini ve kafesini ayarlamak için çeşitli seçenekler sunar. Bu, konumunu değiştirebileceğiniz kafes/liste düğmesini değiştirmek için başka bir seçenek sunar. Aynı şekilde, sayfa başına ürünler de bu eklentinin yardımıyla isteklerinize göre değiştirilebilir. Ana Fitur: Kayıt ve Lave Dağıtım Testleri
Diferansiyel düğme için gelişmiş özelleştirme
Sayfa başına ürün seçenekleri
Kısa kod
Ana eklenti ile uyumluluk wooocommerce
Fiyat: WooCommerce için ızgara/liste ekranı ücretsiz bir eklentidir. Bu, resmi WordPress eklenti deposunda mevcuttur. WooCommerce Ürün Tablosu
Wooocommerce ürün tablosu, bir ürün listesi ekranı oluşturmanıza yardımcı olabilecek premium bir eklentidir. Başlangıçta, bu, web sitenizdeki tabloları tasarlamak için WooCommerce eklentilerinden biridir. Ancak, ürününüzü Tablo Listesi ekranında görüntülemek için kolayca değiştirilebilir.
Bu eklentinin yönetimi çok kolaydır ve kullanıcıların aynı anda birkaç ürün sipariş etmesine izin verir. Ayrıca liste ekranı için varsayılan bir arama ve sipariş seçeneği sağlar. Bu, kullanıcılarınız için çok rahat bir özellik olabilir, çünkü istenen ürünü çok kolay bulabilirler. Ana özellik: Ürünler için tablo listeleri için görüntüleme seçenekleri
Anlık ürünleri ve sıralama seçeneklerini arayın
Hızlı bir sayfa rezervasyonu
Kullanımı kolay arayüz
“Sepete Ekle” Düğmesi Hızlı
Fiyat: WooOcommerce Ürün Tablosu, yılda 499 USD’den başlayan birinci sınıf bir eklentidir. Bu, 30 günlük para ve öncelik desteği garantisi içeren 20 site lisansı içerir. Şimdi birkaç eklenti gördükten sonra, nasıl kullanılacağına da bakalım. Ancak başlamadan önce, herhangi bir adım kaçırmadan ve uyumlu WooCommerce temalarından birini kullanmadan doğru bir şekilde hazırladığınızdan emin olun. Bir WooCommerce Ürün Listesi Ekranı Oluşturun Bir eklenti kullanarak bir WooCommerce Ürün Listesi ekranı oluşturmak için, bu gösteride WooCommerce için ızgara/liste ekranını kullanacağız. Bu ücretsiz, kullanımı çok kolay ve bir ürün listesi ekranı oluşturmak için doğrudan çözümler. Ancak herhangi bir eklenti kullanmaya başlamak için önce yüklemeli ve etkinleştirmelisiniz.
1. Eklentiyi yüklemek ve eklentiyi yüklemek için etkinleştirin, eklentileri açın> WordPress kontrol panelinizden yeni ekleyin. Ardından, eklentiler için anahtar kelimeler bulun ve bulduktan sonra şimdi yükleyin. Kurulum birkaç dakika sonra tamamlanacaktır. Son olarak yüklendikten sonra eklentiyi etkinleştirin.
Premium bir eklenti kullanmak istiyorsanız, manuel olarak yüklemeli ve yüklemelisiniz. Daha fazla bilgi için lütfen WordPress eklentisini manuel olarak yüklemek için ayrıntılı kılavuzumuza bakın. 2. Eklenti Ayarlarını Yapılandırma Eklentiyi etkinleştirdikten sonra, ayarları WooCommerce ürün listelerinin bir listesini oluşturmak üzere yapılandırabilirsiniz. WordPress kontrol panelinizden Broken> Izgara/Liste Görünümü’nü açın. Ürün listenizin görüntülenmesi için tüm ayar seçeneklerini burada görebileceksiniz.
Düğmeler, ürün sayısı ve özel CSS gibi üç ana ayar. 2.1. Bu eklenti düğmesi seçeneği, ürün için bir kafes veya liste ekranını değiştirmek için düğmenize çok fazla ayar sağlar. Genel seçenek, web sitenizdeki masaüstü ve hücresel ekranlar için varsayılan düğme stilini içerir. Sayfa için sabit bir düğme stili de ekleyebilirsiniz. Aynı şekilde, sayfanızda görüntülenecek düğmenin konumunu soldan, sağdan, menünün üstünde veya sayfalandırmanın hemen altında veya menünün hemen altında ayarlayabilirsiniz. Bu seçenekle birlikte, maksimum hücresel genişliği, özel sınıfı ve düğmeler için rulmanları da düzenleyebilirsiniz. Ayrıca, eklentilerle birlikte birkaç ön ayar düğmesi ve stil vardır. Mevcut düğmeleri seçebilir ve ayrıntılı önceden ayarlanmış seçeneklerle daha fazla düzenleyebilirsiniz. Ayrıca, düğme stilini düğme genişliği, yükseklik, metin boyutu, çizgi yüksekliği ve diğerleri ile de değiştirebilirsiniz.
Ayrıca, normal düğmeyi, yukarıdaki fare düğmesini ve seçilen düğme stilini de ayarlayabilirsiniz. Her biri arka plan rengi, sınırın genişliği ve rengi ve gölge seçeneğinde ayarlamaları içerir. İhtiyacınız olan tüm değişiklikleri oluşturun ve değişiklikleri kaydet’i tıklayın. 2.2. Ürün sayısının seçeneği Ayrıca, bir ürün listesi ekranı oluşturduğunuzda WooCommerce için ızgara eklentisi/liste görünümünü kullanarak ürün sayısının seçeneğini de ayarlayabilirsiniz. İlk olarak, ürün sayısını kullanmak için etkinleştirebilir veya devre dışı bırakabilirsiniz.
Etkinleştirirseniz, sayfa başına ürüne, ürün sayısının değerine ve ayırıcı değerine daha fazla giriş ekleyebilirsiniz. Ürün sayısının konumu burada da düğmenin kendisi ve onu görüntüleyecek yer seçeneği ile birlikte düzenlenebilir. 2.3. CSS/JavaScript Özel eklentisi, WooCommerce ürün listenizin bir listesini oluşturduğunuzda özel CSS veya JavaScript eklemenizi sağlar. Özel CSS ve JavaScript’inizi eklemek için özel bir komut dosyası kutusu vardır. JavaScript, ızgara listesi veya kümesi, çerezler, kafes/liste için seçilen düğmeler gibi çeşitli durumlarda eklenebilir. Ayrıca CSS Font harika dosyasını buradan devre dışı bırakabilir veya harika yazı tipi sürümünü seçebilirsiniz. Gereken özel CSS veya JavaScript ekledikten sonra değişiklikleri kaydetmeyi unutmayın. Mağaza sayfalarınızı önizlemenizi gördükten sonra, kafes ekranı ve liste ekranı arasında geçiş yapmak için düğmeyi görebileceksiniz. Ürün sayısı da burada görüntülenir ve ürün açıklaması da ürüne dahil edilmiştir. Aşağıdaki gösterimde gösterildiği gibi, Liste Ekran düğmesini tıklayarak ürün listesi ekranına geçebilirsiniz.
Müşterileriniz gerekirse kafes ekranına geri dönebilir. Kafes ekran düğmesine tıklarlar.
İşte burada! WooCommerce ürün listelerinin bir listesini bu şekilde oluşturabilir ve müşterilerinizin kafes ekranı ve listesi arasında geçiş yapmasına izin verebilirsiniz. Bonus: WooCommerce’de Katalog Modunu Etkinleştir size WooCommerce ürünlerinin bir listesini oluşturmanın en kolay yollarından birini verdik. Ürünlerinizi katalog web sitesinde göstermek için çok yararlıdır. Bununla birlikte, WooCommerce’deki katalog modunu etkinleştirmenize yardımcı olmak için size bir bonus olarak basit bir rehber vereceğiz. Bunu yapmak için, web sitenizdeki function.php dosyasına temanızın temel dosyalarından biri olan bazı kod görüntüleri eklemeniz gerekir. Bu yüzden lütfen bir sonraki adım için bir alt tema oluşturun ve WordPress temanızı güncellediğinizde değişiklikleriniz depolanması için web sitenizin bir yedeklemesini yapın. Yardıma ihtiyacınız varsa, bir çocuk teması oluşturmak için WordPress için Children’ın tema eklentilerinden birini de kullanabilirsiniz. Çocuğunuzun temasını etkinleştirdikten sonra, görünüm> tema dosyası düzenleyicisini açın ve function.php dosyasını temanızdan açın. Ardından, editörün sonuna kod görüntüleri eklemeye başlayabilir ve dosyayı güncelleyebilirsiniz.Tema dosyaları web sitenizin aktif temasına bağlıdır. Divi temasını burada kullandık, böylece editörünüz biraz farklı görünebilir. İlk olarak, tramvaya ekle düğmesini silmeniz ve ardından ürün fiyatını gizlemeniz gerekir. Bu nedenle, düzenleyiciye aşağıdaki kod görüntülerini eklemeniz gerekir. 1. Ekle düğmesini sepete silin, mağaza sayfası ve ürün sayfası için sepete ekle düğmesini gizlemek için aşağıdaki komut dosyasını kullanabilirsiniz. Bu yüzden, temanızdaki Functions.php dosyasına yapıştırın. Remove_action (‘wooocommerce_aft_shop_loop_item’, ‘wooocommerce_template_loop_add_to_cart’); remove_ace (‘woocommerce_single_product_summary’, ‘ Bu işlev, WooCommerce Ürün sayfası ve mağaza sayfası için arabaya ekle ekle silecektir. Ürünün satın alamamasını istiyorsanız, aşağıdaki kod görüntülerini de ekleyebilirsiniz. add_filter (‘wooocommerce_is_purchasable’, ‘__Rereturn_false’); Bu ayrıca “Devamını Oku” düğmesiyle arabaya ekle düğmesini de değiştirecektir. 2. Ürün fiyatlarınızı saklayın Ürün fiyatlarını WooCommerce’de çeşitli şekillerde gizleyebilir. Yönetici dışındaki tüm kullanıcılar veya herkes için gizlenebilirler. Ürünün fiyatını tüm kullanıcılar için gizlemek istiyorsanız, aşağıdaki komut dosyasını kullanın: add_filter (‘wooocommerce_get_price_html’, ‘quadLayers_remove_price’); QuadLayers_remove_price ($ fiyat) işlevi { dönüş ; } Veya yönetici dışındaki herkes için fiyatı gizlemek istiyorsanız, aşağıdaki snippet’leri kullanın: add_filter (‘wooocommerce_get_price_html’, ‘quadLayers_remove_price’; quadLayers_remove_price fonksiyonu ($ fiyat) { eğer (is_admin ()) $ fiyat döndürüyorsa;
dönüş ; }
Ayrıca, ürünü sadece gerekirse mağaza sayfasında da gizleyebilirsiniz.Yapmanız gereken tek şey aşağıdaki kod görüntülerini functions.php add_filter dosyasına eklemektir (‘wooocommerce_aft_shop_item_title’, ‘remove_wooocommerce_loop_price’, 2);
Remove_wooocommerce_loop_price () işlev {) {
(! Is_shop ()) tekrar;// Fiyatları yalnızca mağaza sayfasında gizle
Remove_action (‘wooocommerce_aft_shop_loop_item_title’, ‘wooocommerce_template_loop_price’, 10);
} İyi iş! Artık WooCommerce ürün listelerinin bir listesini yapabilir ve web sitenizde katalog modunu doğru bir şekilde etkinleştirebilirsiniz. Bir katalog modu görüntülemek için alternatif bir yöntem istiyorsanız, WooCommerce’deki katalog modunu etkinleştirmek için ayrıntılı bir kılavuzumuz var. Aynı şekilde, ekle düğmesini sepete silmek veya WooCommerce fiyatını gizlemek için biraz daha fazla bilgiye ihtiyacınız varsa, biz de tartıştık. Sonuç Çevrimiçi mağazanız için WooCommerce ürünlerinin bir listesini şimdi yapabileceğinizi umuyoruz. Müşterilerinizin ürün listesi ekranına geçmesine izin vermek için kolayca özel bir eklenti kullanabilirsiniz. Eklentiler, gerektiğinde diğer birçok ayar seçeneğiyle birlikte ızgara ekranına geri dönmelerine bile izin verir. Ayrıca, Web sitenizdeki ürün listesi ekranını görüntüleyebileceğiniz katalog modunu etkinleştirmek için mağaza sayfasını ayarlamak için birkaç temel adım sağladık. Diğer birkaç WooCommerce sayfasında değişiklik yapmak istiyorsanız, sepet sayfalarını, kategori sayfalarını veya hatta WooCommerce Checkut Manager gibi eklentilerle ödeme sayfalarını da ayarlayabilirsiniz. Peki, çevrimiçi mağazanızda sorunsuz bir ürün listesi ekleyebilir misiniz? Hiç denedin mi? Bize yorumlarda söyleyin. Bu arada, sizin için ilginç olabilecek makalelerimizden bazıları: WooCommerce Ürün Galerisi Nasıl Ayarlanır
Değiştir Bir sepette ürün yok
Wooocommerce ödemelerine ürün resimleri nasıl eklenir
