Ana İçeriğe Geç

WooCommerce “Sepete Ekle” düğmesi nasıl özelleştirilir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

WooCommerce düğmelerinin rengini değiştirmek için, varsayılan style.css düğme dosyasını değiştirmemiz veya değiştirmemiz gerekiyor. Bunu yapmak için, bir eklememiz gerekecek özel CSS kodu bizim için çocuğun WordPress teması.

Bunu yapmanın iki yolu vardır:

  • Alt tema style.css dosyasına özel bir CSS ekleyin
  • Web sayfalarınıza özel CSS kodu eklemek için bazı eklentileri kullanın.

1 Adım: WordPress Basit Özel CSS üzerine eklentisini yükleyin ve etkinleştirin

CSS kodunu bir sayfanın sayfalarına enjekte etmek için bir WordPress eklentisi kullanacağız. WooCommerce Online Mağazası. Eklentiyi indirebilirsiniz: Basit Özel CSS

Bizim öğretici okuyabilirsiniz WordPress eklentisinin kurulumu ve aktivasyonu.

Eklentiyi etkinleştirdikten sonra menüye yeni bir alt menü eklenecek Apparence :

Özel CSS Menü WordPress eklentisi

Bu bölüme erişim sizi, özel CSS kodunu girebileceğiniz bir metin kutusu içeren bir arayüze götürür.

Arayüz WordPress Basit Özel CSS eklentisi

Aşağıdaki CSS'yi metin kutusuna koyun ve ardından “Güncelleme Özel CSS".

.woocommerce #content input.button.alt: .woocommerce #respond giriş # submit.alt, hover: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: .woocommerce sayfa düğmesini hover: .woocommerce sayfa #content input.button.alt hover: hover, .woocommerce sayfa girişi #respond # submit.alt: hover, .woocommerce sayfa a.button.alt. button.alt: .woocommerce sayfa input.button.alt hover: hover {background: red önemli; background-color: red önemli; ! Renk: beyaz önemlidir; text-shadow: şeffaf önemli; box-shadow: none; border-color: #ca0606 önemli; } .woocommerce #content Input.button: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce sayfa # .woocommerce #respond giriş # göndermek, hover mutlu input.button: hover .woocommerce sayfa a.button: hover, .woocommerce sayfa button.button: hover, .woocommerce sayfa input.button: .woocommerce sayfa girişi #respond # göndermek, hover hover {background :! kırmızı önemli; background-color: red önemli; ! Renk: beyaz önemlidir; text-shadow: şeffaf önemli; box-shadow: none; border-color: #ca0606 önemli; } .woocommerce #content Input.button, .woocommerce #respond giriş #, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce sayfa #content input.button, .woocommerce sayfa # teslim # girişi, .woocommerce sayfa a.button, .woocommerce sayfa button.button, .woocommerce sayfa input.button yanıt göndermek {background: red önemli; ! Renk: beyaz önemlidir; text-shadow: şeffaf önemli; border-color: #ca0606 önemli; } .woocommerce #content Input.button.alt: hover, .woocommerce #respond giriş # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: .woocommerce sayfa düğmesini hover: .woocommerce sayfa #content input.button.alt hover: hover, .woocommerce sayfa girişi #respond # submit.alt: hover, .woocommerce sayfa a.button.alt .button.alt: .woocommerce sayfa input.button.alt hover: hover {background: red önemli; box-shadow: none; text-shadow: şeffaf önemli; ! Renk: beyaz önemlidir; border-color: #ca0606 önemli; }

Artık çevrimiçi mağazanıza erişebilirsiniz, düğmelerin gerçekte renkleri değiştiğini fark edeceksiniz.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Nihayet istediğiniz görünüme sahip olmak için düğmelerin rengini özelleştirmek için,

Mülkü değiştir ” backgroud: Kırmızı önemli!"bir tarafından Seçtiğiniz renk. Kodları güncelleyin ve çevrimiçi mağazanıza tekrar erişin. Aslında, size az önce sağladığımız stili kullanarak, düğmelerin yapısını tamamen değiştirebileceksiniz.

Küçük bir araştırma ile WordPress temanıza uygun bir stille benzersiz düğmeler oluşturabileceksiniz (özellikle ikincisi WooCommerce ile uyumlu değilse).

Sepeti düğmesi WordPress eklemek

Aşağıdaki örnek için aşağıdaki CSS kodunu kullanabilirsiniz.

.woocommerce #content input.button, .woocommerce #respond giriş #, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce sayfalık #content input.button göndermek, .woocommerce sayfalık #respond # girişi .woocommerce sayfalık a.button, .woocommerce sayfalık button.button, .woocommerce sayfalık input.button {background-color gönderin: #6fba26; dolgu: 10px; konum: göreceli; font-family: 'Open Sans', sans-serif; yazı tipi boyutu: 12px; text-decoration: none; Renk: #fff; Arka plan resim: lineer gradyan (alt RGB (100,170,30) 0% RGB (129,212,51) 100%); kutu gölge: ilave 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; Çerçeve-yarıçapı: 5px; } .woocommerce #content input.button.alt: gelin .woocommerce #respond giriş # submit.alt: vurgulu, .woocommerce a.button.alt: vurgulu, .woocommerce button.button.alt: vurgulu, .woocommerce input.button .alt: .woocommerce sayfalık düğmesine hover: .woocommerce sayfalık #content input.button.alt hover: hover, .woocommerce sayfalık girişini #respond # submit.alt: hover, .woocommerce sayfalık a.button.alt .button.alt: .woocommerce sayfalık input.button.alt hover: üst hover {: 7px; Arka plan resim: lineer gradyan (alt RGB (100,170,30) 100% RGB (129,212,51) 0%); kutu gölge: içerlek 0px 1px 0px #0D496F, ek 0px -1px 0px #0D496F; Renk: #156785; Metin-gölge: 0px 1px 1px RGBA (255,255,255,0.3); Arka plan: RGB (44,160,202); }

Çevrimiçi mağazalarının performansını, ürünlerin dönüşümü veya satışı bakımından optimize etmek isteyenler için,

Ayrıca, bu görev için tasarlanmış 3 premium WordPress eklentileri de sunuyoruz.

1. WoCommerce Recover Terk edilmiş Sepet

müşterilerinizin sık sık sepetleri doldurun ve bırakın: Terk Sepeti Kurtar WooCommerce Onlarla iletişim kurabilecek, ne satın aldıklarını hatırlatabilecek ve eylemlerini tamamlamaları için onları davet edebileceksiniz.

Woocommerce için terk edilmiş sepeti kurtarın

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Bir alışveriş sepetinin terk edildiği zaman ile müşterinize, ne yaptıklarını görmeleri için satın alma sayfasına doğrudan bir bağlantı içeren kişiselleştirilmiş bir hatırlatma e-postasının gönderilmesi arasındaki zaman aralığını ayarlayın satın almak için gelin.

Indir | gösteri | Web hosting

2. WooCommerce Fiyatı Gizle ve Sepete Ekle Düğme Eklentisi

WooCommerce Fiyatları Gizle eklentisi, satıcıların, oturum açmamış müşterilerden veya e-ticaret web sitenize belirli erişim haklarına sahip kullanıcılardan fiyatları gizlemek veya "sepete ekle" düğmesini gizlemek için birden fazla kural oluşturmasına olanak tanır.

Woocommerce gizle fiyatı sepete ekle düğmesi eklentisi kullanıcı rollerine göre gizle

Belirli ürünlerde veya belirli kategorilerde fiyatı ve "sepete ekle" düğmesini gizleyebilirsiniz. Bunları kişiselleştirilmiş metinle veya onları iletişim formuna götürecek bir düğmeyle değiştirebilirsiniz. Fiyatı otomatik olarak gizleyecek kadar çok kural oluşturabilirsiniz ve “Paniğe ekler” ne istediğinize bağlı.

Indir | gösteri | Web hosting

3. WooCommerce Para Birimi Değiştirici

Bu eklenti, gerçek zamanlı olarak ürün fiyatlarını bir para biriminden diğerine değiştirmenize olanak sağlar.Woocommerce para birimi değiştirici

Bu, tüm dünyayı hedeflediği için e-Ticarette özellikle önemlidir. Bu eklenti, müşterilerinizin nerede olurlarsa olsunlar, her zaman çevrimiçi mağazanızdan sipariş verebilmelerini sağlar.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Size yardımcı olacak diğer önerilen kaynakları keşfedin çevrimiçi mağazanızın performansını optimize edin. 

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Sonuç

Burada ! Hepsi düğme özelleştirmeye adanmış bu öğretici için Sepete ekle WooCommerce'den. Arkadaşlarınızla paylaşmaktan çekinmeyin. sosyal ağlar tercih edilir. 

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Ancak bu arada, bize Yorumlar ve özel bölümdeki öneriler.

... 

Bu makale yorumları 8 içeriyor

  1. Bonjour
    Aynı eklenti, woocommerce ürün sayfalarındaki "müşteri yorumları" yıldızlarının rengini değiştirmeme yardımcı olabilir mi? şimdiden teşekkürler

    1. Bonjour

      Bunun için CSS kodunu kullanmanız gerekir. Aksi takdirde, Codecanyon'dan indirebileceğiniz Yellow Pencil eklentisini öneririm.

  2. İyi akşamlar, bir sorum var. WooCommerce'da alt kategorilerdeki fiyatın rengini nasıl değiştiririz ???

    Cevabınız için şimdiden teşekkür ederiz.

    Nico

    1. Nico Merhaba

      Birçok prim temalar aksi takdirde kişiselleştirmek için CSS kullanabilirsiniz, bu seçeneği sunuyoruz.

      Cordialement

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
3 hisseleri
hisse3
cıvıltı
Enregistrer