Ürün Sayfasına Form Nasıl Eklenir WooCommerce

Ürün sayfasına özel bir form eklemek ister misiniz? Bu gönderi sizin için bir çözüm sağlamayı amaçladığından, okumaya devam edin.

WooCommerce, özelleştirmeye esnek olduğu için birçok mağazaya güç sağlamaya devam ediyor. Örneğin, ürün sayfanıza bazı ekstra bilgiler eklemek isteyebilirsiniz. Bunu uygulamanın en iyi yolu, ürünlere özel alanlar eklemektir.

Özel alanlara ayrıca öğe metası da denir. Sepet sayfasında, ödeme sayfasında ve e-postalarda da görüntülenebilirler. Sepet öğesi meta, ekstra ürün alanlarında toplanan bilgilerin sepetteki ürünlere eklendiği ve sipariş için kaydedilebildiği zamandır.

Bu nedenle, ürün sayfasına özel veri alanları ekleyecek ve bu bilgileri sepet öğesi metasına ekleyecek bir çözüme ihtiyacımız var. Bundan sonra toplanan veriler alışveriş sepeti, ödeme ve sipariş detaylarında görüntülenir.

Ancak WooCommerce, bu özelliği eklemek için yerleşik bir çözüme sahip değildir. Bu, bunu başarmak için özel bir kod parçacığı oluşturmamız gerektiği anlamına gelir. Eklentileri yalnızca sitenizde büyük bir değişiklik istediğinizde öneririz.

WooCommerce Ürün Sayfasına Form Ekleme

Bugünkü eğitimde, iki alan içeren bir form eklemek için oluşturduğumuz özel bir kod parçacığını paylaşacağız. Bir ad ve mesaj alanı oluşturacağız ve alan verilerini Sepet Öğesi meta ve Sipariş Öğesi meta olarak görüntüleyeceğiz. Bu, sipariş döngüsü boyunca gösterileceği anlamına gelir.

Devam etmeden önce, bir alt tema kurmanızı veya oluşturmanızı öneririz. Bunun nedeni, bazı çekirdek dosyaları değiştireceğiz. Alt tema, güncelleme sırasında değişikliklerin kaybolmamasını sağlar.

Hemen konuya girelim.

WooCommerce Ürün Sayfasına Form Ekleme Adımları

İşte izlemeniz gereken adımlar:

1. WordPress sitenize giriş yapın ve yönetici kullanıcı olarak Gösterge Tablosuna erişin.
2. Pano menüsünden Görünüm Menüsü > Tema Düzenleyici Menüsü öğesine tıklayın. Tema Düzenleyici sayfası açıldığında, WooCommerce ürün sayfasına bir form ekleme işlevi eklemek için tema işlevleri dosyasını arayın.
3. php dosyasına aşağıdaki kodu ekleyin :

add_action( 'woocommerce_before_add_to_cart_button', 'njengah_fields_before_add_to_cart' );
function njengah_fields_before_add_to_cart( ) {
	?>
	<table>
		<tr>
			<td>
				<?php _e( "Name:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card">
			</td>
		</tr>
		<tr>
			<td>
				<?php _e( "Message:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card">
			</td>
		</tr>
	</table>
	<?php
}
/**
 * Add data to cart item
 */
add_filter( 'woocommerce_add_cart_item_data', 'njengah_cart_item_data', 25, 2 );
function njengah_cart_item_data( $cart_item_meta, $product_id ) {
	if ( isset( $_POST ['customer_name'] ) && isset( $_POST ['customer_message'] ) ) {
		$custom_data  = array() ;
		$custom_data [ 'customer_name' ]    = isset( $_POST ['customer_name'] ) ?  sanitize_text_field ( $_POST ['customer_name'] ) : "" ;
		$custom_data [ 'customer_message' ] = isset( $_POST ['customer_message'] ) ? sanitize_text_field ( $_POST ['customer_message'] ): "" ;
		$cart_item_meta ['custom_data']     = $custom_data ;
	}
		return $cart_item_meta;
}
/**
 * Display the custom data on cart and checkout page
 */
add_filter( 'woocommerce_get_item_data', 'njengah_item_data' , 25, 2 );
function njengah_item_data ( $other_data, $cart_item ) {
	if ( isset( $cart_item [ 'custom_data' ] ) ) {
		$custom_data  = $cart_item [ 'custom_data' ];
				$other_data[] =   array( 'name' => 'Name',
					 'display'  => $custom_data['customer_name'] );
		$other_data[] =   array( 'name' => 'Message',
					 'display'  => $custom_data['customer_message'] );
	}
		return $other_data;
}
/**
 * Add order item meta
 */
add_action( 'woocommerce_add_order_item_meta', 'njengah_order_item_meta' , 10, 2);
function njengah_order_item_meta ( $item_id, $values ) {
	if ( isset( $values [ 'custom_data' ] ) ) {
		$custom_data  = $values [ 'custom_data' ];
		wc_add_order_item_meta( $item_id, 'Name', $custom_data['customer_name'] );
		wc_add_order_item_meta( $item_id, 'Message', $custom_data['customer_message'] );
	}
}

4. Bu, ürün sayfasındaki sonuçtur:
5. Bu, sepet sayfasındaki sonuçtur:
6. Bu, ödeme sayfasındaki sonuçtur:
7. Bu, sipariş ayrıntıları sayfasındaki sonuçtur:
8. Bu, düzenleme siparişi sayfasındaki sonuçtur:

Toplama

Bugünkü eğitimde, ürün sayfasına form eklemek için yaptığımız özel bir çözümü paylaştık. Toplanan ayrıntılar, bu gönderide gösterdiğimiz gibi, sipariş ayrıntılarında görünecektir.

Ancak WooCommerce mağazanızın çekirdek dosyalarını düzenlerken çok dikkatli olmalısınız. Herhangi bir hata yaparsanız, bir hata görüntülenecektir.

Bu çözümün sipariş döngüsünün nasıl çalıştığını anlamanıza yardımcı olacağını umuyoruz.

Benzer Makaleler

1. Shopify'dan WooCommerce'e Nasıl Geçilir?
2. WooCommerce Ödeme Hata Mesajları Nasıl Değiştirilir
3. WooCommerce Özel Tek Ürün Sayfası Oluşturun
4. WooCommerce Vitrin Teması Ürün Sayfası Tam Genişliği Nasıl Ayarlanır
5. WooCommerce'de Durum Değişikliğinde E-posta Nasıl Gönderilir
6. Ödeme Sayfasında Sipariş Kimliği Nasıl Alınır WooCommerce
7. Kupon Kodu Yer Tutucusu Nasıl Değiştirilir WooCommerce
8. Sayfanın Üstü Vitrin Temasına Arama Kutusu Nasıl Eklenir
9. Özel Ürün Alanları Nasıl Eklenir WooCommerce
10. WooCommerce Siparişler Sayfasına Yeni Sütun Nasıl Eklenir
11. Sepet Sayfasına WooCommerce Kargo Hesaplayıcı Nasıl Eklenir
12. WooCommerce Ürünlerine Özel Taksonomi Nasıl Eklenir?
13. WooCommerce Ürününe Yıldız Derecelendirmesi Nasıl Eklenir?
14. Ücretsiz Gönderim Varsa Kargo Ücretlerini Gizleme WooCommerce
15. WooCommerce Ödeme Sayfası Nasıl Çevirilir
16. WooCommerce Veritabanına Nasıl Erişilir
17. Mevcut Ürün Nasıl Alınır WooCommerce
18. En İyi 30+ En İyi WordPress Form Eklentisi » En İyi WordPress Form Eklentisi
19. WooCommerce Nasıl Kurulur
20. Eklenti Kullanmadan WordPress'te Giriş Sayfası Nasıl Oluşturulur