WooCommerce Mağaza Sayfası Şablonu Nasıl Özelleştirilir


WooCommerce mağaza sayfasının varsayılan tasarımı, işarete kadar değil. Mevcut WordPress temasının varsayılan arşiv.php şablonunu takip eder. Bu nedenle, varsayılan şablonu beğenmediyseniz tamamen sorun değil. Ancak soru, WooCommerce Mağaza Sayfası Şablonunun nasıl oluşturulacağı veya özelleştirileceğidir.

WooCommerce Mağaza Sayfası şablonunu oluşturmanın veya özelleştirmenin iki yolu vardır. İlk yol, ProductX WooCommerce Blocks gibi bir eklenti kullanarak bir mağaza şablonu oluşturmaktır. Veya temel kodlama bilginiz varsa bir şablon oluşturabilirsiniz.

İçindekiler gizle
1 WooCommerce Mağaza Sayfası şablonunu Programlı Olarak Oluşturun ve Özelleştirin
1.1 Adım-1. Bir Alt Tema Oluşturun
2 Adım-2. WooCommerce Mağaza Sayfası Şablonu Oluşturun
3 Adım-3. WooCommerce mağaza sayfası şablonunu özelleştirin
4 ProductX kullanarak WooCommerce Mağaza Sayfası Şablonu oluşturun ve özelleştirin
4.1 Adım-1. ProductX'i yükleyin
4.2 Adım-2. Builder Addon'u açın
4.3 Adım-3. Yeni bir WooCommerce Mağaza Sayfası Şablonu oluşturun
4.4 Adım-4. WooCommerce mağaza sayfası şablonunu özelleştirin
4.4.1 Başlangıç ​​Paketini İçe Aktarma
4.4.2 Blokları İçe Aktarma
4.4.3 Sorgu Oluşturucuyu Keşfedin
4.4.4 Ürün Filtresi Ekle
4.4.5 Sayfalandırma Ekle
4.4.6 Görüntü Çevirme Özelliği
4.4.7 İstek Listesi Özelliği
4.5 Hızlı Görünüm Özelliği
WooCommerce Mağaza Sayfası Şablonu oluşturmak için ProductX'in 5 Faydası
6 Sonuç

WooCommerce Mağaza Sayfası şablonunu Programlı Olarak Oluşturun ve Özelleştirin

Kodlama hakkında biraz bilginiz varsa, aşağıdaki adımları izleyerek kolayca bir WooCommerce Sayfası şablonu oluşturabilirsiniz:

Aşama 1. Bir Alt Tema Oluşturun

Sitemizin mevcut temasıyla oynayacağımız için ana tema yerine bir çocuk oluşturup özelleştirmeniz önerilir. Çünkü değişiklik yaparken sitenin yapısını bozabiliriz. Diğer bir problem ise tema dosyalarına özel kodlar eklersek yeni bir güncelleme ile kodlar kaldırılacaktır.

Öncelikle tema dosyalarınızın yolunda (wp-content/themes/) yeni bir klasör oluşturup ona bir isim vermelisiniz. Çocuğunuzun teması olacak. Klasörü açın ve bir metin dosyası oluşturun ve aşağıdaki kodu yapıştırın.

 Theme Name:Storefront Child Theme Theme URI:https://www.wpxpo.com/ Description:A Storefront child theme Author:WPXPO Author URI:https://www.wpxpo.com Template:storefront Version:1.0.0 Text Domain:storefrontchild

Şimdi başka bir metin dosyası oluşturun ve bunu function.php olarak adlandırın ve aşağıdaki kodu yapıştırın.

 /* enqueue scripts and style from parent theme */ function storefront_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'twenty-twenty-one-style' ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'storefront_styles');

Artık sitenizin görünüm/temalar bölümüne gittiğinizde ve vitrin ve vitrin alt temalarının iki versiyonunu görmelisiniz.

Adım 2. WooCommerce Mağaza Sayfası Şablonu Oluşturun

Artık alt temayı oluşturdunuz, sıra mağaza sayfası şablonunu oluşturmaya geldi. Bunun için sitenizin Cpanel'ine gidin ve alt tema dosyasını açın. Bir dosya oluşturun ve onu mağaza sayfası şablonu olacak olanarchive-product.php olarak adlandırın.

Aşama 3. WooCommerce mağaza sayfası şablonunu özelleştirin

Şablon boştur, bu nedenle sitenizin mağaza sayfasına göz atarsanız, o da boş olacaktır. İster kendi kodlarınızı yazarak şablonu oluşturabilirsiniz, isterseniz de başlangıç ​​olarak tek sayfalık şablondan kodları kopyalayıp yeni şablona yapıştırabilirsiniz.

Artık mağaza sayfasını önizleyebilirsiniz ve biraz bozuk göründüğünü fark edeceksiniz. Ama merak etmeyin aşağıdaki kod ile bu sorunu çözecektir.

 <?php echo do_shortcode ('[products limit="6" columns="2"]') ?>

Bu kodu doğru şekilde uygulamak için:

  • Şablonu düzenlemeye başlayın (archive-product.php).
  • ve <!– #main → arasındaki kodu yukarıdaki kodla değiştirin.

Kodları değiştirdikten sonra, nasıl göründüğünü kontrol etmek için mağaza sayfasını yenileyin. Ürünlerin koda göre organize bir şekilde görüntülendiğini göreceksiniz. Ayrıca ürün limitleri ve sütunlarının değerini değiştirerek ürün ve sütun sayısını artırabilirsiniz.

ProductX kullanarak WooCommerce Mağaza Sayfası Şablonu oluşturun ve özelleştirin

Geliştirici değilseniz veya kod yazmayı sevmiyorsanız, ikinci yöntem tam size göre. Bu yöntemde ProductX Gutenberg WooCommerce Blocks eklentisini kullanmanız gerekiyor.

Özel Arşiv, mağaza ve tek ürün sayfaları oluşturmak için özel WooCommerce Builder eklentisini sunar. Yeni bir WooCommerce Shop sayfası Şablonu oluşturmaya başlamak için aşağıdaki adımları izleyin.

Aşama 1. ProductX'i yükleyin

WooCommerce Builder eklentisini kullanmak istiyorsanız, WooCommerce sitenize ProductX eklentisini yüklemeniz gerekir. Bunun için:

  • Eklenti Bölümüne gidin ve yeni ekle düğmesine tıklayın.
  • ProductX'i arayın.
  • Yükle düğmesine tıklayın.
  • Kurulumdan sonra etkinleştir düğmesine tıklayın.
Install ProductX
ProductX'i yükleyin

Adım 2. Builder Addon'u açın

Eklentiyi yükledikten sonra WooCommerce Builder eklentisini açmanız gerekir. Bunun için:

  • Tüm Adonlar bölümüne gidin.
  • Oluşturucu Eklentisini açın.
Turn on WooCommerce Builder Addon
Builder Addon'u açın

Açtıktan sonra, Productx'in tüm bölümleriyle birlikte oluşturucu bölümünü göreceksiniz.

Aşama 3. Yeni bir WooCommerce Mağaza Sayfası Şablonu oluşturun

Şimdi WooCommerce mağaza sayfanız için yeni bir şablon oluşturma zamanı. Endişelenme, kod gerekmez. Sadece aşağıdaki adımları izleyin:

  • Oluşturucu Bölümüne gidin.
  • Yeni Ekle düğmesine tıklayın.
  • Oluşturucuya bir ad verin.
  • Mağaza olarak İnşaatçı türünü seçin.
  • Kaydet ve Yıldız düzenleme.
Create a new WooCommerce shop page template
Yeni bir WooCommerce mağaza sayfası şablonu oluşturun

Adım-4. WooCommerce mağaza sayfası şablonunu özelleştirin

Artık mağaza sayfasını sıfırdan özelleştirmeye başlayabilirsiniz. Bunun için mağaza başlangıç ​​paketlerini içe aktarabilir veya ürün blokları ekleyebilirsiniz.

ProductX, WooCommerce mağazasının ürünlerini sergilemek için iki tür ürün bloğu, ürün ızgaraları ve ürün kaydırıcıları sunar.

Başlangıç ​​paketleri, birden fazla ürün bloğunun birleşimidir. Böylece, kendi kombinasyonunuzu oluşturmak için birden fazla blok da ekleyebilirsiniz.

Başlangıç ​​Paketini İçe Aktar

Başlangıç ​​paketlerini içe aktarmak istiyorsanız, blok kitaplığına tıklayın ve başlangıç ​​paketlerini keşfedin. Hangisini eklemek istediğinize karar verin ve içe aktar düğmesine tıklayın. İçe aktar düğmesine tıkladıktan sonra başlangıç ​​paketi mağaza sayfasına eklenecektir. Sayfayı güncelleyin ve nasıl göründüğünü kontrol edin.

Starter Packs
Başlangıç ​​Paketleri

Blokları İçe Aktar

Başlangıç ​​paketini kullanmak istemiyorsanız, ürün ızgarasını da içe aktarabilir ve ürün kaydırıcı bloklarını ihtiyacınıza göre mağaza sayfasını özelleştirebilirsiniz. Bunun için artı simgesine tıklayın ve istediğiniz blokları içe aktarın.

Import Blocks
Blokları İçe Aktar

Bir bloğu içe aktardıktan sonra, ayarlar bölümünü kullanarak da özelleştirebilirsiniz. Blokların her biri için birden fazla özelleştirme seçeneği mevcuttur.

Sorgu Oluşturucu'yu Keşfedin

Sorgu Oluşturucu, ürün sayısını seçmek ve en çok görüntülenen, en çok satılan, en çok puan alan, rastgele vb. gibi birden çok kritere göre savunan ürün sınıflandırması için kullanılır. Ürünleri sıralamak için:

  • Ayarlara tıklayın.
  • Sorgu ayarlarına gidin.
  • Hızlı Sorgu'ya tıklayın.
  • Sıralama kriterlerini seçin.
Explore Query Builder
Sorgu Oluşturucu'yu Keşfedin

Ürün Filtresi Ekle

ProductX'in ürün filtreleme özelliği, kategori ve etiketlere göre Ajax destekli bir filtre sunar. Böylece ziyaretçiler, tüm sayfayı yeniden yüklemeden farklı ürün türlerini keşfedebilir.

Ürün filtresini eklemek için:

  • Genel ayarlara gidin.
  • Filtre seçeneğini açın.
  • Filtre seçeneğine gidin.
  • Filtre türü kategorisi/etiketi seçin.
  • Belirli veya birden çok kategori/etiket seçin.
Add Product Filter
Ürün Filtresi Ekle

Ayrıca indirimde, en çok oy alan, en çok oy alan, öne çıkan, yeni gelen vb. kategoriler veya etiketlerle birlikte birden fazla eylem değeri ekleyebilirsiniz.

Özelleştirme seçenekleri:

  • Hizalama seçimi.
  • Filtrelenebilir metin için istenen renkler.
  • Sınır yarıçapı, kenar boşluğu ve dolgu.
  • Açılır metin rengi.
  • Açılan vurgulu rengi.

Sayfalandırma Ekle

ProductX ayrıca, tüm sayfayı yeniden yüklemeden ürün sayısını artırmak için ajax destekli sayfalandırma sunar. Sayfalandırma eklemek için:

  • Genel ayarlara gidin.
  • Sayfalandırma seçeneğini açın.
  • Sayfalandırma Türü'nü seçin.
Add Pagination
Sayfalandırma Ekle

Özelleştirme seçenekleri:

  • Sayfalandırma Metin Rengi.
  • Arka plan rengi.
  • Kenarlık yarıçapını, kenar boşluğunu ve dolguyu ayarlama.

Görüntü Çevirme Özelliği

Ürün Resmi Flipper Eklentisi, WooCommerce mağazalarına resim çevirme özelliklerini eklemenize yardımcı olur. Böylece ziyaretçiler bir görselin üzerine geldiğinde ürün görseli başka bir görsele çevrilecektir. Varsayılan olarak, ürün resmi, ürün galerisi resimlerinin ilk resmine çevrilecektir. Ancak, istediğiniz görüntüyü de seçebilirsiniz.

flip image
Çevirme resmi

Bu özelliği eklemek için:

  • ProductX'in tüm Eklentiler bölümüne gidin.
  • Flip Image Addon'u açın.
  • İstenen ürün blokları için Görüntü çevirmeyi açın.
  • Tek bir ürünü düzenlerken istediğiniz resmi ekleyin.

İstek Listesi Özelliği

ProductX, WooCommerce mağazasına iki tür istek listesi özelliği eklemek için bir istek listesi eklentisi de sunar. Böylece ziyaretçiler istedikleri ürünleri bir listeye ekleyebilir ve daha sonra satın alabilirler.

Wishlist
istek listesi

Bu özelliği eklemek için:

  • ProductX'in Tüm Adons bölümüne gidin.
  • İstek Listesi Eklentisini açın.
  • İstek Listesi sayfasını oluşturun ve yapılandırın.
  • Genel ayardan İstek Listesini açın.
  • Wislity türünü seçin Açılır/İstek Listesi Sayfasına Yönlendirin.

Özelleştirme seçenekleri:

  • Wislist Düğme rengini seçin
  • Düğme arka plan rengini seçin

Hızlı Görünüm Özelliği

ProductX'in Hızlı Görünüm Eklentisi, WooCommerce mağazanıza ürün hızlı görünüm özelliklerini eklemenize yardımcı olur. Böylece ziyaretçiler, Mağaza/Arşiv sayfalarından ayrılmadan fareyle üzerine gelindiğinde ürünlerin temel detaylarını görebilirler.

How to Customize WooCommerce Shop Page Template 1

Bu özelliği eklemek için:

  • ProductX'in Tüm Eklentiler bölümüne gidin
  • Hızlı Görünüm Eklentisini açın
  • Genel görünümden Hızlı görünüm özelliğini etkinleştir

Özelleştirme seçenekleri:

  • Metin Rengi
  • vurgulu renk
  • Arka plan rengi
  • Dolguyu Ayarla

WooCommerce Mağaza Sayfası Şablonu oluşturmak için ProductX'in Faydası

Hepsi bir arada Çözüm: ProductX Gutenberg WooCommerce Blokları, özelleştirilmiş bir WooCommerce mağazası oluşturmak için hepsi bir arada bir çözümdür. Bu nedenle, bir Mağaza sayfası şablonu oluşturmak için kullanırsanız; başka şekillerde de yararlanabilirsiniz.

Bir çevrimiçi mağaza için gerekli tüm özellikleri sunar. Böylece, barındırma kaynaklarından tasarruf sağlayan 5-7 temel eklentiyi ortadan kaldırabilirsiniz.

Kodlama Bilgisi Yok: Daha önce de belirttiğim gibi ProductX eklentisini kullanırken kod yazmanıza gerek yok. Bir Mağaza sayfası veya Tek Ürün sayfaları için şablonlar oluşturmak istediğinizde, her şeyin yapılması kolay ve özelleştirilebilir.

Konuşma Oranı: ProductX eklentisinin tüm özellikleri ve Pro Eklentileri, dönüşüm oranını artırmak için özenle hazırlanmıştır. Ancak, daha iyi bir müşteri deneyimi sağlamak için bunları etkili bir şekilde kullanmanız gerekir.

Gutenberg Ready: Gutenberg editörünün kullanımı hızla artıyor. Bu varsayılan WordPress düzenleyici, Elementor, Divi, Oxygen, vb. gibi popüler sayfa oluşturucularla zaten rekabet ediyor. Son zamanlarda, Twenty Twenty Two temasının tam site düzenleme özelliklerini tanıttılar.

Dolayısıyla, Gutenberg'e hazır olmak, ProductX kullanıcıları için büyük bir avantajdır. WordPress'in birçok büyük oyuncusu zaten söylediği için, Gutenberg WordPress'in geleceğidir.

Ortalama Sipariş Değeri: Ortalama sipariş değeri, her alışverişin ortalama harcama miktarını ifade eder. E-Ticaret sitelerinin toplam gelirini doğrudan etkiler. Bu nedenle, tüm çevrimiçi mağaza sahipleri her zaman onu artırmaya çalışır.

ProductX, ortalama sipariş değerini artırmak için WooCommerce mağazanızı optimize etmenize yardımcı olabilir.

Düzenli Güncellemeler: Diğer tüm boş eklentiler gibi, ProductX de WordPress güncellemeleriyle güncel olmak için düzenli güncellemeler sağlar. ProductX ekibi ayrıca hata ve hata düzeltmeleri içeren güncellemeler sağlar.

Çözüm

Hepsi WooCommerce Mağaza Sayfası Şablonu oluşturmak ve özelleştirmekle ilgili. Şimdi, kod yazarak veya yazmadan şablonunuzu oluşturmaya başlayın. Hala herhangi bir zorlukla karşılaşırsanız, aşağıya yorum yapmaktan çekinmeyin.

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir