Wooocommerce’a hızlı bir ekran nasıl eklenir
Sitenize hızlı bir ekran özelliği eklemek ister misiniz? Woocommerce mağazanızdaki hızlı görüntüleme düğmesini nasıl ekleyeceğinizi ve ayarlayacağınızı öğrenin. Her Woocommerce mağazasında, müşteriler ürünler hakkında ürünler hakkında ayrıntılı bilgileri ürün sayfasındaki görüntüleyebilir. Ancak, varsayılan mağaza sayfasındaki ürüne eklenen açıklamaları, varyasyonları ve diğer bilgileri göremezler. Alıcı mağaza sayfasındayken, ürün hakkında daha fazla bilgi görmek için ürün resmini veya ürün sayfasını açmak için bağlantıyı tıklamalıdır. Bu ideal değildir, çünkü satın alma işlemine adımlar ekler ve müşteriler ürününüzü izlemeye devam etmek istiyorsa, mağaza sayfasına geri dönmelidir.
Ancak, WooCommerce Shop sayfasına hızlı bir görüntüleme düğmesi ekleyebilir ve kullanıcı deneyimini geliştirebilirsiniz. Bu şekilde, alıcı mağaza sayfasından ayrılmadan bir ürün hakkındaki tüm bilgileri görebilecektir. Düğme ekranının hızlı bir şekilde yapıldığına ve mağazanıza nasıl ekleneceğine daha yakından bakalım. Hızlı görüntüleme düğmesi nedir? Hızlı Ekran düğmesi, müşterilerin ürün ayrıntılarını doğrudan mağaza sayfasında ve ilgilendikleri her öğenin ürün sayfasını açmak zorunda kalmadan görmelerini sağlar. Bu şekilde, alıcılar satın alma deneyimlerini artırmak için ürün ürünlerini mağaza sayfalarından gezebilirler. Kullanıcı Hızlı Görünüm düğmesini tıkladığında, açılır, aynı sayfadaki ürünle ilgili tüm ilgili bilgileri görüntülemek için açılır. Mağaza sayfasını yeniden yüklemeye veya kullanıcıyı başka bir sayfaya yönlendirmeye gerek yok.
WooCommerce Shop sayfasına hızlı bir görüntüleme düğmesi nasıl eklenir, mağazanıza hızlı bir görüntüleme 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ü olmasına rağmen, hızlı bir görüntüleme düğmesi eklemek için premium bir sürüme ihtiyacınız var. Yalnızca 19 USD (bir kerelik ödeme) ile başlayan 3 premium paketten birini seçebilirsiniz. İlk doğrudan kontrolü yükleyip etkinleştirin, doğrudan ödeme yükleyin. Burada ücretsiz bir sürümünü ve bu bağlantının premium sürümlerinden birini almanız gerekir. Hızlı ekran özelliğinin kilidini açmak için eklentinin ücretsiz ve premium sürümlerini yüklemeniz ve etkinleştirmeniz gerektiğini unutmayın. Her ikisini de yükledikten sonra WooCommerce> Doğrudan Ödeme> Arşivleri Açın ve Hızlı Görünüm Ekle düğmesi seçeneğini etkinleştirin.
Li.product simgesinin rengini düzenleyin .qlwcdc_quick_view.button {color: kırmızı; } Yuvarlak bir limit ekleyin Li.product .qlwcdc_quick_view.button {border-radius: 5px; } Görüntüyü li.product düğmesi olarak kullanın .qlwcdc_quick_view.button {genişlik: 75px; İçerik: url (‘https://pbs.twimg.com/profile_images/476389199621275648/g6c2zoe__400x400.jpeg’); } Simgesini li.product .qlwcdc_quick_view.button {görünürlük: gizli; } li.product .qlwcdc_quick_view.button: Önceden {görünürlük: görünür; İçerik: “Hızlı Görüntü Metin”; Beyaz renk; Arka plan: Siyah; Dolgu: 10 piksel; }
Yüzen li.product .qlwcdc_quick_view.button: hover {color: black; Arka plan: sarı; } 3.2) Pop-up sermayesini düzenleyin Hızlı görüntülemek için, hızlı ekranın açılır sermayesini ayarlamak için bazı kodlara bakalım. Arka plan rengini değiştir #qlwcdc_quick_view_modal> div> div> div.modal-body {arka plan: greeenyllow; } Meta ürününü gizle #qlwcdc_quick_view_modal> div> div> div.modal-body> div> div. Özet. Product_meta {ekran: yok; } Miktarı gizleyin ve #QLWCDC_QUICK_VIEW_MODAL TROLLEY> div> div> div.modal-body> div> div.summary> form.cart {ekran: none; } #qlwcdc_quick_view_modal> div> div> div.modal body> div> div> div } Woocommerce’deki hızlı görüntüleme düğmesinin çeşitli yönlerini ayarlamak için farklı bir komut dosyası gördük. CSS ile neler yapabileceğiniz hakkında daha fazla bilgi edinmek istiyorsanız, bu kılavuza bakın. Örnek CSS komut dosyası, WooCommerce’deki hızlı ekrana nasıl ekleyeceğinizi ve temel ayarlamaları yapacağınızı öğrendikten sonra, daha ileri gidelim. Aşağıda Hızlı Ekran düğmesini düzenlemek ve mağaza sayfanıza biraz tat eklemek için üç örnek bulacaksınız. Özel bir simgeli LI.Product .qlwcdc_quick_view.button {görünürlük: gizli; } li.product .qlwcdc_quick_view.button: Önceden {görünürlük: görünür; yazı tipi tarzı: normal; Yazı tipi ailesi: “Font Awesome 5 Free”; İçerik: “002”; Beyaz renk; Arka plan: Siyah; Dolgu: 15px; Border-Radius:%50; }
Li.Product -Style Metin Düğmesi .QLWCDC_QUICK_VIEW.Button {Görünürlük: Hidden; } li.product .qlwcdc_quick_view.button: Önceden {görünürlük: görünür; yazı tipi tarzı: normal; İçerik: “Görüntüle”; Siyah renk; Arka plan: #eeeeee; Dolgu: 8px 18px; Sınır: 3px katı kahverengi; Border-Radius: 15px 3px; } Görüntüyü li.product düğmesi olarak kullanmak> a.button.add_to_cart_button {dip: 30px; Pozisyon: göreceli; } li.product .qlwcdc_quick_view.button {arka plan: şeffaf; Genişlik: 85px; İçerik: URL (‘https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/quick-look-droplelelelelelet-icon.png’); }
Sonuç Genel olarak, hızlı bir görüntüleme düğmesi ekleyerek, müşteri satın alma deneyiminizi geliştireceksiniz. Görmek istedikleri her öğenin ürün sayfasını açmak zorunda kalmadan ürünün ana ayrıntılarını doğrudan mağaza sayfasında görebileceklerdir. WooCommerce’e hızlı bir görüntüleme düğmesi eklemenin en kolay ve daha rahat yolu, doğrudan ödeme eklentisini kullanmaktır. Bu araç, mağaza sayfasına çeşitli tıklamalarda hızlı bir görüntüleme düğmesi eklemenizi sağlar. Ardından, daha ileri gitmek ve düğmeyi ve açılır pencereyi ayarlamak istiyorsanız, biraz CSS kullanabilirsiniz.
Mağazanıza hızlı bir görüntüleme düğmesi eklemenin başka yollarını biliyor musunuz? Rehberimizi takip etmekte bir sorununuz var mı? Bize aşağıdaki yorumlar bölümünde anlatın ve size yardımcı olmak için elimizden geleni yapacağız. Mağazanızı nasıl ayarlayacağınız hakkında daha fazla bilgi için aşağıdaki yönergeleri okumanızı öneririz:
