Elementor kullanarak özel wooCommerce ürün sayfaları nasıl oluşturulur
Yayınlanan: 2025-02-19Günümüzde Elementor, en üst düzey sayfa oluşturucular arasında. Sayfa oluşturucuların özelliklerini kullanarak bir web sitesi oluşturmak çok kolaydır.
Ancak, önceden hazırlanmış tasarımlar sağlar, ancak kendi başınıza oluşturmak istiyorsanız, Elementor'ın sürükle ve bırak oluşturucu her işlemi çok kolaylaştırır. Yani bu bir kazan-kazan durumu.
Bu arada, ürün sayfaları hemen hemen her e -ticaret sitesinde bulunur, ancak site sahibi bir ürünü farklı şekilde göstermesi gerektiğinde özel bir WooCommerce ürün sayfası oluşturulur.
Siteyi tasarlarken özel WooCommerce sayfaları oluşturabilirsiniz.
Ve bu blogda, WordPress web sitesinde Elementor Page Builder'ı kullanarak özel WooCommerce ürün sayfalarını nasıl oluşturacağımızı göreceğiz.
İçindekiler
Özel WooCommerce Ürün Sayfaları oluşturmak için hangi araçları ihtiyacımız var
Bu blogda Elementor eklentisine ihtiyacımız olacak. Buna ek olarak, Elemento Addons'a da ihtiyacımız olacak.
Elementor, sayfa oluşturma işlemini kolaylaştırır ve Elemento Addon, widget'lara widget ve ekstra işlevler ekleyerek Elementor'un gücünü genişletmeye yardımcı olur.
Elemento Addons, operasyonları ve pürüzsüzlükleri nedeniyle kullanımı yasadışı hissettiren bazı widget'lara sahiptir.
Öyleyse şimdi başlayalım
Elementor kullanarak özel wooCommerce ürün sayfaları nasıl oluşturulur
İlk olarak, her iki eklentiyi de yükleyelim.
Elementor eklentisini yükleme
Adım 1) Gösterge Tablonuzu Açın

WordPress kontrol panelinize giriş yapın.
Adım 2) Eklentilere gidin ve yeni eklenti ekle'ye tıklayın

Gösterge tablosunda, sol tarafta birkaç menü görebilirsiniz. Eklentilere gidin ve yeni eklenti ekleyin.
Adım 3) Arama çubuğuna gidin ve Elementor'u arayın

Bu sayfada eklentileri bulacaksınız. Arama çubuğuna gidin ve Elementor'u arayın.
Adım 4) Elementor'u yükleyin ve etkinleştirin
Elementor'u aradıktan sonra, eklentinin listesinde görünecektir. Yükleme düğmesine tıklayın, kurulumdan sonra Elementor eklentisini etkinleştirmek için Etkinleştir düğmesine tıklayın.
Elemento Addons eklentisini yükleme
İlk olarak, TemaHunk'tan Elemento eklentilerini indirin.

Elemento Addons sayfasına gidin ve eklentiyi satın alın. Elemento eklentilerini almak için bir yardım eline ihtiyacınız varsa bu öğreticiyi izleyebilirsiniz.
Adım 1) Gösterge tablonuzu açın ve eklentinin sayfasına gidin
Aynı adımları tekrarlayın ve eklentinin sayfasına ulaşın.
Adım 2) Yükle Yükle'ye tıklayın

Sol üste gidin ve eklentiyi yükleyin.
Adım 3) Elemento eklentilerini yükleyin

Şimdi yüklemeye tıklayın ve ardından eklentiyi etkinleştirin .
Her iki eklenti de kuruldu ve şimdi daha fazla ilerleyebiliriz.
WooCommerce Özel Ürün Sayfası Oluşturma
Adım 1) Yeni bir sayfa oluşturun

Gösterge tablosuna gidin ve sayfalara tıklayın, ardından yeni sayfa ekle'ye tıklayın.
Adım 2) 'Elementor ile Düzenle' üzerine tıklayın

Üst çubukta, Elementor ile Düzenle düğmesini bulacaksınız. Üzerine tıklayın.
Bundan sonra sayfa Elementor ile açılacak. Bu sayfadaki Elementor Widget'larına erişebilir ve kullanabilirsiniz.

İki bölmeye ihtiyacımız olacak, bu yüzden önce iki tarafı olan bir konteyner alın.

Bir ürün sayfasında, koyacağımız ilk ve en önemli şeylerden biri görüntüdür. Görüntü widget'ı bulun ve sol kabın içine koyun.

Şimdi ürünün görüntüsünü ayarlayın.
Şimdi sağ tarafa gel. Başlığa girmek için arayın ve ikinci kabın içine yerleştirin.

Ürünün adını başlığa girin.
Aynı şekilde, ürünün fiyatlandırmasını yazacağız. Fiyatlandırmayı yazmak için başlığın altına bir metin düzenleyicisi widget'ı ekleyin ve ürünün fiyatlandırmasını oraya yazın.

Ürün sayfalarında, ürünün kısa bir açıklaması vardır. Eklemek için metin düzenleyicisini tekrar ekleyin ve ürünün kısa bir açıklamasını yazın.


Şimdi sepet düğmesini ekleme zamanı. Bu kez Elemento Addons'ın sepet widget'ını kullanacağız çünkü daha fazla özellik ve işlevselliklere sahip.
Sepet ekle'yi arayın ve kabın içine yerleştirin.

Sepet düğmesi ayarlarında, ürün adını arayın ve Ürünler bölümündeki ürünü seçin. Bundan sonra, kullanıcı sepet düğmesini tıkladığında, doğrudan sepete eklenir.

SKU kimliğini eklemek istiyorsanız, bunu diğer widget eklediğimiz gibi yapabilirsiniz. Burada metin düzenleyicisini ekleyin ve ürünün SKU'sunu yazın.

Bir ürün sayfasının önemli kısımlarından biri sosyal paylaşım düğmelerine sahip olmaktır. Sosyal Paylaş düğmesini bu sayfaya da ekleyebilirsiniz.
Sosyal simgeleri arayın ve sayfaya koyun.

Daha fazla sosyal tutma düğmesi eklemek istiyorsanız, yeni ekle ve yeni düğmeye ekleyin. Simgeyi değiştirmek ve bağlantıyı ve rengi düzenlemek gibi birkaç değişiklik yapabilirsiniz.

Aynı şekilde, başka bir şeyi buraya ekleyebilirsiniz.
Ana bir açıklama yapmak istiyorsanız, metin düzenleyicisini ekleyin ve açıklamayı yazın.

Konteynerin dışına organize ve sistematik görünen ana açıklamayı ekledim.
Kullanıcılar bir ürün sayfasını ziyaret ettiklerinde, ilgili ürünleri de kontrol edebilmeleri için gösterebilirsiniz.
Bu nedenle, ilgili ürünü eklemek için önce bir başlık ekleyin ve Elemento Addons'ta ürün kaydırıcısını arayın.

Özel WooCommerce ürün sayfasını bu şekilde ekleyebilirsiniz. Şimdi sayfanın önizlemesini görme zamanı.

Size söylemeliyim, birkaç basit adımda bir ürün sayfası da yapılabilir. Bunun için Elemento Addons Widget'a ihtiyacımız olacak.
Bakalım nasıl yapılır.
Özel İlgili Ürün Sayfasını Kullanın
Elementor ile düzenle tıkladıktan sonra, Elementor widget'larını bulacağınız sol tarafa gidin.
Aşağı kaydırın ve Elemento Addons'a gidin.

Temalı ön ürünleri bulun, widget'ı sürükleyin ve sayfaya bırakın.

Widget'ı düşürdüğünüzde, özelleştirme ayarı sol çubukta görünecektir. Eklentinin ayarlarını ve görünümünü düzenleyebilirsiniz.

Ancak sitenin görünümünü değiştirmek istiyorsanız, içeriğin yanı sıra stiline tıklayın.

Stil bölümü, eklentinin renklerini, tipografisini ve diğer ayarlarını değiştirmeye izin verir.
Tüm değişiklikleri yaptıktan ve sayfayı ayarladıktan sonra Yayınla'yı tıklayın.

Şimdi sitenizi önizleyin .

Burada görebilirsiniz, özel WooCommerce ürün sayfasında, Elemento Addons'ın ürün widget'ının yardımıyla ürünleri ekledik.
Ürünler sayfada gösterilmiştir. Tek ürün sayfasını önizleyelim.

İşte bu, özel WooCommerce ürün sayfası oluşturuldu.
SSS
S. Elemento Addons'ın ürün widget'ına duyarlı mı?
Ans. Evet, ürün widget'ı tüm cihazlara% 100 yanıt veriyor. Kullanıcılar siteye erişebilir ve istedikleri herhangi bir cihazda en iyi görünümü alabilir.
S. Elemento Addons ürünleri widget'ında gösterilecek ürünler nasıl seçilir?
Ans. Ürünleri göstermenin çeşitli yolları vardır. Ürünleri kategoriye göre, tarih eklenmesine vb. Gösterebilirsiniz. Ancak, bir ürün widget'ı eklerseniz, ürünleri otomatik olarak getirecektir.
Çözüm
Bu yüzden Elementor kullanarak özel WooCommerce ürün sayfasının nasıl ekleneceğini öğrendik. Elemento Addons eklentisini de kullanırken, ürün eklemeyi ve sayfada göstermeyi çok kolay hale getirdi.
Elemento Addons'ın web sitesi oluşturma için çok fazla eklenti var. Sadece widget'lar için değil, aynı zamanda widget'ların özellikleri için de bilinir.
Belirli özellikleri tanıtmak için özel WooCommerce ürün sayfaları gerekebilir. Genellikle, şablonların böyle sayfaları yoktur, bu nedenle sayfayı kendi başımıza oluşturmak gerekir.
Umarım bu blog size yardımcı olur. Yine de, herhangi bir sorunuz veya öneriniz varsa, yorum bölümünde bana bildirin.
YouTube kanalımıza abone olabilirsiniz, oraya harika içerik yüklüyoruz, ayrıca bizi Facebook ve Twitter'da takip ediyoruz.
Daha fazla makale keşfedin
- WordPress Oturum Açma URL'si (Özel URL) kolay adımlarda nasıl değiştirilir
- WordPress'te özel 404 hata sayfası nasıl oluşturulur (Kolay Kılavuz)
- Daha kolay ürün keşfi için wooCommerce'a özel bir arama çubuğu nasıl eklenir