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

Ada dua cara untuk melakukannya:

  • 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 WordPress Plugin untuk menyuntikkan kode CSS ke halaman a Toko Online WooCommerce. Anda dapat mengunduh plugin: CSS Kustom sederhana

Anda dapat membaca tutorial kami di instalasi dan aktivasi plugin WordPress.

Setelah mengaktifkan plugin, sub-menu baru akan ditambahkan ke menu Apparence :

Kustom CSS menu WordPress Plugin

Mengakses bagian ini 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.

Untuk menyesuaikan warna tombol agar memiliki tampilan yang Anda inginkan,

Ganti properti " backgroud: red penting! Oleh a warna pilihan Anda. Perbarui kode dan akses toko online Anda lagi. Faktanya, dengan menggunakan gaya yang baru saja kami berikan kepada Anda, Anda akan dapat sepenuhnya mengubah struktur tombol.

Dengan sedikit riset, Anda akan dapat membuat tombol unik dengan gaya yang cocok dengan Anda tema WordPress (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,

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 mereka beli dan mengundang mereka untuk menyelesaikan tindakan mereka.

Pulihkan gerobak yang ditinggalkan untuk woocommerce

Atur interval waktu antara saat gerobak ditinggalkan dan saat email pengingat yang dipersonalisasi dikirim ke pelanggan Anda dengan tautan langsung ke halaman pembelian agar mereka dapat melihat apa yang mereka lakukan titik untuk membeli.

Download | Demo | Hébergement Web

2. WooCommerce Sembunyikan Harga & Tambahkan ke Keranjang Tombol Plugin

Plugin WooCommerce Hide Prices memungkinkan pedagang membuat beberapa aturan untuk menyembunyikan harga atau menyembunyikan tombol "tambahkan ke keranjang" dari pelanggan yang tidak masuk atau pengguna yang memiliki hak akses tertentu ke situs web e-niaga Anda.

Woocommerce menyembunyikan plugin harga tambahkan ke keranjang disembunyikan oleh peran pengguna

Anda dapat menyembunyikan harga dan tombol "tambahkan ke troli" pada produk tertentu atau dalam kategori tertentu. Anda dapat menggantinya dengan teks khusus atau tombol yang akan membawanya ke  formulir kontak. Anda dapat membuat banyak aturan yang secara otomatis akan menyembunyikan harga dan " 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 di mana pun pelanggan Anda berada, mereka akan selalu dapat memesan dari toko online Anda.

Download | Demo | Hébergement Web

Sumber Daya yang Direkomendasikan

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

Kesimpulan

Disini adalah ! Itu saja untuk tutorial ini yang didedikasikan untuk kustomisasi tombol Tambahkan ke Keranjang dari WooCommerce. Jangan ragu untuk membagikannya dengan teman-teman Anda di 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.

Namun, sementara itu, beri tahu kami tentang file komentar dan saran di bagian khusus.

...