Cara menyesuaikan halaman produk WooCommerce

mata utama

Penyesuaian halaman produk WOOCommerce menggunakan operasi dan cangkuk penapis untuk secara langsung mengubah suai fail tema tanpa mengubah suai tanda fail templat.
Sesuaikan halaman produk dengan memuatkan fail
• dan menyalin templat dalam tema, semua perubahan dibuat dalam satu salinan, memastikan perubahan tersuai tidak terjejas apabila mengemas kini tema dan pemalam. single-product.php
Buat halaman produk tersuai atau kategori produk dengan menyesuaikan templat tersuai untuk halaman ini dan memastikan bahawa produk atau kategori baru yang anda tambah adalah pada akhir fail
• . content-single-product.php
Gunakan plugin seperti Elementor dan Beaver Builder untuk menyesuaikan halaman produk Woocommerce tanpa pengetahuan pengekodan.

Apabila merancang kedai WooCommerce, anda perlu menjawab banyak soalan terlebih dahulu yang akan menjejaskan kejayaan masa depan kedai. Persediaan kedai adalah satu cabaran yang serius kerana setelah selesai, sukar untuk menukar persediaan dan reka bentuk kedai. Untuk menyesuaikan halaman produk WooCommerce, anda mesti mempertimbangkan pilihan yang tersedia, yang akan saya sampaikan dalam artikel ini.

Sekarang, selepas kedai berjalan dalam talian, cabaran seterusnya adalah kekacauan pada halaman produk. Woocommerce Halaman produk tunggal mempunyai banyak elemen yang tidak menyumbang secara langsung kepada reka bentuk dan persediaan tersuai kedai. Dua penyebab biasa adalah kategori produk dan penilaian bintang. Tidak setiap kedai

perlu memaparkan kedua -dua elemen ini pada halaman produk tunggal. Begitu juga, unsur -unsur lain juga perlu diposisikan semula agar sesuai dengan reka bentuk tersuai kedai. Semua cabaran ini dapat diselesaikan dengan mudah dengan operasi WooCommerce dan cangkuk penapis. Saya mencipta senarai pendek ini untuk menunjukkan apa yang anda boleh menyesuaikan di halaman produk.

halaman produk Woocommerce Custom

Perkara pertama yang mungkin anda mahu lakukan ialah memaparkan produk dalam templat yang berbeza daripada yang lalai. Fail

hendaklah dimuatkan, yang mengawal fail templat yang memaparkan maklumat produk di bahagian depan.

single-product.php Amalan biasa (biasanya disyorkan) untuk menyesuaikan halaman templat untuk tema dan plugin ibu bapa adalah untuk menyalin templat dalam tema. Sekarang hanya buat semua perubahan dalam salinan. Dengan cara ini, jika anda mengemas kini tema dan plugin, perubahan tersuai anda akan tetap sama.

Beberapa plugin dan tema menyediakan sejumlah besar tindakan tersuai dan cangkuk penapis yang membolehkan pengubahsuaian langsung fail tema. Manfaat semua ini ialah anda tidak perlu mengubah tag fail templat. Hasilnya adalah kod bersih tanpa duplikasi fail yang kemas.

Saya akan menggunakan

untuk memanggil fail templat yang mengawal format maklumat produk dan bagaimana maklumat produk dipaparkan pada halaman produk. Begitu juga,

adalah templat produk, mengubahnya dapat mengubah maklumat dan gaya halaman produk. Sekarang buka single-product.php dan tambahkan kod berikut untuk menukar templat untuk satu halaman produk: content-single-product.php

function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

以及以下包含在模板 _include 中的代码
add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }

    return $template;
}

Bina produk/kategori Woocommerce Custom

Pada ketika ini, saya menganggap anda mempunyai kedai WooCommerce yang aktif dan sangat akrab dengan proses menubuhkan halaman produk dan kategori produk. Selalu ada situasi di mana anda perlu menyesuaikan halaman produk anda atau menyesuaikan halaman kategori produk anda. Ini dilakukan dengan menyesuaikan templat tersuai untuk templat ini.

Laraskan fail template Woocommerce

Sekarang ingat bahawa apabila menggunakan fail content-single-product.php, ubah suai supaya mana -mana produk atau kategori yang anda tambahkan harus berada di akhir fail. Satu lagi kebiasaan yang baik adalah untuk menamakannya supaya ia menonjol dan mudah dikenalpasti. Sebagai contoh, jika anda mempunyai kategori yang dipanggil "Buku", tukar nama fail ke content-single-product-books.php. Perubahan mudah ini akan memastikan bahawa anda dapat mengenal pasti fail yang betul untuk kategori tertentu. Fail ini digunakan untuk membuat pelbagai perubahan (menambah atau mengeluarkan sidebars, perubahan gelung, dll) untuk memastikan halaman kategori produk atau produk sepenuhnya memenuhi keperluan anda.

Pekerjaan seterusnya ialah menukar fail single-product.php. Fail ini mengandungi gelung yang menentukan templat mana yang hendak dimuatkan untuk memaparkan produk.

Saya akan menambah keadaan jika memeriksa sama ada produk jatuh ke dalam kategori tertentu dan kemudian memuatkan single-product.php yang relevan dalam templat tersuai. Sekarang, sebenarnya tidak perlu menamakan semula fail tersebut. Untuk menambah kod kepadanya, buka fail dan cari coretan kod berikut:

woocommerce_get_template_part( 'content', 'single-product' );

anda perlu menggantinya dengan kod berikut:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

Dalam kod, cari kategori dan gantikannya dengan slug kategori pilihan anda. Di samping itu, anda perlu menggantikan content-single-product.php dengan nama baru fail. Gunakan contoh yang digunakan di atas, di mana kategori slug adalah "Buku" dan content-single-product.php dinamakan semula kepada content-single-product-books.php. Pada ketika ini, kod itu kelihatan seperti ini:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

Pada ketika ini, semua fail telah berjaya diedit dan/atau dinamakan semula. Langkah seterusnya ialah memuat naik fail ini ke kedai WooCommerce. Untuk memastikan semuanya berjalan lancar, pastikan terdapat subfolder bernama /woocommerce/ dalam direktori tema. Ingat bahawa kedua -dua fail ini (content-single-product.php dan single-product.php) akan berada dalam folder yang sama. Adalah lebih baik untuk menukar elemen kod dalam folder tema ini supaya anda dapat menghalang kesilapan debugging yang sukar, iaitu menimpa fail WooCommerce yang asal.

Langkah terakhir adalah untuk memeriksa halaman kategori produk dan produk untuk memastikan semua perubahan yang dibuat dalam kod templat tersuai digunakan dan dipaparkan dengan sempurna.

Kesimpulan

Pembelajaran untuk menyesuaikan halaman produk WooCommerce dan halaman kategori produk adalah masalah menambah dan mengubah suai cangkuk. Adalah penting untuk memahami bahawa semua perubahan ini secara langsung mempengaruhi bagaimana kedua -dua halaman ini dibentangkan di hujung depan kedai. Jika anda memerlukan bantuan dengan kod atau aspek lain dari idea ini, sila tinggalkan komen dan saya akan membalas anda.

Soalan Lazim Mengenai Menyesuaikan Halaman Produk WooCommerce

Apakah langkah -langkah asas untuk menyesuaikan halaman produk WooCommerce saya?

Menyesuaikan halaman produk WooCommerce anda melibatkan pelbagai langkah. Pertama, anda perlu memasang dan mengaktifkan plugin WooCommerce di laman web WordPress anda. Kemudian, navigasi ke tetapan WooCommerce dan pilih tab Produk. Di sini anda boleh menyesuaikan tetapan paparan halaman produk. Anda juga boleh menggunakan plugin seperti subtema atau elemen untuk menyesuaikan lagi susun atur dan reka bentuk halaman produk anda. Ingatlah untuk sentiasa pratonton perubahan sebelum mereka diletakkan dalam talian.

Bolehkah saya menyesuaikan halaman produk WooCommerce saya tanpa pengekodan?

Ya, anda boleh menyesuaikan halaman produk WooCommerce anda tanpa pengetahuan pengekodan. Beberapa plugin boleh didapati, seperti Elementor dan Beaver Builder, yang menyediakan antara muka drag-and-drop untuk penyesuaian mudah. Alat ini membolehkan anda menukar susun atur, menambah atau memadam elemen, dan menyesuaikan reka bentuk halaman produk anda dalam hanya beberapa klik.

Bagaimana untuk menambah medan tersuai ke halaman produk WooCommerce saya?

bidang adat boleh ditambah ke halaman produk WooCommerce anda menggunakan plugin seperti bidang adat maju atau medan adat WooCommerce. Plugin ini membolehkan anda menambah maklumat tambahan ke halaman produk anda, seperti carta saiz, maklumat penghantaran, atau video produk. Sebaik sahaja plugin dipasang dan diaktifkan, anda boleh membuat medan tersuai dan menambahnya ke halaman produk anda.

bagaimana menukar susun atur halaman produk WooCommerce saya?

Anda boleh menggunakan plugin sub-tema atau pembina halaman untuk menukar susun atur halaman produk WooCommerce anda. Alat ini membolehkan anda menyusun semula elemen pada halaman produk, menambah bahagian baru, atau memadam elemen yang tidak perlu. Anda juga boleh menyesuaikan lebar halaman produk, menukar kedudukan imej produk, atau menambah bar sisi untuk maklumat tambahan.

Bagaimana untuk menambah variasi produk ke halaman produk WooCommerce saya?

Variasi produk boleh ditambah ke halaman produk WooCommerce anda melalui bahagian data produk dalam tetapan WooCommerce. Di sini anda boleh membuat variasi yang berbeza untuk produk anda, seperti saiz, warna, atau bahan. Setiap varian boleh mempunyai harga sendiri, SKU dan status inventori. Anda juga boleh menambah imej kepada setiap varian untuk membantu pelanggan memahami pilihan mereka secara intuitif.

Bagaimana untuk meningkatkan respons mudah alih halaman produk WooCommerce saya?

Tema responsif atau pemalam pengoptimuman mudah alih boleh digunakan untuk meningkatkan respons mudah alih halaman produk WooCommerce. Alat ini memastikan halaman produk anda dipaparkan dan berjalan dengan baik pada semua peranti, tanpa mengira saiz skrin. Anda juga boleh menggunakan Customizer WordPress untuk menyesuaikan pandangan mudah alih halaman produk.

Bagaimana untuk menambah penerangan produk tersuai ke halaman produk WooCommerce saya?

Deskripsi produk tersuai boleh ditambah ke halaman produk WooCommerce anda di bahagian data produk tetapan WooCommerce. Di sini anda boleh menulis penerangan terperinci tentang produk, termasuk ciri, faedah dan spesifikasinya. Anda juga boleh menggunakan HTML untuk memformat keterangan anda dan menambah pautan, imej, atau video.

Bagaimana untuk menambah ulasan pelanggan ke halaman produk WooCommerce saya?

Ulasan pelanggan boleh ditambah ke halaman produk WooCommerce anda di bahagian data produk tetapan WooCommerce. Di sini anda boleh mengaktifkan ulasan untuk produk anda. Anda juga boleh meningkatkan ulasan dengan menggunakan plugin seperti Yith WooCommerce Advanced Review atau WooCommerce Product Review Pro, seperti menambah peringatan komen, penilaian bintang, atau penapis komen.

Bagaimana untuk mengoptimumkan halaman produk WooCommerce saya untuk SEO?

Mengoptimumkan halaman produk WooCommerce anda untuk SEO termasuk beberapa langkah. Pertama, anda perlu menulis tajuk produk dan deskriptif yang unik dan deskriptif menggunakan kata kunci yang relevan. Anda juga boleh menambah tag meta dan teks alternatif kepada imej produk. Di samping itu, anda boleh menggunakan plugin SEO seperti Yoast SEO untuk terus mengoptimumkan halaman produk anda, seperti membuat URL mesra SEO, menambah tag skema, atau menghasilkan sitemap XML.

Bagaimana untuk menambah produk yang berkaitan dengan halaman produk WooCommerce saya?

Produk yang berkaitan boleh ditambah ke halaman produk WooCommerce anda di bahagian data produk tetapan WooCommerce. Di sini anda boleh memilih tab Produk Pautan dan menambah produk yang relevan dalam bidang jualan upsell atau silang. Anda juga boleh menggunakan plugin seperti produk berkaitan WooCommerce atau Yith WooCommerce sering membeli bersama untuk memaparkan produk yang berkaitan dengan cara yang lebih dinamik dan menarik.

Atas ialah kandungan terperinci Cara menyesuaikan halaman produk WooCommerce. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!