افزودن فیلد سفارشی در ووکامرس
یکی از بزرگ‌ترین ویژگی‌های ووکامرس، انعطاف‌پذیری بسیار بالای آن است که به شما که مالک فروشگاه هستید امکان هر نوع تغییری را می‌دهد. یکی از این تغییرات استفاده از هوک‌ها (Hooks) برای اضافه کردن موارد دلخواه به صفحه تکی محصول است. در این مقاله ما با استفاده از دو هوک woocommerce_add_cart_item_data و woocommerce_add_to_cart_validation یک افزونه که یک آیتم داده سفارشی سبد خرید به ووکامرس اضافه می‌کند را ایجاد می‌کنیم. در واقع بطور کلی می‌خواهیم امکان افزودن فیلد سفارشی در ووکامرس را فراهم کنیم که این فیلد سفارشی مربوط به سبد خرید می شود.
توصیه: این آموزش در دو بخش برنامه‌نویسی و استفاده از افزونه ارائه شده است. بخش برنامه نویسی مناسب کسانی است که آشنایی مختصری با هوک‌ها و کدنویسی دارند، اما اگر شما هیچ پیش زمینه‌ای در این حوزه ندارید، توصیه می‌کنم این قسمت از مقاله را هم مطالعه کنید تا چشمتان به دیدن کدهای PHP عادت کند و روش ایجاد یک افزونه ساده را هم یاد بگیرید.
در پایان این مقاله، افزونه‌ای را که با استفاده از این آموزش ایجاد کرده‌ایم، قرار می‌دهیم تا شما بتوانید از آن برای افزودن فیلد سفارشی به محصول استفاده کنید.
نحوه‌ی افزودن آیتم اطلاعات سفارشی سبد خرید در ووکامرس
در این مقاله قصد داریم با دو روش زیر امکان افزودن فیلد سفارشی در ووکامرس را به صفحه تکی محصول اضافه کنیم:
در این بخش، ما به افزودن فیلدهای سفارشی به محصولات ووکامرسی نگاه خواهیم کرد و از نمایش در صفحه تکی تا نمایش در ایمیل، خرید را انجام می‌دهیم. برای کسب اطلاعات بیشتر می‌توانید از آموزش چگونه فیلدهای دلخواه را به یک محصول ووکامرس اضافه کنیم؟ استفاده کنید.
قسمت‌هایی که در این بخش ارائه می‌دهیم:
برای ایجاد فایل افزونه کافی است کد زیر را در یک فایل قرار داده و با فرمت PHP ذخیره کنید و در یک پوشه با نام دلخواه در هاست خود و در مسیر
wp-content/plugins قرار دهید:
<?php /** * Plugin Name: Add Custom Cart * Plugin URI: https://hamyarwp.com/member/36218/ * Description: This small plugin will generate and display a custom product field. * Version: 1.0.0 * Author: Amir Ebadi * Author URI: https://yotawp.com/ */
فرض کنید ما یک کسب‌وکار چاپ آنلاین داریم و به مشتریان پیشنهاد می‌دهیم تا نام خود را در یکی از پوسترهای ما چاپ کنند. برای این کار، باید یک فیلد متنی در صفحه محصول اضافه کنیم تا کاربر بتواند با استفاده از آن نام خود را وارد کند.
/**
* Add a custom text input field to the product page
*/
function plugin_republic_add_text_field() { ?>
<div class="pr-field-wrap">
<label for="pr-field"><?php _e( 'Your name', 'plugin-republic' ); ?></label>
<input type="text" name='pr-field' id='pr-field' value=''>
</div>
<?php }
add_action( 'woocommerce_before_add_to_cart_button', 'plugin_republic_add_text_field' );
توجه داشته باشید که ما فیلد خود را با استفاده از اکشن woocommerce_before_add_to_cart_button وارد می‌کنیم و همان‌طور که ممکن است از نام آن حدس بزنید، این اکشن قبل از دکمه «افزودن به سبد خرید» در صفحه محصول نمایش داده می‌شود.
هوک‌ها در واقع راه توسعه وردپرس هستند. به‌عبارت دیگر با استفاده از هوک‌ها می‌توانید کدهای موردنظر خودتان را در وردپرس قرار دهید. ووکامرس شامل صدها مکان برای استفاده از هوک‌ها است و شما می‌توانید با استفاده از این هوک‌ها افزونه‌های انعطاف‌پذیر و با قابلیت سفارشی‌سازی بسیار بالایی را برای خودتان ایجاد کرده و امکان افزودن فیلد سفارشی در ووکامرس را محیا سازید.
دو نوع هوک وجود دارد: اکشن و فیلتر. اکشن‌ها راه مناسب برای اضافه کردن توابع را نشان می‌دهند و فیلترها یک راه برای تغییر محتوا هستند.
ما در این مقاله هر دو نوع هوک را بررسی می‌کنیم، اما اکنون کافی است بدانید که هوک‌ها راهی برای قرار دادن توابع مورد نظر شما در یک افزونه مانند ووکامرس یا خود وردپرس هستند.
به نمونه کدهای یک صفحه محصول ساده نگاه کنید:
<?php /** * Simple product add to cart * * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/simple.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce/Templates * @version 3.4.0 */ defined( 'ABSPATH' ) || exit; global $product; if ( ! $product->is_purchasable() ) {
return;
}
echo wc_get_stock_html( $product ); // WPCS: XSS ok.
if ( $product->is_in_stock() ) : ?>
<?php do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data'>
<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<?php do_action( 'woocommerce_before_add_to_cart_quantity' ); woocommerce_quantity_input( array( 'min_value' => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
) );
do_action( 'woocommerce_after_add_to_cart_quantity' );
?>
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
</form>
<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>
<?php endif; ?>
در خط 26 یعنی <?php do_action( ‘woocommerce_before_add_to_cart_button’ ); ?> می‌توانید اکشن woocommerce_before_add_to_cart_button را درست قبل از نمایش کدهای تعداد محصول و افزودن به سبد خرید مشاهده کنید.
اگر می‌خواهید جای فیلد سفارشی را تغییر دهید و بعد از دکمه افزودن به سبد خرید قرار دهید، می‌توانید به‌جای اکشن woocommerce_before_add_to_cart_button از اکشن woocommerce_after_add_to_cart_button استفاده کنید.
توجه داشته باشید که هر دوی این هوک‌ها داخل عنصر <form> ظاهر می‌شوند.
هنگامی‌که کاربر روی دکمه افزودن به سبد خرید کلیک کند چه اتفاقی رخ می‌دهد؟در این قسمت به بررسی این مورد می‌پردازیم.
هنگامی‌که کاربران روی دکمه افزودن به سبد خرید کلیک می‌کنند، داده‌ها از فرم محصول به سرور ارسال می‌شوند. این داده‌ها به‌طور معمول شامل مواردی مانند شناسه محصول و مقدار می‌شوند، اما چون ما یک فیلد دیگر را اضافه کرده‌ایم، مقدار فیلد خودمان را به عنوان داده‌های سفارشی همراه با موارد دیگر به سرور ارسال می‌کنیم.
همه این داده‌ها از طریق دو هوک ووکامرس منتقل می‌شوند که به ما اجازه می‌دهد محتوای فیلد را بررسی کنیم، سپس آن را به سفارش خود اضافه کنیم.
بیایید بگوییم ما نیاز داریم که مشتری نام خود را در فیلد سفارشی وارد کند، در غیر این صورت آن‌ها نمی‌توانند محصول را به سبد خرید اضافه کنند.
ما می‌توانیم با استفاده از اعتبار سنجی این کار را انجام دهیم؛ یعنی زمانی که محصول به سبد خرید افزوده می‌شود مقدار فیلد سفارشی را بررسی می‌کنیم. اگر خالی باشد، دکمه افزودن به سبد خرید فعال نمی‌شود. ما این کار را با استفاده از هوک woocommerce_add_to_cart_validation انجام می‌دهیم.
همان‌طور که در بالا ذکر کردیم دو نوع هوک داریم: اکشن و فیلتر. هوک woocommerce_add_to_cart_validation یک فیلتر است: یک پارامتر است که ما می‌توانیم آن را تغییر دهیم.
در مورد woocommerce_add_to_cart_validation، پارامتر Passed$ نامیده می‌شود و می‌تواند درست یا غلط باشد. اگر درست باشد محصول به سبد اضافه می‌شود و ما می‌توانیم به مرحله بعدی برویم؛ اما اگر اشتباه باشد، محصول به سبد اضافه نمی‌شود و ما می‌توانیم یک پیام خطا را نمایش دهیم.
تابع اعتبارسنجی ما به شکل زیر است:
/**
* Validate our custom text input field value
*/
function plugin_republic_add_to_cart_validation( $passed, $product_id, $quantity, $variation_id=null ) {
if( empty( $_POST['pr-field'] ) ) {
$passed = false;
wc_add_notice( __( 'فیلد نام شما ضروری است.', 'plugin-republic' ), 'error' );
}
return $passed;
}
add_filter( 'woocommerce_add_to_cart_validation', 'plugin_republic_add_to_cart_validation', 10, 4 );
بسیار خوب، در اینجا چند گزینه وجود دارد:
در اینجا ما از 4 پارامتر تابع اعتبارسنجی سفارشی استفاده کرده‌ایم:
هنگامی که روی دکمه افزودن به سبد خرید را کلیک می‌کنیم، تمام اطلاعات فرم به سرور ارسال می‌شود و توسط شیء POST_$ جمع‌آوری می‌شود؛ بنابراین این تابع چک می‌کند که آیا این فیلد خالی است یا خیر، اگر خالی باشد ما مقدار Passed$ را به false تغییر می‌دهیم.
اگر فیلد سفارشی خالی باشد و اعتبارسنجی نتواند انجام شود، احتمالاً باید یک پیام به کاربر بگوید که یک اشتباهی رخ‌داده است. ما می‌توانیم با استفاده از تابع wc_add_notice این کار را انجام دهیم.
اولین پارامتر پیام خطایی است که نمایش داده می‌شود و پارامتر دوم نوع پیام را نشان می‌دهد که در اینجا ‘error’ قرارگرفته است.
درنهایت، به دلیل اینکه woocommerce_add_to_cart_validation یک فیلتر است، ما باید پارامتر Passed$ را برگردانیم. اگر اعتبارسنجی تصویب‌شده باشد، مقدار Passed$ تغییر نخواهد کرد؛ اما اگر کاربر نام خود را وارد نکرده باشد و اعتبار سنجی شکست‌خورده باشد، ارزش Passed$ نادرست خواهد بود.
حالا ما به سراغ کار اصلی خودمان می‌رویم، چگونگی افزودن فیلد سفارشی در ووکامرس.
اگر اعتبارسنجی محصول با موفقیت انجام شد، ما باید داده‌های فیلد سفارشی را به متا داده‌های سبد خرید اضافه کنیم. با این کار می‌توانیم داده‌ها را در سبد خرید و صفحه پرداخت خودمان داشته باشیم.
از یک فیلتر دیگر به نام woocommerce_add_cart_item_data استفاده می‌کنیم تا آیتم داده سفارشی را به سبد خرید اضافه کنیم. به کدهای زیر نگاه کنید:
/**
* Add custom cart item data
*/
function plugin_republic_add_cart_item_data( $cart_item_data, $product_id, $variation_id ) {
if( isset( $_POST['pr-field'] ) ) {
$cart_item_data['pr_field'] = sanitize_text_field( $_POST['pr-field'] );
}
return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'plugin_republic_add_cart_item_data', 10, 3 );
در اینجا the woocommerce_add_cart_item_data از cart_item_data$ استفاده می‌کند که یک آرایه از داده‌ها برای هر آیتم در سبد خرید است. ما می‌توانیم داده‌های خود را به این آرایه اضافه کنیم و سپس آن را به ووکامرس منتقل کنیم.
دوباره توجه داشته باشید که ما از شیء POST_$ برای جمع‌آوری داده‌های سفارشی استفاده می‌کنیم. ما همچنین sanitize_text_field را برای تطبیق ورودی کاربر استفاده می‌کنیم و داده‌های تطبیق داده‌شده را به آرایه cart_item_data$ اضافه می‌کنیم تا بعداً از آن استفاده کنیم.
چه اتفاقی می‌افتد اگر مشتری شما بخواهد دو مورد را خریداری کند. یکی با نام خودش و دیگری با نام دوستش؟
ووکامرس متوجه خواهد شد که داده‌های سفارشی در هر مورد متفاوت است و آیتم‌های خطی جداگانه را در سبد خرید ایجاد خواهند کرد.
از سوی دیگر، اگر مشتری شما یک محصول مشابه با یک متن سفارشی را دو بار اضافه کند، ووکامرس آن‌ها را به‌عنوان یک آیتم خطی با مقدار 2 نمایش می‌دهد.
هنگامی‌که متا داده سفارشی ما در cart_item_data$ با موفقیت ذخیره شود، ما می‌توانیم آن را در سبد خرید نمایش دهیم.
/**
* Display custom item data in the cart
*/
function plugin_republic_get_item_data( $item_data, $cart_item_data ) {
if( isset( $cart_item_data['pr_field'] ) ) {
$item_data[] = array(
'key' => __( 'Your name', 'plugin-republic' ),
'value' => wc_clean( $cart_item_data['pr_field'] )
);
}
return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'plugin_republic_get_item_data', 10, 2 );
در اینجا ما دو پارامتر را می‌بینیم، اولین پارامتر item_data$ است، جایی که داده‌ها را برای هر آیتم در سبد خرید ذخیره می‌کنیم. پارامتر دوم cart_item_data$ است، جایی که ما در حال حاضر مقدار فیلد سفارشی را برای افزودن فیلد سفارشی در ووکامرس ذخیره کرده‌ایم.
برای اینکه فیلد سفارشی در صفحه سفارش ظاهر شود از هوک woocommerce_checkout_create_order_line_item استفاده می‌کنیم. توجه داشته باشید این هوک یک اکشن است چون هیچ مقداری بازگشتی ندارد.
/**
* Add custom meta to order
*/
function plugin_republic_checkout_create_order_line_item( $item, $cart_item_key, $values, $order ) {
if( isset( $values['pr_field'] ) ) {
$item->add_meta_data(
__( 'نام شما', 'plugin-republic' ),
$values['pr_field'],
true
);
}
}
add_action( 'woocommerce_checkout_create_order_line_item', 'plugin_republic_checkout_create_order_line_item', 10, 4 );
بعد از اینکه پرداخت انجام شد، خریدار می‌تواند در صفحه سفارش خود متن سفارشی خودش را مشاهده کند:
با انجام مراحل بالا علاوه بر اینکه داده سفارشی ما در صفحه سفارش محصول برای خریدار نمایش داده می‌شود، در قسمت ادمین سایت هم برای ما نمایش داده می‌شود. کافی است از مسیر ووکامرس > سفارشات، روی سفارش موردنظر خود کلیک کنید تا اطلاعات مربوط به آن را مشاهده نمایید.
درنهایت، شما احتمالاً می‌خواهید متا داده‌های سفارشی خود را ایمیل کنید. برای این کار از کد زیر استفاده کنید. دقت کنید با استفاده از کد زیر هم به ایمیل فروشنده (مالک سایت) و هم به خریدار ارسال می‌شود.
/**
* Add custom cart item data to emails
*/
function plugin_republic_order_item_name( $product_name, $item ) {
if( isset( $item['pr_field'] ) ) {
$product_name .= sprintf(
'
<ul>
<li>%s: %s</li>
</ul>
',
__( 'نام شما', 'plugin_republic' ),
esc_html( $item['pr_field'] )
);
}
return $product_name;
}
add_filter( 'woocommerce_order_item_name', 'plugin_republic_order_item_name', 10, 2 );
به همین راحتی داده سفارشی شما به ایمیل اضافه شد.
در بالا با استفاده از برنامه‌نویسی یک افزونه دلخواه را ایجاد و از آن در سایت خودمان استفاده کردیم. حالا برای دوستانی که زیاد اهل برنامه‌نویسی نیستند و نمی‌خواهند خودشان را درگیر آن کنند استفاده از افزونه را آموزش می‌دهیم. در این آموزش می‌خواهیم از افزونه Woocommerce Product Addons استفاده کنیم.
مراحل کار با افزونه را قدم‌به‌قدم پیش می‌بریم:
1- افزونه Woocommerce Product Addons را از انتهای همین آموزش دانلود کرده و نصب کنید.
2- بعد از نصب افزونه، یک گزینه به نام Custom Product Addons به قسمت محصولات شما اضافه می‌شود. روی آن کلیک کنید و سپس Add New Form را بزنید تا بتوانید فیلد موردنظر خودتان را اضافه کنید:
3- در قسمت عنوان، عنوان مناسب خودتان را در فرآیند افزودن فیلد سفارشی به محصول وارد کنید. حالا ما در اینجا می‌خواهیم یک فیلد متنی مانند بالا، به صفحه تکی محصول اضافه کنیم. برای این کار فیلد Text Field را به سمت چپ بکشید و رها کنید:
4- حالا اگر موس را روی فیلد ببرید، سه گزینه برای شما ظاهر می‌شود، مانند شکل روی گزینه وسط کلیک کنید تا وارد بخش ویرایش فیلد شوید:
5- بخش ویرایش فیلد متنی دارای 7 قسمت است:
Label: در اینجا می توانید برچسب مربوط به فیلد خودتان را وارد کنید. این برچسب در بالای کادر قرار می‌گیرد.
Placeholder: متن نگه‌دارنده را می‌توانید به‌عنوان یک راهنما قرار دهید. این متن هنگامی‌که کاربر روی آن کلیک کند حذف می‌شود.
Class: اگر می‌خواهید فیلد خودتان را سفارشی‌سازی کنید، می‌توانید از اینجا کلاس مربوط به آن را بنویسید.
Name: در این بخش هم می‌توانید یک نام یکتا را برای فیلد انتخاب کنید.
Value: با استفاده از Value، می‌توانید یک مقدار اولیه به فیلد خودتان بدهید.
Type: از این بخش هم می‌توانید نوع فیلد را مشخص کنید، مثلاً اگر روی email قرار دهید فیلد حتما باید فرمت ایمیل را داشته باشد تا خطا ندهد.
Max Length: در اینجا هم می‌توانید طول متن خودتان را تعیین کنید.
در پایان روی close، پایین صفحه کلیک کنید تا تنظیمات ذخیره شود. روی انتشار کلیک کنید تا فرم ساخته شود.
6- بعدازاینکه تنظیمات مربوط به فیلد را انجام دادید، وارد یکی از محصولات خودتان شوید و یا یک محصول جدید اضافه کنید. در بخش اطلاعات محصول یک گزینه به نام Custom Product Options اضافه‌شده است. روی آن کلیک کنید و فرمی را که در مرحله قبلی ایجاد کردید را انتخاب کنید و محصول را به‌روزرسانی کنید:
7- حال اگر به صفحه محصول خودتان وارد شوید، می‌بیند که فیلد موردنظر شما اضافه‌شده است:
8- متن دلخواه خودتان را وارد کنید و روی افزودن به سبد خرید کلیک کنید. همان‌طور که می‌بینید متن انتخابی شما در سبد خرید نمایش داده می‌شود:
9- هنگامی که خریدار محصول را بخرد، در صفحه سفارش خود می‌تواند متن سفارشی خودش را مشاهده کند:
10- همچنین یک ایمیل به فروشنده و یک ایمیل به خریدار ارسال می‌شود و در هر دو ایمیل هم می‌توان متن سفارشی کاربر را مشاهده کرد:
افزودن فیلد سفارشی در ووکامرس باعث می‌شود که دست کاربر در انتخاب گزینه‌ها، وارد کردن یک متن دلخواه، وارد کردن یک رنگ، وارد کردن شماره و … باز باشد. پیشنهاد می‌کنیم حتما از این فیلدها استفاده کنید تا کاربر بتواند راحت‌تر با فروشگاه شما کار کند. از هرکدام از روش‌های بالا که استفاده کنید تفاوتی ندارد، در روش اول به دلیل اینکه خودتان کار برنامه‌نویسی افزونه را انجام داده‌اید، انعطاف‌پذیری کار شما بیشتر می‌شود و شما می‌توانید تنظیمات بیشتری را اعمال کنید. در روش دوم هم شما نیازی نیست درگیر برنامه‌نویسی شوید، کافی است افزونه را نصب کنید و تنظیمات مربوط به آن را انجام دهید.
امیدوارم مقاله به اندازه کافی جامع بوده باشد و هر چیزی را که باید در مورد افزودن آیتم داده سفارشی سبد خرید در ووکامرس بدانید را به شما آموزش داده باشد. اگر شما پیشنهاد و یا سؤالی دارید می‌توانید از طریق دیدگاه‌ها با ما در ارتباط باشید.
منابع:
ساخت فروشگاه اینترنتی شما را یک قدم به سود بیشتر و شهرت نزدیک می‌کند. با…
فتوشاپ یکی از راه‌های است که با فراگیری آن به راحتی می‌توانید وارد بازار کار…
مقرون‌به‌صرفه بودن، عملکرد مناسب و مقیاس‌پذیری برخی از دلایلی است که بسیاری از کسب‌وکارها و…
یکی از تاثیرات دوران کرونا و محدودیتهای فیزیکی در اجتماع این است که بسیاری از…
همواره در تمامی سایت‌ها و اپلیکیشن‌هایی که برای ارائه خدمات گوناگون به کاربران مورد استفاده…
همیشه یکی از چالش‌های دنیای وردپرس و مخصوصا کاربران فارسی زبان این سیستم مدیریت محتوای…