Bagaimana Membuat Tema WordPress WooCommerce Siap

Jadikan WordPress Theme Anda WooCommerce Kompatibel dengan Cuplikan Bermanfaat Ini

Jadi, Anda ingin menambahkan toko ke tema Anda – keren! WooCommerce adalah pilihan tepat. Secara teknis SEMUA tema adalah “Kompatibel dengan WooCommerce” karena merupakan plugin. Secara teori plugin apa pun harus bekerja dengan tema WordPress apa pun (yang dikodekan dengan benar).


Sebagai pengembang tema, Anda mungkin ingin mengubah output dari WooCommerce agar lebih sesuai dengan tema Anda atau untuk memberikan opsi kepada pengguna akhir Anda tidak tersedia di pengaturan WooCommerce (seperti mengubah jumlah kolom di toko). Di bawah ini Anda akan menemukan beberapa cuplikan bermanfaat yang dapat Anda gunakan untuk memberikan dukungan “lebih baik” untuk WooCommerce dalam tema Anda dan / atau untuk mengubah hal-hal untuk desain spesifik Anda.

Penting: Banyak cuplikan di bawah ini menggunakan fungsi yang hanya tersedia di WooCommerce. Jadi pastikan potongan ini tidak hanya dibuang di bagian bawah file functions.php Anda dalam tema yang dibuat untuk distribusi. Jika Anda akan membagikan tema Anda dengan orang lain atau menjualnya, pastikan untuk menempatkan snippet di file mereka sendiri yang dimuat hanya ketika plugin WooCommerce aktif.

Periksa apakah WooCommerce Diaktifkan

Dalam tema saya, saya ingin mendefinisikan konstanta khusus yang dapat digunakan untuk memeriksa apakah WooCommerce diaktifkan dengan cara ini saya dapat menyertakan file atau menjalankan fungsi hanya ketika WooCommerce aktif (lihat pesan penting di atas jika Anda belum).

// Tambahkan konstanta baru yang mengembalikan true jika WooCommerce aktif
define ('WPEX_WOOCOMMERCE_ACTIVE', class_exists ('WooCommerce'));

// Memeriksa apakah WooCommerce aktif
if (WPEX_WOOCOMMERCE_ACTIVE) {
// Lakukan sesuatu...
// Seperti memasukkan file baru dengan semua suntingan Woo Anda.
}

Nyatakan Dukungan WooCommerce

Ini adalah potongan kode pertama dan paling penting untuk ditambahkan ke tema Anda yang “mengaktifkan” dukungan WooCommerce dan mencegah peringatan dari plugin yang memberi tahu pengguna akhir bahwa tema tersebut tidak kompatibel..

add_action ('after_setup_theme', function () {
add_theme_support ('woocommerce');
});

Hapus WooCommerce CSS

Secara pribadi saya lebih suka mengganti gaya WooCommerce untuk mencegah masalah yang mungkin terjadi dengan plugin WooCommerce pihak ke-3. Namun, jika Anda ingin menghapus semua gaya WooCommerce sangat mudah.

Cuplikan berikut ini untuk menghapus SEMUA gaya WooCommerce:

// Hapus semua Gaya Woo
add_filter ('woocommerce_enqueue_styles', '__return_empty_array');

Cuplikan ini adalah contoh penghapusan gaya CSS spesifik bersyarat:

function wpex_remove_woo_styles ($ styles) {
tidak disetel ($ styles ['woocommerce-general']);
tidak disetel ($ styles ['woocommerce-layout']);
tidak disetel ($ styles ['woocommerce-smallscreen']);
mengembalikan $ styles;
}
add_filter ('woocommerce_enqueue_styles', 'wpex_remove_woo_styles');

Aktifkan Galeri Produk WooCommerce, Zoom & Lightbox (v3.0 +)

Di WooCommerce 3.0 mereka memperkenalkan galeri produk baru, zoom dan lightbox. Ini semua harus diaktifkan melalui “add_theme_support” jika Anda ingin menggunakannya di tema Anda.

add_theme_support ('wc-product-gallery-slider');
add_theme_support ('wc-product-gallery-zoom');
add_theme_support ('wc-product-gallery-lightbox');

Hapus Judul Toko

Banyak tema yang sudah memiliki fungsi untuk menampilkan judul arsip sehingga kode ini menghapus judul tambahan dari WooCommerce yang lebih baik daripada menyembunyikannya melalui CSS.

add_filter ('woocommerce_show_page_title', '__return_false');

Ubah Judul Arsip untuk Toko

Jika tema Anda menggunakan fungsi archive_title () atau get_archive_title () untuk menampilkan judul untuk arsip Anda, Anda dapat dengan mudah mengubah itu melalui filter untuk mengambil nama halaman produk Anda alih-alih untuk judul arsip toko.

function wpex_woo_archive_title ($ title) {
if (is_shop () && $ shop_id = wc_get_page_id ('shop')) {
$ title = get_the_title ($ shop_id);
}
mengembalikan $ title;
}
add_filter ('get_the_archive_title', 'wpex_woo_archive_title');

Ubah jumlah produk yang ditampilkan per halaman di toko

Digunakan untuk mengubah berapa banyak produk yang ditampilkan per halaman di toko dan arsip produk (kategori dan tag).

// Ubah postingan toko WooCommerce per halaman
function wpex_woo_posts_per_page ($ cols) {
mengembalikan 12;
}
add_filter ('loop_shop_per_page', 'wpex_woo_posts_per_page');

Ubah jumlah kolom yang ditampilkan di toko per baris

Saya tidak mengerti mengapa WooCommerce bekerja dengan cara ini tetapi Anda tidak bisa hanya mengubah filter ‘loop_shop_columns’, Anda juga harus menambahkan kelas unik ke tag tubuh agar kolom berfungsi. Meskipun Woo Shortcodes memiliki pembungkus div dengan kelas yang benar, halaman toko tidak, itu sebabnya kami membutuhkan dua fungsi.

// Ubah kolom toko
function wpex_woo_shop_columns ($ kolom) {
return 4;
}
add_filter ('loop_shop_columns', 'wpex_woo_shop_columns');

// Tambahkan kelas tubuh yang benar untuk kolom toko
function wpex_woo_shop_columns_body_class ($ kelas) {
if (is_shop () || is_product_category () || is_product_tag ()) {
$ kelas [] = 'kolom-4';
}
mengembalikan $ kelas;
}
add_filter ('body_class', 'wpex_woo_shop_columns_body_class');

Ubah Panah Pagination Berikutnya & Sebelumnya

Cuplikan ini memungkinkan Anda mengubah tanda panah pagination di toko agar cocok dengan yang ada di tema Anda.

function wpex_woo_pagination_args ($ args) {
$ args ['prev_text'] = '';
$ args ['next_text'] = '';
mengembalikan $ args;
}
add_filter ('woocommerce_pagination_args', 'wpex_woo_pagination_args');

Ubah Teks Lencana OnSale

Terutama berguna di situs yang menggunakan bahasa yang berbeda atau untuk menghilangkan tanda seru yang bukan saya penggemar berat.

function wpex_woo_sale_flash () {
kembali '' esc_html __ ('Dijual', 'woocommerce'). '';
}
add_filter ('woocommerce_sale_flash', 'wpex_woo_sale_flash');

Ganti kolom thumbnail Galeri Produk

Anda mungkin ingin mengubah jumlah kolom untuk satu thumbnail galeri produk tunggal tergantung pada tata letak Anda dan fungsi ini akan melakukan hal itu.

function wpex_woo_product_thumbnails_columns () {
return 4;
}
add_action ('woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns');

Ubah jumlah produk terkait yang ditampilkan

Digunakan untuk mengubah jumlah produk yang ditampilkan untuk produk terkait di halaman produk tunggal.

// Tetapkan produk terkait untuk menampilkan 4 produk
function wpex_woo_related_posts_per_page ($ args) {
$ args ['posts_per_page'] = 4;
mengembalikan $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page');

Ubah jumlah kolom per baris untuk bagian terkait & jual pada produk

Sama seperti toko jika Anda ingin mengubah jumlah kolom dengan benar untuk produk terkait dan menjual pada halaman produk tunggal Anda harus memfilter kolom dan juga mengubah kelas tubuh sesuai.

// Filter kolom penjualan atas
function wpex_woo_single_loops_columns ($ kolom) {
return 4;
}
add_filter ('woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns');

// Filter argumen terkait
function wpex_woo_related_columns ($ args) {
$ args ['kolom'] = 4;
mengembalikan $ args;
}
add_filter ('woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10);

// Filter kelas tubuh untuk menambahkan kelas kolom
function wpex_woo_single_loops_columns_body_class ($ kelas) {
if (is_singular ('product')) {
$ kelas [] = 'kolom-4';
}
mengembalikan $ kelas;
}
add_filter ('body_class', 'wpex_woo_single_loops_columns_body_class');

Tambahkan tautan & biaya kereta dinamis ke menu Anda

Cuplikan ini akan menambahkan item keranjang WooCommerce ke menu Anda yang menampilkan biaya item dalam keranjang Anda. Plus jika situs Anda memiliki Font-Awesome diaktifkan itu akan menampilkan ikon tas belanja kecil. Penting: Fungsi-fungsi ini tidak boleh dibungkus dalam kondisi is_admin () karena mereka bergantung pada AJAX untuk memperbarui biaya Anda harus memastikan fungsi-fungsi tersebut tersedia ketika is_admin () mengembalikan true dan false.

// Tambahkan tautan kereta ke menu
function wpex_add_menu_cart_item_to_menus ($ items, $ args) {

// Pastikan perubahan 'wpex_main' ke lokasi Menu Anda !!!!
if ($ args-> theme_location === 'wpex_main') {

$ css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';

if (is_cart ()) {
$ css_class. = 'item-menu-saat ini';
}

$ item. = '
  • '; $ items. = wpex_menu_cart_item (); $ item. = '
  • '; } mengembalikan $ item; } add_filter ('wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2); // Fungsi mengembalikan tautan menu troli utama function wpex_menu_cart_item () { $ output = ''; $ cart_count = WC () -> cart-> cart_contents_count; $ css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval ($ cart_count); if ($ cart_count) { $ url = WC () -> cart-> get_cart_url (); } lain { $ url = wc_get_page_permalink ('shop'); } $ html = $ cart_extra = WC () -> cart-> get_cart_total (); $ html = str_replace ('jumlah', '', $ html); $ output. = ''; $ output. = ''; $ output. = wp_kses_post ($ html); $ output. = ''; mengembalikan $ output; } // Perbarui tautan kereta dengan AJAX function wpex_main_menu_cart_link_fragments ($ fragments) { $ fragmen ['. wpex-menu-cart-total'] = wpex_menu_cart_item (); mengembalikan $ fragmen; } add_filter ('add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments');

    Kesimpulan

    WooCommerce akan bekerja dengan tema apa pun secara default tetapi menambahkan beberapa dukungan tambahan untuk plugin sehingga lebih sesuai dengan tema Anda sangat mudah dilakukan. Saya benar-benar menulis posting ini saat meng-coding tema WordPress & Blog New York kami sehingga sebagian besar tweak ini termasuk dalam tema kami. Atau jika Anda lebih suka Anda dapat membeli tema untuk melihat bagaimana semuanya dilakukan (lihat file di wpex-new-york / inc / woocommerce) – ini mungkin cara yang lebih mudah bagi Anda untuk belajar cara menambahkan dengan benar dukungan kustom untuk plugin WooCommerce dengan melihat tema yang sudah dikodekan.

    Apakah ada cuplikan lain yang menurut Anda termasuk dalam daftar ini atau Anda akan merasa terbantu ketika mengembangkan tema baru yang siap untuk WooCommerce?

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map