WooCommerce'de hızlı görünüm nasıl eklenir
Yayınlanan: 2020-11-24Hızlı görüntüleme özelliğini sitenize eklemek ister misiniz? WooCommerce mağazanızda bir hızlı görünüm düğmesini nasıl ekleyeceğinizi ve özelleştireceğinizi öğrenin.
Her WooCommerce mağazasında müşteriler, ürün sayfalarında ürünlerle ilgili ayrıntılı bilgileri görebilir. Ancak, varsayılan mağaza sayfasında ürüne eklenen açıklamayı, varyasyonları ve diğer bilgileri göremezler. Alışveriş yapanlar alışveriş sayfasındayken, o ürün hakkında daha fazla bilgi görmek için ürün sayfasına gitmek için ürün resmine veya bağlantıya tıklamaları gerekir. Bu ideal değil çünkü satın alma sürecine bir adım daha ekliyor ve müşteriler ürünlerinize göz atmaya devam etmek istiyorlarsa alışveriş sayfasına geri dönmek zorundalar.
Ancak, WooCommerce mağaza sayfasına bir hızlı görünüm düğmesi ekleyebilir ve kullanıcıların deneyimini iyileştirebilirsiniz . Bu şekilde, alışveriş yapanlar , alışveriş sayfasından ayrılmadan bir ürünle ilgili tüm bilgileri görebilecekler. Hızlı bir düğme görünümünün ne işe yaradığına ve mağazanıza nasıl ekleyeceğinize daha yakından bakalım.
Hızlı görünüm düğmesi nedir?
Hızlı bir görünüm düğmesi, müşterilerin ilgilendikleri her bir ürünün ürün sayfasını açmalarına gerek kalmadan bir ürünün ayrıntılarını doğrudan mağaza sayfasında görmelerine olanak tanır . Bu şekilde, alışveriş yapanlar, alışveriş sayfasındaki ürünler arasında gezinerek satın alma deneyimi. Kullanıcı hızlı görüntüleme düğmesine tıkladığında, ürünle ilgili tüm bilgileri aynı sayfada görüntüleyen bir açılır pencere açılır. Mağaza sayfasını yeniden yüklemeye veya kullanıcıları başka bir sayfaya yönlendirmeye gerek yoktur.
WooCommerce mağaza sayfasına hızlı görünüm düğmesi nasıl eklenir
Mağazanıza hızlı görünüm düğmesi eklemenin en kolay yolu bir eklenti kullanmaktır. Bu demo için, WooCommerce için en iyi ödeme eklentilerinden biri olan Direct Checkout'u kullanacağız. Direct Checkout'un ücretsiz bir sürümü olsa da, hızlı görüntüleme düğmeleri eklemek için premium sürüme ihtiyacınız olacak. Sadece 19 USD'den başlayan 3 premium plandan herhangi birini seçebilirsiniz (tek seferlik ödeme).
Direct Checkout'u yükleme ve etkinleştirme
İlk olarak, Direct Checkout'u yükleyin. Buradan ücretsiz sürümü ve bu bağlantıdan da premium sürümlerden birini edinmeniz gerekiyor. Hızlı görüntüleme özelliğinin kilidini açmak için eklentinin hem ücretsiz hem de premium sürümünü yüklemeniz ve etkinleştirmeniz gerektiğini unutmayın. Her ikisini de yükledikten sonra, WooCommerce > Doğrudan Ödeme > Arşivler'e gidin ve Hızlı görünüm ekle düğmesi seçeneğini etkinleştirin. 
Bu bölümde, Sepete ekle düğmesinin varsayılan metnini de değiştirebilirsiniz. Bunun hızlı görünüm düğmesinin davranışını hiçbir şekilde etkilemeyeceğini unutmayın. Bu kadar! WooCommerce mağaza sayfanıza bir hızlı görünüm düğmesi eklediniz ! StoreFront temasını kullanıyorsanız düğme şu şekilde görünür: 
Ve hızlı görünüm düğmesine tıkladığınızda, kalıcı açılır pencere belirecek ve şuna benzer görünecektir: 
Tüm ürün bilgilerinin hızlı görünüm açılır penceresinde görüntülendiğini unutmayın. Müşterilerin doğrudan açılır pencereden sepetlerine ürün eklemelerine olanak tanıyan Sepete ekle düğmesi bile orada. Şimdi, bir adım daha ileri gidelim ve hızlı görünüm düğmesini biraz CSS ile nasıl özelleştireceğimizi görelim.
WooCommerce hızlı görünümü nasıl özelleştirilir
Bu bölümde, biraz CSS kullanarak hem hızlı görünüm düğmesini hem de hızlı görünüm modal açılır penceresini nasıl özelleştireceğinizi öğreneceksiniz. CSS komut dosyaları birçok görev için çok kullanışlıdır, bu nedenle yeni başlamış olsanız bile birkaç temel CSS kavramını öğrenmeye değer. Şimdi, hem hızlı görünüm düğmesinin hem de hızlı görünüm modal açılır penceresinin farklı öğelerinin nasıl özelleştirileceğine bir göz atalım.
Aşağıdaki kodları alt temanın style.css dosyasına veya tema özelleştiricinin Ek CSS kutusuna yapıştırmanız gerektiğini unutmayın. Bir alt temanız yoksa, bir tane oluşturmak veya bu eklentilerden birini kullanmak için bu gönderiye göz atabilirsiniz.
3.1 Hızlı görünüm düğmesini düzenleyin
Hızlı görünüm düğmesinin genişliğini değiştirin
li.product .qlwcdc_quick_view.button{
width: 40%;
}
Arka plan rengini düzenleyin
li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}
Simge rengini düzenleyin
li.product .qlwcdc_quick_view.button{
color:red;
}
Yuvarlak kenarlıklar ekle
li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}
Bir görüntüyü düğme olarak kullanma
li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}
Simgeyi metinle değiştir
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}
Fareyle üzerine gelme efekti ekle
li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}
3.2) Hızlı görünüm kalıcı açılır penceresini düzenleyin
Şimdi, hızlı görünüm modal açılır penceresini özelleştirmek için bazı kodlara bakalım.
Arka plan rengini değiştir
#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}
Ürün metasını gizle
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}
Miktarı gizle ve sepete ekle
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
}#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{ WooCommerce'deki hızlı görüntüleme düğmesinin farklı yönlerini özelleştirmek için farklı komut dosyalarına bir göz attık. CSS ile neler yapabileceğiniz hakkında daha fazla bilgi edinmek istiyorsanız bu kılavuza göz atın.
display:none;
}
Örnek CSS komut dosyaları
Artık WooCommerce'deki hızlı görünüme nasıl temel özelleştirmeler ekleyeceğinizi ve yapacağınızı öğrendiğinize göre, bir adım daha ileri gidelim. Aşağıda, hızlı görüntüleme düğmesini düzenlemek ve mağaza sayfanıza biraz lezzet katmak için üç örnek bulacaksınız.
Özel simgeli daire düğmesi
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}
Tarz metin düğmesi
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}
Bir görüntüyü düğme olarak kullanma
li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}
Çözüm
Sonuç olarak, bir hızlı görünüm düğmesi ekleyerek müşterilerinizin satın alma deneyimini iyileştireceksiniz. Görmek istedikleri her ürünün ürün sayfasını açmak zorunda kalmadan, ürünün ana detaylarını doğrudan mağaza sayfasında görebilecekler . WooCommerce'de hızlı görünüm düğmesi eklemenin en kolay ve kullanışlı yolu, Doğrudan Ödeme eklentisini kullanmaktır. Bu araç, birkaç tıklamayla mağaza sayfasına hızlı görüntüleme düğmesini eklemenizi sağlar. Ardından, bir adım daha ileri gitmek ve hem düğmeyi hem de açılır pencereyi özelleştirmek istiyorsanız, biraz CSS kullanabilirsiniz.
Mağazanıza bir hızlı görünüm düğmesi eklemenin başka yollarını biliyor musunuz? Rehberimizi takip ederken herhangi bir sorun yaşadınız mı? Aşağıdaki yorumlar bölümünde bize bildirin, size yardımcı olmak için elimizden geleni yapacağız.
Mağazanızı nasıl özelleştireceğiniz hakkında daha fazla bilgi için aşağıdaki kılavuzlara göz atmanızı öneririz:
- WooCommerce Mağaza Sayfası nasıl özelleştirilir
- WooCommerce'de Sepete Ekle düğmesi nasıl özelleştirilir
- WooCommerce ödeme sayfasını düzenleyin