Elementor kullanarak özel wooCommerce ürün sayfaları nasıl oluşturulur

Yayınlanan: 2025-02-19

Gü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

Geçiş yapmak

Ö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

Dashboard

WordPress kontrol panelinize giriş yapın.

Adım 2) Eklentilere gidin ve yeni eklenti ekle'ye tıklayın

Add New Plugin 1

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

Search Elementor

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

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

Upload Plugin

Sol üste gidin ve eklentiyi yükleyin.

Adım 3) Elemento eklentilerini yükleyin

Upload Elemento Addons

Ş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

Add New Plugin

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

Edit With Elementor page

Ü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.

Edit with Elementor Page 2

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

2 Side Container Steps

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.

Elementor Image

Ş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.

Elementor Heading

Ü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.

Elementor Text Editor

Ü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.

Text Editor Short Description

Ş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.

Elemento Addons Add to Cart

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.

Elemento Addons Add to Cart Settings

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.

SKU ID

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.

Elementor Social Icons

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.

Elementor Social Icons Setting

Aynı şekilde, başka bir şeyi buraya ekleyebilirsiniz.

Ana bir açıklama yapmak istiyorsanız, metin düzenleyicisini ekleyin ve açıklamayı yazın.

Elementor Social Icons Description

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.

Elemento Addons Product Slider

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

Product Page Preview 1

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.

Elemento Addons Widgets

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

Elemento Products

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

Elemento Products Content

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

Elemento Products Style

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.

Elementor Page Publish

Şimdi sitenizi önizleyin .

Elemento Products Preview

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.

Single Product Page 1

İş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