Loncat ke Konten Utama

Cara menyesuaikan tombol WooCommerce "Tambahkan ke Keranjang"

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.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 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 plugin WordPress untuk memasukkan kode CSS ke dalam halaman file 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.

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 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 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,

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

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]

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 keranjang" pada produk tertentu atau di kategori tertentu. Anda dapat menggantinya dengan teks yang dipersonalisasi atau dengan tombol yang akan membawanya ke formulir kontak. Anda dapat membuat sebanyak mungkin 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. 

Buat Toko Online Anda dengan mudah

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

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.

... 

Artikel ini berisi komentar 8

  1. Halo,
    Dapatkah plugin yang sama ini membantu saya mengubah warna bintang "ulasan pelanggan" di halaman produk woocommerce? Terima kasih sebelumnya

    1. Halo,

      Anda harus menggunakan kode CSS untuk ini. Kalau tidak, saya sarankan plugin Yellow Pencil yang dapat Anda unduh di Codecanyon.

  2. Sangat luar biasa untuk menerjemahkan sepotong kode dari bahasa Inggris ke bahasa Italia. CSS penuh dengan kesalahan! Tapi bisakah kita melakukannya ?!

  3. Selamat malam, saya punya pertanyaan. Bagaimana cara mengubah warna harga di subkategori di WooCommerce ???

    Terima kasih sudah untuk jawaban Anda.

    Nico

    1. Halo Nico,

      Banyak tema premium menawarkan pilihan ini, jika tidak, anda dapat menggunakan CSS untuk personalisasi itu.

      Cordialement

Tinggalkan komentar

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

Kembali ke atas