Loncat ke Konten Utama

Cara menyesuaikan tombol "Tambahkan ke Troli" dari WooCommerce

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Untuk mengubah warna tombol WooCommerce, kita perlu mengubah atau mengganti file tombol style.css default. Untuk melakukan ini, kita perlu menambahkan a kode CSS khusus untuk kita tema WordPress anak.

Ada dua cara untuk sampai ke sana:

  • Tambahkan CSS khusus ke file style.css tema anak
  • Gunakan beberapa plugin untuk menyuntikkan kode CSS khusus ke halaman web Anda.

Langkah 1: Instal plugin di WordPress Sederhana Kustom CSS dan mengaktifkannya

Kami akan menggunakan plugin WordPress untuk menyuntikkan kode CSS ke halaman a Toko Online WooCommerce. Anda dapat mengunduh plugin: CSS Kustom sederhana

Anda dapat membaca tutorial kami di menginstal dan mengaktifkan plugin WordPress.

Setelah mengaktifkan plugin, submenu baru akan ditambahkan ke menu Apparence :

Kustom CSS menu WordPress Plugin

Mengakses bagian ini akan membawa Anda ke antarmuka dengan kotak teks tempat Anda dapat memasukkan kode CSS khusus.

Antarmuka plugin Simple CSS Kustom

Masukkan CSS berikut ke dalam kotak teks dan kemudian klik " Update Kustom CSS".

.woocommerce # isi input.button.alt: hover, .woocommerce #respond masukan # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button. alt: hover, .woocommerce-halaman # isi input.button.alt: hover, masukan .woocommerce-halaman #respond # submit.alt: hover, .woocommerce-halaman a.button.alt: hover, tombol .woocommerce-halaman. button.alt: hover, .woocommerce-halaman input.button.alt: hover {background: red signifikan; background-color: red penting; ! Warna: putih penting; text-shadow:! transparan penting; box-shadow: none; border-color:! #ca0606 penting; } .woocommerce # isi input.button: hover, .woocommerce #respond # mengirimkan masukan: hover, .woocommerce a.button: hover, .woocommerce button.button: hover, .woocommerce input.button: hover, .woocommerce-halaman # senang input.button: hover, .woocommerce-halaman masukan #respond # mengirimkan: hover, .woocommerce-halaman a.button: hover, .woocommerce-halaman button.button: hover, .woocommerce-halaman input.button: hover {background : red penting; background-color: red penting; ! Warna: putih penting; text-shadow:! transparan penting; box-shadow: none; border-color:! #ca0606 penting; } .woocommerce # isi input.button, .woocommerce #respond masukan # serahkan, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-halaman # isi input.button, .woocommerce-halaman # sponds masukan # serahkan, .woocommerce-halaman a.button, .woocommerce-halaman button.button, .woocommerce-halaman input.button {background: red signifikan; ! Warna: putih penting; text-shadow:! transparan penting; border-color:! #ca0606 penting; } .woocommerce # isi input.button.alt: hover, .woocommerce #respond masukan # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-halaman # isi input.button.alt: hover, masukan .woocommerce-halaman #respond # submit.alt: hover, .woocommerce-halaman a.button.alt: hover, tombol .woocommerce-halaman .button.alt: hover, .woocommerce-halaman input.button.alt: hover {background: red signifikan; box-shadow: none; text-shadow:! transparan penting; ! Warna: putih penting; border-color:! #ca0606 penting; }

Anda sekarang dapat mengakses toko online Anda, Anda akan melihat bahwa tombol telah benar-benar berubah warna.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Untuk menyesuaikan warna tombol akhirnya memiliki tampilan yang Anda inginkan,

Ganti properti » backgroud: red penting! Oleh a warna pilihan Anda. Perbarui kode dan kembali ke toko online Anda. Bahkan, dengan menggunakan gaya yang baru saja kami sediakan, Anda dapat sepenuhnya mengubah struktur tombol.

Dengan sedikit riset, Anda akan dapat membuat tombol unik dengan gaya yang sesuai dengan tema WordPress Anda (terutama jika yang terakhir tidak kompatibel dengan WooCommerce).

tombol tambahkan ke keranjang WordPress

Untuk contoh berikut, Anda dapat menggunakan kode CSS berikut.

.woocommerce # isi input.button, .woocommerce #respond masukan # serahkan, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-halaman # isi input.button, .woocommerce-halaman #respond # mengirimkan masukan, .woocommerce-halaman a.button, .woocommerce-halaman button.button, .woocommerce-halaman input.button {background-color: #6fba26; padding: 10px; position: relative; font-family: 'Open Sans', sans-serif; font-size: 12px; text-decoration: none; Warna: # fff; background-image: linear-gradient (bawah, rgb (100,170,30) 0% rgb (129,212,51) 100%); box-shadow: inset 0px 1px 0px #7F8EF1, 0px 6px 0px #0D496F; border-radius: 5px; } .woocommerce # isi input.button.alt: hover, .woocommerce #respond masukan # submit.alt: hover, .woocommerce a.button.alt: hover, .woocommerce button.button.alt: hover, .woocommerce input.button .alt: hover, .woocommerce-halaman # isi input.button.alt: hover, masukan .woocommerce-halaman #respond # submit.alt: hover, .woocommerce-halaman a.button.alt: hover, tombol .woocommerce-halaman .button.alt: hover, .woocommerce-halaman input.button.alt: hover {top: 7px; background-image: linear-gradient (bawah, rgb (100,170,30) 100% rgb (129,212,51) 0%); box-shadow: inset 0px 1px 0px #0D496F, inset 0px -1px 0px #0D496F; Warna: #156785; text-shadow: 0px 1px 1px RGBA (255,255,255,0.3); background: rgb (44,160,202); }

Bagi mereka yang ingin mengoptimalkan kinerja toko online mereka baik dalam hal konversi atau penjualan produk,

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Kami juga menawarkan plugin WordPress premium 3 yang dirancang untuk tugas ini.

1. WooCommerce Pulihkan Keranjang Terbengkalai

pelanggan Anda sering mengisi keranjang mereka dan meninggalkannya: terima kasih WooCommerce Recover Keranjang Terbengkalai Anda akan dapat menghubungi mereka, mengingatkan mereka tentang apa yang telah mereka beli dan mengundang mereka untuk menyelesaikan tindakan mereka.

Pulihkan gerobak yang ditinggalkan untuk woocommerce

Setel interval waktu antara ketika keranjang belanja ditinggalkan dan ketika email pengingat yang dipersonalisasi dikirim ke pelanggan Anda dengan tautan langsung ke halaman belanja sehingga mereka dapat melihat apa yang sedang mereka lihat titik pembelian.

Download | Demo | Hébergement Web

2. WooCommerce Sembunyikan Harga & Tambahkan ke Cart Button Plugin

Plugin Sembunyikan Harga WooCommerce memungkinkan pedagang untuk membuat beberapa aturan untuk menyembunyikan harga atau menyembunyikan tombol "tambahkan ke keranjang" untuk pelanggan atau pengguna yang tidak terhubung yang memiliki hak akses tertentu ke situs web e-commerce Anda.

Woocommerce menyembunyikan plugin harga tambahkan ke keranjang disembunyikan oleh peran pengguna

Anda dapat menyembunyikan harga dan tombol "tambahkan ke keranjang" pada beberapa produk atau dalam kategori tertentu. Anda dapat menggantinya dengan teks khusus atau tombol yang akan membawa Anda ke formulir kontak. Anda dapat membuat banyak aturan yang secara otomatis akan menyembunyikan harga dan tombol " Tambahkan ke panier "tergantung pada apa yang Anda inginkan.

Download | Demo | Hébergement Web

3. WooCommerce Currency Switcher

Plugin ini memungkinkan Anda untuk mengubah harga produk dari satu mata uang ke mata uang lainnya secara real time.Pengalih mata uang Woocommerce

Ini sangat penting dalam e-Commerce karena ditujukan untuk seluruh dunia. Plugin ini memastikan bahwa tidak peduli situasi geografis pelanggan Anda, mereka akan selalu dapat memesan di toko online Anda.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

Temukan sumber lain yang direkomendasikan yang akan membantu Anda mengoptimalkan kinerja toko online Anda.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Kesimpulan

Voila! Itu saja untuk tutorial ini yang didedikasikan untuk penyesuaian tombol Tambahkan ke Keranjang dari WooCommerce. Jangan ragu untuk membagikannya kepada teman Anda di blog Anda jaringan sosial disukai.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.

Tetapi sementara itu, beri tahu kami tentang Anda komentar dan saran di bagian khusus.

...

Artikel ini berisi komentar 8

  1. Nah, sangat bagus untuk menerjemahkan satu kode dari bahasa Inggris ke bahasa Italia. CSS penuh dengan kesalahan! Tapi bisakah kita melakukannya?

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
3 saham
saham3
menciak
Register