Cara mengubah halaman toko WooCommerce (opsi & penyesuaian)

Diterbitkan: 2024-05-21

Menjadi salah satu halaman WooCommerce standar, halaman toko dapat dilengkapi dengan pengaturan tambahan. Dalam artikel ini, Anda dapat membaca tentang dasar-dasar halaman toko WooCommerce, fitur pengaturan, opsi, kode pendek, penyesuaian lanjutan, dan cara mengubah halaman.

Daftar isi

  • Menyesuaikan halaman toko WooCommerce (dasar-dasar)
  • Menampilkan produk dan menambahkan kode pendek
  • Menyesuaikan halaman toko (lebih banyak opsi)

Menyesuaikan halaman toko WooCommerce (dasar-dasar)

Secara default, WooCommerce menggunakan halaman toko untuk menampilkan produk.

Tata letak halaman toko berdasarkan personalisasi tema

Cukup mudah untuk mengatur tata letak halaman (jumlah produk, kolom) yang juga dapat bergantung pada tema.

Pengaturan Katalog Produk WooCommerce

Misalnya, Storefront memberi halaman toko WooCommerce opsi berikut untuk mendesain halaman.

Opsi tampilan halaman toko dan kategori

Mari kita lihat proses dan tempat untuk menyiapkan halaman toko WooCommerce.

  1. Memilih halaman

    Pertama, Anda dapat memeriksa tab WooCommerce → Pengaturan → Produk . Ada pengaturan halaman toko WooCommerce termasuk beberapa yang saya tulis di bagian terakhir.
    Pengaturan dasar halaman toko WooCommerce

    Jika Anda tidak dapat melihat halaman apa pun, Anda mungkin perlu menambahkan halaman tersebut di menu Halaman atau mungkin terjadi kesalahan saat mengambil halaman dari database.

    Halaman Toko WooCommerce

    Jika Anda menggunakan halaman yang ada dengan konten, katalog produk akan muncul setelah konten.

    Halaman toko dengan konten yang ada

  2. Pengaturan Katalog Produk

    Selanjutnya, Anda dapat membuka Appearance → Customize dan klik WooCommerce → Product Catalog . Ini mungkin juga bergantung pada tema (dan kompatibilitasnya dengan WooCommerce).
    Pengaturan Katalog Produk WooCommerce
    Pada dasarnya, pengaturannya mengatur tata letak halaman toko, jumlah produk yang akan ditampilkan, kategori, pengurutan, paging, pesanan produk, dan kolom.
    Opsi tampilan halaman toko dan kategori
    Personalisasi akan mempengaruhi bentuk akhir halaman toko WooCommerce.
    Tata letak halaman toko berdasarkan personalisasi tema

  3. Menu

    WordPress memungkinkan kita membuat struktur menu khusus. Untuk menambahkan link halaman toko ke menu, Anda dapat pergi ke Appearance → Menus . Ada juga opsi untuk mengubah judul di menu atau menambahkan ikon/favicon.
    Menu WordPress - menyesuaikan struktur menu dan halaman

  4. Halaman Toko sebagai beranda

    Dimungkinkan untuk memilih halaman toko WooCommerce untuk menjadi beranda. Dalam hal ini, satu link di menu mungkin sudah cukup.
    Pengaturan membaca di WordPress

  5. URL Halaman Toko

    Setiap halaman atau postingan WordPress memiliki URL uniknya menggunakan slug halaman. Anda dapat mengubahnya di layar edit produk atau dengan mengedit halaman dengan cepat.
    Ubah URL halaman toko

    Jika Anda mengatur halaman toko menjadi halaman beranda juga, URL akan ditulis ulang ke domain utama (tanpa slug).
  6. Tautan permanen

    Saat Anda mengklik beberapa produk WooCommerce di katalog halaman toko, Anda akan diarahkan ke URL mereka. Anda juga dapat mengatur struktur tautan produk.
    Tautan permanen produk di WooCommerce

  7. CSS

    Dimungkinkan juga untuk menggunakan CSS untuk menyesuaikan desain halaman toko. Kode yang diperlukan dapat ditempatkan di file style.css tema atau melalui Appearance → Customize dan masukkan CSS Tambahan.
    CSS khusus untuk halaman toko WooCommerce

    Saya juga bisa mengubah lebar kolom dengan CSS tapi menurut saya WooCommerce berhubungan dengan tata letak halaman produk (kolom/produk) jadi lebih baik menggunakan kode pendek (nanti di postingan).

  8. Widget

    Terlebih lagi, opsi tema dapat memberikan lebih banyak opsi tata letak, misalnya sidebar tempat seseorang dapat menggunakan widget dan kode khusus. Dalam artikel tersebut, saya menggunakan tata letak lebar penuh Storefront.
    Templat halaman

Oke, mari kita lihat cara meningkatkan halaman toko standar di WooCommerce dengan kode pendek.

Menampilkan produk dan menambahkan kode pendek

Opsi default mungkin cukup, tetapi dimungkinkan untuk menyesuaikan/mengubah halaman toko WooCommerce dengan produk, opsi, dan kategori tambahan. Opsi tercepat adalah menggunakan opsi editor halaman (beberapa mungkin dilengkapi dengan temanya) dan kode pendek WooCommerce.

Kode pendek WooCommerce untuk contoh halaman produk

Menyesuaikan tata letak dan data halaman toko WooCommerce

Seperti yang Anda lihat, halaman toko WooCommerce akan menampilkan produk dan bagian tambahan sebelum kontennya.

Halaman toko WooCommerce khusus

Selain itu, dimungkinkan untuk mengubah halaman toko WooCommerce standar dengan tambahan WooCommerce dan blok tema.

Halaman toko WooCommerce dengan elemen khusus

Tentu saja, menyenangkan untuk diingat bahwa beberapa produk mungkin ditampilkan beberapa kali.

Anda juga dapat membaca lebih lanjut tentang kode pendek WooCommerce .

Menyesuaikan halaman toko (lebih banyak opsi)

Mari beralih dari produk yang terlihat dan mengurus sisi fungsional halaman toko WooCommerce.

Produk muncul dengan gambar, judul, harga, review, dan tombol tambahkan ke troli.

  1. Pengalihan, AJAX, pengganti

    Mari kembali ke WooCommerce → Pengaturan → Produk . Seperti yang Anda lihat, ada 3 opsi penting untuk digunakan:
    Tambahkan ke perilaku keranjang dan gambar placeholder produk di WooCommerce

    • Redirect ke troli - opsi ini juga dapat digunakan untuk halaman toko WooCommerce.
    • Aktifkan AJAX untuk tombol tambahkan ke troli - opsi ini mencegah halaman dimuat ulang setelah menambahkan produk ke troli. Ini tidak akan berfungsi dengan opsi sebelumnya.
    • Gambar placeholder - memilih ID untuk gambar produk default jika produk tidak memilikinya (terlihat di URL gambar di menu Media).
  2. Menyesuaikan judul produk

    Seperti yang saya tunjukkan di atas, warna judul produk dapat diubah. Seseorang juga perlu menyesuaikan judul di frontend tanpa mengubah setiap produk di backend dengan filter the_title atau kode khusus yang mengubah variabel $title.

  3. Ulasan produk

    Anda dapat menampilkan bintang di bawah judul produk - bintang tersebut sesuai dengan peringkat rata-rata untuk produk tersebut.

    Peringkat di halaman toko di WooCommerce

    Pengaturan untuk ulasan produk ada di dalam WooCommerce → Pengaturan → Produk .

    Ulasan produk di WooCommerce

    Anda dapat membaca lebih lanjut tentang menonaktifkan ulasan produk WooCommerce .
  4. Harga produk

    Secara default, WooCommerce menampilkan harga reguler dan harga jual di bawah judul produk.

    Harga produk di halaman toko WooCommerce

    Untuk produk variabel akan muncul kisaran harga.

    Harga produk variabel

    Dan ada opsi untuk memutuskan bagaimana menampilkan harga.

    Tampilkan harga di toko

    Anda dapat membaca lebih lanjut tentang produk WooCommerce .

    Ada juga plugin tambahan yang dapat mengubah harga produk.

    Tunjukkan harga terendah

    Misalnya, WP Desk membuat plugin untuk menawarkan solusi untuk arahan Omnibus .

    WP Desk Omnibus untuk WooCommerce - penggunaan fleksibel

    Omnibus Meja WP $ 69

    Pastikan toko WooCommerce Anda mematuhi Petunjuk Omnibus UE dan menampilkan harga produk terendah dalam 30 hari terakhir. Gunakan plugin WP Omnibus WordPress untuk memenuhi Petunjuk baru dan mendapatkan kepercayaan pelanggan.

    Instalasi Aktif: 1.000+ |Terakhir diperbarui Maret '24

    Masukkan ke keranjang atau Lihat Detail
    Plugin yang digunakan oleh 250.389+ toko
    Terakhir Diperbarui: 04-03-2024
    Bekerja dengan WooCommerce 8.4 - 8.6.x

    Diskon harga

    Dimungkinkan juga untuk mengatur diskon produk yang akan memengaruhi harga di halaman produk WooCommerce. Misalnya, Penetapan Harga Fleksibel dapat mengatur Beli satu, dapatkan satu diskon gratis atau diskon untuk seluruh kategori, peran pengguna, atau total pesanan.

    WooCommerce Harga Fleksibel $ 79

    Pelanggan menyukai penjualan dan penawaran harga. Gunakan ini! Buat promosi seperti Beli Satu Gratis Satu untuk mendapatkan lebih banyak penjualan di toko Anda. Plugin penetapan harga paling dinamis untuk WooCommerce.

    Terakhir diperbarui pada 23 November

    Masukkan ke keranjang atau Lihat Detail
    Plugin yang digunakan oleh 250.389+ toko
    Terakhir Diperbarui: 15-04-2024
    Bekerja dengan WooCommerce 8.5 - 8.8.x
  5. Tombol Tambahkan ke troli

    WooCommerce hadir dengan judul umum untuk tombol Tambahkan ke troli. Jadi, bagaimana cara mengubah teks tombol? Kamu bisa:

    • mengubah terjemahan (string) untuk teks tambahkan ke keranjang,
    • gunakan filter woocommerce_product_add_to_cart_text dan woocommerce_product_add_to_cart_text untuk menyesuaikan teks tombol,
    • atau coba pluginnya.

    Harga Khusus untuk WooCommerce - pengaturan dan ubah teks tombol tambahkan ke keranjang

    Harga Khusus untuk WooCommerce PRO $ 49

    Biarkan pelanggan Anda membayar sesuai keinginan mereka dan memungkinkan mereka menyebutkan harga produk di WooCommerce. Harga baru akan didasarkan pada masukan pengguna. Gunakan Harga Khusus untuk donasi atau kampanye pemasaran!

    Instalasi Aktif: 2.000+ |Peringkat WordPress:

    Masukkan ke keranjang atau Lihat Detail
    2.000+ Instalasi Aktif
    Terakhir Diperbarui: 21-05-2024
    Bekerja dengan WooCommerce 8.6 - 8.9.x
  6. Memilih kuantitas dari halaman toko

    Seseorang hanya dapat menambahkan satu produk per klik pada halaman toko WooCommerce standar. Namun pemilih kuantitas dapat ditampilkan dengan kode khusus.

Seperti yang Anda lihat, ada banyak opsi untuk menyiapkan halaman toko WooCommerce. Kemungkinannya sangat banyak termasuk menampilkan lebih banyak data, meta khusus, atau elemen grafis. Namun menurut saya lebih penting menawarkan produk yang bagus . Menjual sesuatu yang buruk atau tidak bernilai tidak dapat ditutupi dengan beberapa opsi, trik CSS, dan desain yang menarik.

Ringkasan

Apakah Anda memiliki pertanyaan tentang cara mengubah halaman toko WooCommerce? Jika Anda perlu menyesuaikan WooCommerce, misalnya bidang produk atau halaman checkout, Anda dapat melihat plugin WP Desk gratis .