Cara mengedit halaman produk WooCommerce secara terprogram

Diterbitkan: 2021-01-09

Mencari cara untuk menyesuaikan halaman produk di toko eCommerce Anda? Dalam panduan ini, kami akan menunjukkan cara mengedit halaman produk WooCommerce secara terprogram .

Menyesuaikan Halaman Produk

Meskipun Anda dapat menyesuaikan apa pun di toko Anda, dua halaman utama tempat sebagian besar penyesuaian terjadi di WooCommerce adalah halaman toko dan halaman produk. Jika Anda ingin meningkatkan penjualan dan mengoptimalkan awal proses pembelian, Anda perlu mengerjakan keduanya. Kami telah melihat cara menyesuaikan halaman Toko, jadi hari ini kami akan menunjukkan cara mengedit halaman Produk secara terprogram (dengan kode).

Desain rapi yang berfokus pada penyediaan pengalaman pelanggan terbaik akan membantu Anda meningkatkan keseluruhan proses pembelian dan meningkatkan tingkat konversi Anda. Ada dua cara utama untuk menyesuaikan halaman Produk:

Dengan plugin
Secara terprogram

Meskipun beberapa plugin dapat membantu Anda, menemukan plugin yang memiliki semua fitur yang Anda inginkan bisa menjadi proses yang panjang. Jadi, jika Anda memiliki beberapa keterampilan pengembang dasar, opsi yang sangat baik adalah mengedit halaman produk WooCommerce secara terprogram . Anda tidak hanya dapat menghindari menginstal alat pihak ketiga, tetapi Anda juga akan memiliki lebih banyak fleksibilitas untuk menyesuaikan apa pun yang Anda inginkan.

Jika Anda ingin menyesuaikan halaman produk dengan plugin dan pembuat halaman, lihat panduan ini.

Cara mengedit halaman produk WooCommerce secara terprogram

Di bagian ini, Anda akan mempelajari cara mengedit halaman produk WooCommerce untuk produk tunggal. Kami akan membahas topik berikut.

Menggunakan kait
1. Hapus elemen
2. Susun ulang elemen
3. Tambahkan elemen baru
4. Terapkan logika kondisional
  1. Masuk pengguna dan peran pengguna
  2. ID produk dan taksonomi
5. Edit tab Produk
6. Dukungan untuk produk variabel
Ganti file template WooCommerce
1. Edit informasi meta
2. Beralih ke templat khusus untuk kategori produk tertentu
  1. Edit file single-product.php
  2. Buat file content-single-product.php baru
  3. Buat template khusus yang mengedit file content-single-product.php baru Anda
Menyesuaikan halaman produk dengan skrip CSS

Tata Letak Halaman Produk WooCommerce

Sebelum memulai dengan tutorial, mari kita lihat halaman produk default di WooCommerce untuk produk tunggal dan identifikasi setiap elemen. Perhatikan bagian yang berbeda dalam template dan bagaimana informasi diatur karena kami akan merujuknya nanti di panduan ini. Halaman produk tunggal WooCommerce Ada dua file utama WooCommerce yang bertanggung jawab atas keluaran halaman produk.

single-product.php : Ini membangun template yang diperlukan untuk tata letak saat ini
content-single-product.php : File ini mencetak konten dalam template

Kedua file dapat ditimpa menggunakan tema anak. Ini adalah praktik umum untuk menimpa file template WooCommerce. Namun, Anda harus mencoba menggunakan kait WooCommerce daripada menimpa file template jika memungkinkan karena ini adalah salah satu praktik terbaik yang direkomendasikan WordPress saat menyesuaikan situs Anda.

Di sisi lain, untuk tugas kompleks yang menyertakan fungsi atau objek, Anda mungkin perlu mengedit file template. Menggabungkan kedua teknik Anda harus dapat mencapai hampir semua penyesuaian yang Anda inginkan. Jadi dalam tutorial ini, kami akan menunjukkan cara mengedit halaman produk WooCommerce menggunakan kedua metode tersebut.

Sebelum kita mulai, pastikan Anda membuat tema anak untuk menguji skrip Anda atau menggunakan plugin untuk membuatnya. Mari kita lihat beberapa contoh praktis sehingga Anda dapat mempelajari bagaimana masing-masing teknik ini bekerja untuk memaksimalkan toko Anda.

1) Edit halaman produk WooCommerce menggunakan kait

CATATAN : Jika Anda tidak terbiasa dengan hook WooCommerce dan cara menggunakannya, lihat panduan ini.

1.1) Hapus elemen dari halaman produk tunggal

Ada beberapa kait WooCommerce yang dapat Anda gunakan untuk menghapus elemen apa pun pada satu halaman produk. Masing-masing akan bekerja dengan sekelompok elemen tertentu, jadi Anda perlu menggunakan hook yang tepat, fungsi callback WooCommerce yang tepat, dan nilai prioritas yang tepat.

Misalnya, jika Anda ingin menghapus judul semua halaman produk, Anda akan menggunakan skrip berikut di file functions.php tema anak Anda.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Anda akan menemukan semua kait dan parameter terkaitnya di sini atau di komentar di file content-single-product.php dari plugin WooCommerce. Sekarang, mari kita lihat beberapa contoh skrip lain untuk menghapus elemen berbeda dan menyesuaikan halaman produk.

 // hapus judul
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// hapus peringkat bintang
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// hapus meta produk 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// hapus deskripsi
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// hapus gambar
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// hapus produk terkait
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// hapus tab informasi tambahan
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) Susun ulang elemen

Menyusun ulang elemen halaman produk cukup sederhana. Pertama, Anda perlu melepas pengait dengan cara yang sama seperti yang telah kita lakukan sebelumnya, dan kemudian Anda perlu menambahkannya lagi dengan prioritas/nomor pesanan yang berbeda. Misalnya, skrip berikut akan memindahkan deskripsi produk tepat di bawah judul:

 // ubah urutan deskripsi
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Seperti yang Anda lihat, kami menghapus tindakan dan kemudian menambahkannya lagi dengan prioritas yang berbeda (6 bukannya 20). Mengapa kami memilih prioritas/urutan 6? Kita tahu bahwa elemen judul memiliki nilai prioritas 5, jadi ini memungkinkan kita untuk mengetahui nilai prioritas yang perlu kita tetapkan ke kait khusus kita untuk menampilkan elemen panggilan balik tepat setelah judul (6).

Dengan menggunakan informasi yang kami berikan kepada Anda di poin 1.1, Anda dapat melakukan hal yang sama dengan kait dan panggilan balik apa pun dan menempatkannya dalam urutan apa pun yang Anda inginkan.

1.3) Tambahkan elemen baru

Jika Anda perlu menyesuaikan halaman produk WooCommerce dengan menambahkan konten baru, Anda mungkin perlu mempertimbangkan untuk mengganti file template. Namun, Anda juga dapat menggunakan pengait berikut untuk menambahkan konten baru:

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Selamat, Anda baru saja menambahkan tautan!</a></h4>');
}
);

woocommerce_before_single_product_summary hook kustomisasi halaman produk Atau, Anda dapat membuat fungsi Anda sendiri:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
fungsi QuadLayers_callback_function(){
    printf('
    <h1> Hai !</h1>
    <div><h5>Selamat datang di halaman produk kustom saya</h5>
    <h4><a href="?link-to-somewere">Tautkan ke suatu tempat!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

1.4) Logika bersyarat pada satu halaman produk

Kami sebelumnya telah melihat cara menambahkan bidang bersyarat pada halaman checkout tetapi Anda juga dapat menambahkannya ke halaman produk. Anda dapat membuat logika bersyarat untuk memenuhi persyaratan yang Anda inginkan menggunakan salah satu fungsi asli WordPress. Mari kita lihat beberapa contoh.

1.4.1) Masuk pengguna dan peran pengguna

user_is_logged_in() adalah fungsi WordPress default yang digunakan untuk memvalidasi pengunjung situs web. Selain itu, kita dapat menggunakan fungsi wp_get_current_user() untuk mengambil semua informasi yang terkait dengan pengguna yang masuk. Dalam skrip berikut, kami hanya menambahkan beberapa konten berdasarkan apakah pengguna masuk dan perannya, tetapi Anda dapat menambahkan fungsi khusus Anda untuk fungsionalitas yang lebih kompleks

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
fungsi QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $pengguna = wp_get_current_user(); 
    printf ('<h1>Howdy ' .$user->user_nicename.'!</h1>');
    $roles = ( array ) $user->roles;
        if($roles[0]=='administrator'){
            echo "<h4><b>Anda adalah $roles[0]</h4></b>";
        }     
    } 
    kalau tidak {
    kembali array();
    }     
}

1.4.2) ID Produk dan taksonomi

Demikian pula, kami dapat mengambil ID produk dan/atau kategori produk. Perbedaannya adalah kita akan menggunakan objek global WP $post untuk mendapatkan ID dan fungsi get_the_terms() untuk mendapatkan kategori produk.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
fungsi QuadLayers_get_product_taxonomies(){ 
    global $postingan; 
    $term_obj_list = get_the_terms( $post->ID, 'product_cat' );
    $terms_string = join(', ', wp_list_pluck($term_obj_list, 'nama'));
    if($terms_string=='Poster'){
        gema "
<h1>Ini adalah salah satu $terms_string</h1>" terbaik kami; echo "<h2>ID Produk: $post->ID"; } }

Skrip di atas akan mengembalikan satu kategori. Jika Anda perlu mengambil beberapa kategori atau tag, Anda perlu membuat fungsi yang lebih kompleks. Anda harus mengulang taksonomi sebelum menerapkan persyaratan Anda seperti yang ditunjukkan di bawah ini:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
fungsi QuadLayers_get_multiple_taxonomies(){
    global $postingan;
    $args = array( 'taksonomi' => 'produk_tag',);
    $terms = wp_get_post_terms($post->ID,'product_tag', $args);
    $hitung = hitung($syarat);
 if ($hitung > 0) {
        echo '<div class="custom-content"><h4>Daftar tag:</h4><ul>';
        foreach ($term sebagai $term) {echo '<li>'.$term->name.'</li>';}
        echo "</ul></div>";
    }
}

1.5) Edit tab produk

Kait filter woocommerce_product_tabs memungkinkan kita untuk menghapus, menambah, menyusun ulang, atau menambahkan tab baru di bagian Informasi Tambahan . Skrip berikut akan menghapus tab Deskripsi dan kontennya, mengganti nama tab Ulasan, dan mengubah prioritas Informasi tambahan ke tempat pertama.

 add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['deskripsi'] ); // Hapus tab Deskripsi
    $tabs['reviews']['title'] = __( 'Rating' ); // Ganti nama tab Review
    $tabs['tambahan_informasi']['prioritas'] = 5; // Informasi tambahan pada awalnya
    kembali $tab;
}

Edit halaman produk WooCommerce secara terprogram - Sesuaikan tab Produk Untuk mengedit konten tab, Anda perlu menggunakan fungsi panggilan balik seperti ini:

 add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );

fungsi woo_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Panggilan balik deskripsi khusus
	kembali $tab;
}
fungsi woo_custom_description_tab_content() {
	gema '
<h2>Deskripsi Khusus</h2>
'; echo 'Disini\'deskripsi khusus'; }

Demikian pula, kita dapat membuat tab baru sebagai berikut:

 add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {	
	// Menambahkan tab baru	
	$tabs['test_tab'] = array(
		'title' => __( 'Tab Produk Baru', 'woocommerce' ),
		'prioritas' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	kembali $tab;
}
fungsi woo_new_product_tab_content() {
	echo '<h2>Tab Produk Baru</h2><p>Ini adalah konten tab produk baru Anda</p>.'; 
}

Dalam contoh ini, kami baru saja membuat tab baru yang disebut "Tab Produk Baru". Beginilah tampilannya di bagian depan.

1.6) Dukungan untuk produk variabel

Variasi produk adalah fitur default WooCommerce dan Anda dapat membuat dan menggunakan produk variabel tanpa penyesuaian apa pun. Namun, Anda harus mengikuti panduan WooCommerce untuk membuat solusi khusus yang kompatibel dengan variasi produk.

Penting untuk dicatat bahwa solusi kustom apa pun harus terintegrasi dengan keseluruhan situs web dan bukan dengan satu halaman. Jadi, dengan mengingat hal ini, kita masih dapat menggunakan beberapa kait yang tersedia terkait dengan produk variabel. Kait ini hanya akan terpicu saat berada di halaman produk variabel.

woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation

2) Sesuaikan halaman produk yang menimpa file template WooCommerce

Alternatif kedua untuk mengedit halaman produk WooCommerce secara terprogram adalah dengan mengganti file template. Karena metode ini sedikit lebih berisiko daripada yang sebelumnya, kami menyarankan Anda membuat cadangan lengkap situs Anda sebelum memulai. Jika Anda tidak yakin bagaimana melakukannya, lihat panduan ini tentang cara membuat cadangan situs WordPress.

Mengganti file template WooCommerce mirip dengan mengganti file lain di tema anak Anda, jadi untuk menghindari kehilangan penyesuaian saat Anda memperbarui tema, kami sarankan Anda membuat tema anak atau menggunakan salah satu plugin ini jika Anda tidak memilikinya.

2.1) Edit informasi meta

Untuk mengedit meta-informasi, kita perlu mengganti file template yang bertanggung jawab untuk mencetak data yang sesuai. File meta.php yang terletak di plugin WooCommerce mengikuti jalur ini: woocommerce/templates/single-product/meta.php

Sekarang edit direktori file tema anak Anda dan buat folder WooCommerce. Kemudian, buat folder lain di dalamnya yang disebut produk tunggal dan rekatkan file meta.php di sana: Child_theme/woocommerce/single-product/meta.php

Setelah ini, Anda harus dapat mengedit file meta.php dan melihat perubahan Anda di frontend. File contoh meta.php berikut akan:

Ubah label SKU menjadi ID
Ubah tag menjadi Diterbitkan di bawah
Hapus label kategori

 global $produk;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'T/A', 'woocommerce' ); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids () ), 'woocommerce' ). ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) Beralih ke templat khusus untuk kategori produk tertentu

Sekarang mari kita coba tugas yang lebih kompleks. Kami akan mengganti template produk tunggal hanya jika produk saat ini termasuk dalam kategori tertentu.

2.2.1) Edit file single-product.php

Pertama, salin file single-product.php dan tempel di folder tema anak Anda, di direktori WooCommerce:

Child_theme/woocommerce/single-product.php

Kemudian, buka file tersebut dan centang baris 37: wc_get_template_part('content','single-product');

Beginilah cara file content-single-product.php beraksi, mencetak semua elemen produk saat ini untuk menyelesaikan loop dan membangun tata letak.

Kami ingin mengganti file ini hanya ketika produk termasuk dalam kategori yang ditentukan, jadi kami akan menghapus baris 37: wc_get_template_part( 'content', 'single-product' ); dan ganti dengan script berikut:

 $terms = wp_get_post_terms( $post->ID, 'product_cat' );
				$kategori = wp_list_pluck( $istilah, 'siput' );
			
				if ( in_array( 'poster', $kategori ) ) {
					wc_get_template_part( 'konten', 'poster produk tunggal');
				} kalau tidak {
					wc_get_template_part( 'konten', 'produk tunggal');
				}

Perhatikan bahwa kami menggunakan produk sampel yang disediakan oleh WooCommerce, jadi ada kategori yang disebut " Poster " yang kami gunakan untuk contoh ini. Cukup ganti “ poster ” dengan kategori produk yang ada di situs web Anda.

Ingatlah bahwa Anda dapat menemukan slug dari semua kategori produk Anda di dasbor WordPress utama > Produk > Kategori .

2.2.2) Buat file content-single-product.php baru

Sekarang kita perlu membuat file baru yang akan menggantikan file default content-single-product.php . File ini akan memiliki kategori slug dalam namanya.

Lihat contoh di atas untuk melihat bagaimana file content-single-product-posters.php dipanggil. Ini penting karena nama file harus sesuai dengan kode pada langkah sebelumnya, jadi file Anda harus bernama content-single-product-/*YOURCATEGORYSLUG*/.php .

Dengan cara ini, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) akan memicu file content-single-product-YOURCATEGORY.php dan akan menimpa file template WooCommerce default.

Cukup tempel file default content-single-product.php di folder WooCommerce tema anak Anda, ganti namanya dengan mengikuti petunjuk yang dijelaskan di atas dan buat beberapa edisi untuk mengujinya.

2.2.3) Buat template khusus yang mengedit file `content-single-product.php` baru Anda

Ini adalah halaman contoh produk yang akan ditampilkan hanya jika produk saat ini termasuk dalam kategori “ poster ”. Anda akan melihat bahwa kami telah menambahkan beberapa konten, menambahkan dan menghapus elemen, menyusun ulang, dan menjalankan beberapa kode pendek.

Meskipun merupakan contoh dasar, ini akan memberi Anda gambaran tentang apa yang dapat Anda lakukan pada halaman template dan memungkinkan Anda menjelajahi kemungkinan baru.

 // hapus elemen ringkasan produk
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Konten khusus
		printf('<h1>Ini adalah <b>'.$post->post_name.' </b>poster</h1>');
		printf('<h4>Halaman produk penuh yang disesuaikan untuk produk kategori "poster"</h4>');
		// Keterangan
		printf('<h5>'.$post->post_excerpt.'</h5>');
		// gambar kecil
		do_action('woocommerce_before_single_product_summary' );
				
		//tambahkan meta
		do_action('woocommerce_single_product_summary');
		// kode pendek
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Kontak:</h3>".do_shortcode('[wpforms]'); echo "<h3>Poster lainnya:</h3>".do_shortcode(' [ product_category category="posters" orderby="desc" limit="4" ] ');

Sekarang jika kita memeriksa frontend, kita akan melihat yang berikut: Cara mengedit halaman produk WooCommerce secara terprogram - Templat halaman produk untuk taksonomi tertentu Perhatikan bahwa kita menggunakan objek global post. var_dump($post); untuk menunjukkan kepada Anda semua informasi yang tersedia terkait dengan produk saat ini. Anda dapat menggunakan datanya seperti yang telah kami lakukan pada contoh skrip dengan deskripsi produk: $post->post_excerpt .

3) Sesuaikan halaman produk dengan skrip CSS

Cara praktis dan sederhana lainnya untuk mengedit halaman produk WooCommerce (dan halaman lainnya) secara terprogram adalah dengan menggunakan kode CSS . Ini akan membantu Anda menata halaman produk dan memberikan tampilan dan nuansa bisnis Anda.

1. Pertama, Anda perlu membuat file baru di tema anak Anda dengan ekstensi .css sehingga Anda dapat menambahkan skrip CSS Anda di sana. Kami sarankan Anda menamakannya single-product.css atau yang serupa sehingga mudah ditemukan.
2. Kemudian, tempatkan file di folder utama tema anak pada level yang sama dengan file functions.php dan style.css .
3. Setelah itu, tempel skrip berikut di file functions.php tema anak Anda dan ganti nama file CSS Anda jika perlu.

 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      fungsi load_custom_product_style() {
        jika ( is_produk() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
          wp_enqueue_style('produk_css');
        }
	  }

Kondisi if(is_product()) akan memeriksa apakah halaman saat ini adalah halaman produk. Ini mencegah pemuatan file CSS yang tidak perlu saat itu bukan halaman produk.

4. Setelah menambahkan cuplikan ini, Anda seharusnya dapat mengedit gaya halaman produk dengan menambahkan aturan CSS khusus ke file CSS Anda.

Meskipun metode ini cukup sederhana dan akan memberi Anda solusi yang cepat dan mudah, ini mungkin tidak ideal untuk beberapa kasus. Karena CSS dapat diedit dari frontend, jika pengguna mengetahui cara menggunakan alat pengembang browser, mereka dapat dengan mudah menampilkan elemen tersembunyi apa pun dengan mengedit CSS.

Edit halaman produk tunggal WooCommerce dengan CSS

Mari kita lihat beberapa contoh perubahan lain yang dapat Anda lakukan pada halaman produk menggunakan sedikit CSS.

Untuk menerapkan skrip berikut, di dasbor WordPress Anda, buka Appearance > Customize > Additional CSS.

Ubah ukuran font judul

Ini akan mengubah ukuran font judul produk halaman Anda menjadi 32. Cukup sesuaikan kode untuk memilih ukuran yang Anda inginkan.

 .woocommerce div.product .product_title { 
        ukuran font: 32px; 
}

Ubah warna judul

Anda juga dapat menyesuaikan warna judul halaman produk Anda. Untuk melakukannya, cukup gunakan kode berikut dan sesuaikan warnanya. Untuk contoh ini, kami menggunakan oranye. Kami menyarankan Anda menggunakan pemilih kode hex seperti ini untuk memilih warna yang Anda inginkan.

 .woocommerce div.product .product_title { 
            warna: #FFA500; 
}

Ubah warna tombol Beli Sekarang

Demikian pula, Anda dapat mengubah warna tombol Beli Sekarang. Dalam contoh ini, kami menggunakan dodger blue, tetapi Anda dapat memilih warna lain yang Anda inginkan dengan menyesuaikan kode.

 .woocommerce div.product .button { 
        latar belakang: #1E90FF; 
}

Kesimpulan

Singkatnya, menyesuaikan toko online Anda adalah kunci untuk menonjol dari pesaing Anda. Halaman produk adalah beberapa halaman terpenting di toko mana pun dan ada banyak hal yang dapat Anda lakukan untuk meningkatkan pengalaman pelanggan dan meningkatkan penjualan Anda.

Meskipun Anda dapat menggunakan plugin untuk ini, kami sarankan Anda mengedit halaman produk WooCommerce secara terprogram jika Anda memiliki beberapa keterampilan pengkodean. Ini memberi Anda banyak fleksibilitas untuk menyesuaikan elemen apa pun dari toko Anda tanpa perlu menginstal alat tambahan apa pun. Dalam panduan ini, kita telah melihat cara menyesuaikan halaman produk dengan tiga cara berbeda:

Menggunakan kait
Mengganti template WooCommerce
Dengan skrip CSS

Jika memungkinkan, Anda harus mencoba menggunakan kait WooCommerce alih-alih menimpa file template. Ini adalah salah satu praktik terbaik yang direkomendasikan WordPress dan risikonya lebih kecil. Namun, untuk tugas kompleks yang menyertakan fungsi atau objek, Anda mungkin perlu mengedit file template. Jika Anda berhasil mengombinasikan kedua teknik, Anda akan dapat menyesuaikan apa pun yang Anda inginkan di toko Anda.

Terakhir, lihat tema anak lengkap yang menyertakan semua contoh skrip yang telah kita gunakan dalam tutorial ini. Untuk informasi lebih lanjut tentang cara menyesuaikan toko Anda, lihat panduan berikut:

Pelajari cara menyesuaikan file template WooCommerce
Cara Menyesuaikan Halaman Toko WooCommerce
Sesuaikan tombol Tambahkan ke Keranjang di WooCommerce
Cara menghapus produk terkait WooCommerce
Cara mengedit WooCommerce Checkout (Coding & Plugin)

Apakah Anda memiliki masalah dalam mengikuti tutorial kami? Beri tahu kami di bagian komentar di bawah dan kami akan melakukan yang terbaik untuk membantu Anda.

Cara mengedit halaman produk WooCommerce secara terprogram

Menyesuaikan Halaman Produk

Cara mengedit halaman produk WooCommerce secara terprogram

Tata Letak Halaman Produk WooCommerce

1) Edit halaman produk WooCommerce menggunakan kait

1.1) Hapus elemen dari halaman produk tunggal

1.2) Susun ulang elemen

1.3) Tambahkan elemen baru

1.4) Logika bersyarat pada satu halaman produk

1.4.1) Masuk pengguna dan peran pengguna

1.4.2) ID Produk dan taksonomi

1.5) Edit tab produk

1.6) Dukungan untuk produk variabel

2) Sesuaikan halaman produk yang menimpa file template WooCommerce

2.1) Edit informasi meta

2.2) Beralih ke templat khusus untuk kategori produk tertentu

2.2.1) Edit file single-product.php

2.2.2) Buat file content-single-product.php baru

2.2.3) Buat template khusus yang mengedit file content-single-product.php baru Anda

3) Sesuaikan halaman produk dengan skrip CSS

Edit halaman produk tunggal WooCommerce dengan CSS

Ubah ukuran font judul

Ubah warna judul

Ubah warna tombol Beli Sekarang

Kesimpulan

2.2.3) Buat template khusus yang mengedit file `content-single-product.php` baru Anda