آموزش جامع افزودن فیلدهای سفارشی به محصولات ووکامرس

ووکامرس، قلب تپنده بسیاری از فروشگاه‌های آنلاین، به شما این امکان را می‌دهد که فروشگاهی کاملاً مطابق با نیازهای خودتان بسازید. یکی از ویژگی‌های برجسته این پلتفرم، قابلیت انعطاف‌پذیری بالای آن است که به شما اجازه می‌دهد تا با استفاده از افزونه‌ها و کدنویسی، تغییرات دلخواه خود را اعمال کنید. در این آموزش، به بررسی چگونگی افزودن فیلدهای سفارشی به صفحه محصول در ووکامرس می‌پردازیم. این فیلدها می‌توانند اطلاعاتی مانند سایز، رنگ، جنس، یا هر ویژگی دیگری را که برای محصولاتتان ضروری است، به مشتریان نمایش دهند.

اهمیت افزودن فیلدهای سفارشی به محصولات ووکامرس

اضافه کردن فیلدهای سفارشی به محصولات، مزایای متعددی دارد. اولاً، این کار باعث می‌شود که مشتریان اطلاعات دقیق‌تری در مورد محصول مورد نظرشان دریافت کنند و خریدی آگاهانه‌تر داشته باشند. ثانیاً، فیلدهای سفارشی به شما کمک می‌کنند تا اطلاعات مورد نیاز برای پردازش سفارش‌ها را جمع‌آوری کنید. به عنوان مثال، اگر محصول شما یک تیشرت است، می‌توانید از مشتری بخواهید که سایز دلخواه خود را وارد کند. در این مقاله، ما به شما نشان می‌دهیم که چگونه با استفاده از دو روش، فیلدهای سفارشی را به محصولات ووکامرس اضافه کنید: روش کدنویسی و استفاده از افزونه‌های آماده.

دو روش اصلی برای افزودن فیلدهای سفارشی

در این آموزش، دو رویکرد اصلی برای افزودن فیلدهای سفارشی به محصولات ووکامرس را بررسی می‌کنیم:

1. کدنویسی (با استفاده از هوک‌ها): این روش برای کسانی مناسب است که با مفاهیم اولیه کدنویسی و هوک‌های ووکامرس آشنایی دارند. با استفاده از این روش، شما می‌توانید فیلدهای سفارشی خود را با دقت بیشتری ایجاد و سفارشی‌سازی کنید.
2. استفاده از افزونه‌های آماده: اگر با کدنویسی آشنایی ندارید، نگران نباشید! افزونه‌های آماده‌ای وجود دارند که به شما امکان می‌دهند فیلدهای سفارشی را به راحتی و بدون نیاز به دانش فنی خاصی به محصولات خود اضافه کنید.

افزودن فیلدهای سفارشی با استفاده از کدنویسی

برای شروع، بیایید نگاهی به مراحل افزودن فیلدهای سفارشی با استفاده از کدنویسی بیندازیم. این روش به شما کنترل بیشتری بر روی ظاهر و عملکرد فیلدهای سفارشی می‌دهد. در این بخش، ما به شما نشان می‌دهیم که چگونه فیلدهای سفارشی را به صفحه محصول اضافه کنید، اطلاعات وارد شده توسط مشتری را اعتبارسنجی کنید، و این اطلاعات را در سبد خرید، صفحه پرداخت، و ایمیل‌های مربوط به سفارش نمایش دهید.

1. ایجاد فایل افزونه: اولین گام، ایجاد یک فایل PHP برای افزونه است. این فایل شامل کدهای لازم برای اضافه کردن فیلدهای سفارشی و مدیریت اطلاعات ورودی می‌باشد.
2. افزودن فیلد سفارشی به صفحه محصول: در این مرحله، کدی را به فایل افزونه اضافه می‌کنیم که فیلد سفارشی را در صفحه محصول نمایش می‌دهد.
3. شناخت هوک‌ها، اکشن‌ها و فیلترها: درک مفاهیم هوک‌ها، اکشن‌ها و فیلترها برای کار با ووکامرس ضروری است. هوک‌ها به شما اجازه می‌دهند تا کدهای خود را به نقاط مختلف ووکامرس اضافه کنید.
4. استفاده از اکشن woocommerce_before_add_to_cart_button: این اکشن به شما امکان می‌دهد فیلدهای سفارشی را قبل از دکمه “افزودن به سبد خرید” نمایش دهید.
5. اعتبارسنجی اطلاعات فیلد سفارشی: برای اطمینان از صحت اطلاعات وارد شده توسط مشتری، باید فیلدهای سفارشی را اعتبارسنجی کنید.
6. افزودن فیلد داده سفارشی در ووکامرس: پس از اعتبارسنجی، باید اطلاعات فیلدهای سفارشی را به سبد خرید اضافه کنید.
7. نمایش متا داده‌های سفارشی ووکامرس در سبد خرید: در این مرحله، اطلاعات فیلدهای سفارشی را در صفحه سبد خرید نمایش می‌دهیم.
8. افزودن متا داده سفارشی سبد خرید به صفحه سفارش ووکامرس: اطلاعات فیلدهای سفارشی باید در صفحه سفارش نیز نمایش داده شوند.
9. افزودن متا داده سفارشی ووکامرس به ایمیل: در نهایت، اطلاعات فیلدهای سفارشی را به ایمیل‌های مربوط به سفارش اضافه می‌کنیم.

۱- ایجاد فایل افزونه

برای شروع، یک فایل با نام دلخواه (مثلاً custom-fields.php) ایجاد کنید و کدهای زیر را در آن قرار دهید. این کد، ساختار اولیه یک افزونه وردپرس را تشکیل می‌دهد:

<?php/** * Plugin Name:       افزونه فیلدهای سفارشی ووکامرس * Description:       افزودن فیلدهای سفارشی به محصولات ووکامرس. * Version:           1.0.0 * Author:            [نام شما] * Author URI:        [آدرس وب‌سایت شما] */

این کد، اطلاعات اصلی افزونه شما را تعریف می‌کند. پس از ذخیره این فایل، آن را در پوشه wp-content/plugins/ آپلود کنید و از طریق پیشخوان وردپرس، افزونه را فعال کنید.

۲- افزودن یک فیلد سفارشی به صفحه محصول

حالا، بیایید یک فیلد متنی ساده به صفحه محصول اضافه کنیم. فرض کنید می‌خواهید به مشتریان این امکان را بدهید که یک متن دلخواه را برای چاپ روی محصول وارد کنند. برای این کار، کد زیر را به فایل افزونه خود اضافه کنید:

/** * افزودن فیلد سفارشی به صفحه محصول */function add_custom_field_to_product() {    global $product;    echo '<div class="custom-field-wrapper">';    echo '<label for="custom_field">متن دلخواه شما:</label>';    echo '<input type="text" id="custom_field" name="custom_field" value="">';    echo '</div>';}add_action( 'woocommerce_before_add_to_cart_button', 'add_custom_field_to_product' );

در این کد، ما از اکشن woocommerce_before_add_to_cart_button استفاده کرده‌ایم تا فیلد سفارشی خود را قبل از دکمه “افزودن به سبد خرید” نمایش دهیم. شما می‌توانید این فیلد را با استفاده از CSS، به دلخواه خودتان استایل‌دهی کنید.

۳- درک هوک‌ها، اکشن‌ها و فیلترها

هوک‌ها، قلب تپنده وردپرس و ووکامرس هستند. آن‌ها به شما این امکان را می‌دهند که کدهای خود را به نقاط مختلف سیستم اضافه کنید و رفتار پیش‌فرض آن را تغییر دهید. دو نوع اصلی هوک وجود دارد: اکشن‌ها و فیلترها. اکشن‌ها به شما اجازه می‌دهند تا یک تابع را به یک نقطه خاص اضافه کنید، در حالی که فیلترها به شما اجازه می‌دهند تا محتوای موجود را تغییر دهید.

در این آموزش، ما از اکشن‌ها برای اضافه کردن فیلدهای سفارشی به صفحه محصول و از فیلترها برای اعتبارسنجی و ذخیره اطلاعات فیلدهای سفارشی استفاده می‌کنیم.

۴- اکشن woocommerce_before_add_to_cart_button

اکشن woocommerce_before_add_to_cart_button یکی از چندین اکشنی است که در صفحه محصول در دسترس است. این اکشن، دقیقاً قبل از نمایش دکمه “افزودن به سبد خرید” اجرا می‌شود. با استفاده از این اکشن، شما می‌توانید فیلدهای سفارشی خود را به راحتی در صفحه محصول اضافه کنید.

برای مثال، در کد بالا، ما از این اکشن برای نمایش فیلد متنی خود استفاده کردیم.

۵- افزودن یک فیلد سفارشی بعد از دکمه افزودن به سبد خرید

اگر می‌خواهید فیلد سفارشی خود را بعد از دکمه “افزودن به سبد خرید” نمایش دهید، می‌توانید از اکشن woocommerce_after_add_to_cart_button استفاده کنید. این اکشن، دقیقاً بعد از نمایش دکمه “افزودن به سبد خرید” اجرا می‌شود.

۶- اعتبارسنجی اطلاعات فیلد سفارشی

اعتبارسنجی اطلاعات فیلدهای سفارشی، گامی حیاتی برای اطمینان از صحت و درستی اطلاعات ورودی است. برای این کار، ما از فیلتر woocommerce_add_to_cart_validation استفاده می‌کنیم.

هنگامی که کاربر روی دکمه “افزودن به سبد خرید” کلیک می‌کند، اطلاعات فرم به سرور ارسال می‌شود. در این مرحله، ما با استفاده از فیلتر woocommerce_add_to_cart_validation، اطلاعات ورودی را بررسی می‌کنیم. اگر اطلاعات ورودی معتبر نباشد، از اضافه شدن محصول به سبد خرید جلوگیری می‌کنیم و یک پیام خطا به کاربر نمایش می‌دهیم.

کد زیر، یک مثال ساده از اعتبارسنجی فیلد سفارشی را نشان می‌دهد:

/** * اعتبارسنجی فیلد سفارشی */function validate_custom_field( $passed, $product_id, $quantity ) {    if ( empty( $_POST['custom_field'] ) ) {        $passed = false;        wc_add_notice( __( 'لطفاً متن دلخواه خود را وارد کنید.', 'woocommerce' ), 'error' );    }    return $passed;}add_filter( 'woocommerce_add_to_cart_validation', 'validate_custom_field', 10, 3 );

در این کد، ما بررسی می‌کنیم که آیا فیلد custom_field پر شده است یا خیر. اگر این فیلد خالی باشد، ما $passed را برابر با false قرار می‌دهیم و یک پیام خطا به کاربر نمایش می‌دهیم. در غیر این صورت، $passed را true نگه می‌داریم و محصول به سبد خرید اضافه می‌شود.

۷- افزودن فیلد داده سفارشی در ووکامرس

پس از اعتبارسنجی اطلاعات، باید اطلاعات فیلدهای سفارشی را به سبد خرید اضافه کنید. برای این کار، ما از فیلتر woocommerce_add_cart_item_data استفاده می‌کنیم.

فیلتر woocommerce_add_cart_item_data به شما این امکان را می‌دهد که اطلاعات اضافی را به آیتم‌های سبد خرید اضافه کنید. در کد زیر، ما اطلاعات فیلد custom_field را به آیتم سبد خرید اضافه می‌کنیم:

/** * افزودن اطلاعات فیلد سفارشی به سبد خرید */function add_custom_field_to_cart_item_data( $cart_item_data, $product_id, $variation_id ) {    if ( isset( $_POST['custom_field'] ) ) {        $cart_item_data['custom_field'] = sanitize_text_field( $_POST['custom_field'] );    }    return $cart_item_data;}add_filter( 'woocommerce_add_cart_item_data', 'add_custom_field_to_cart_item_data', 10, 3 );

در این کد، ما اطلاعات فیلد custom_field را از $_POST دریافت می‌کنیم و با استفاده از تابع sanitize_text_field()، آن را تمیز می‌کنیم تا از هرگونه حمله احتمالی جلوگیری شود. سپس، اطلاعات تمیز شده را به آرایه $cart_item_data اضافه می‌کنیم. این اطلاعات در سبد خرید، صفحه پرداخت، و ایمیل‌های مربوط به سفارش قابل استفاده خواهند بود.

۸- نمایش متا داده‌های سفارشی ووکامرس در سبد خرید

پس از اضافه کردن اطلاعات فیلدهای سفارشی به سبد خرید، باید آن‌ها را در صفحه سبد خرید نمایش دهید. برای این کار، ما از فیلتر woocommerce_get_item_data استفاده می‌کنیم.

فیلتر woocommerce_get_item_data به شما این امکان را می‌دهد که اطلاعات اضافی را در صفحه سبد خرید نمایش دهید. در کد زیر، ما اطلاعات فیلد custom_field را در صفحه سبد خرید نمایش می‌دهیم:

/** * نمایش اطلاعات فیلد سفارشی در سبد خرید */function display_custom_field_in_cart( $item_data, $cart_item ) {    if ( isset( $cart_item['custom_field'] ) ) {        $item_data[] = array(            'key'   => 'متن دلخواه',            'value' => $cart_item['custom_field'],        );    }    return $item_data;}add_filter( 'woocommerce_get_item_data', 'display_custom_field_in_cart', 10, 2 );

در این کد، ما بررسی می‌کنیم که آیا اطلاعات فیلد custom_field در سبد خرید وجود دارد یا خیر. اگر وجود داشته باشد، ما یک آرایه جدید با کلید “متن دلخواه” و مقدار اطلاعات فیلد custom_field ایجاد می‌کنیم و آن را به آرایه $item_data اضافه می‌کنیم. این اطلاعات در صفحه سبد خرید نمایش داده خواهد شد.

۹- افزودن متا داده سفارشی سبد خرید به صفحه سفارش ووکامرس

برای نمایش اطلاعات فیلدهای سفارشی در صفحه سفارش، ما از اکشن woocommerce_checkout_create_order_line_item استفاده می‌کنیم. این اکشن، پس از ایجاد یک سفارش جدید اجرا می‌شود.

کد زیر، اطلاعات فیلد custom_field را به صفحه سفارش اضافه می‌کند:

/** * افزودن اطلاعات فیلد سفارشی به صفحه سفارش */function add_custom_field_to_order( $item, $cart_item_key, $values, $order ) {    if ( isset( $values['custom_field'] ) ) {        $item->add_meta_data( 'متن دلخواه', $values['custom_field'], true );    }}add_action( 'woocommerce_checkout_create_order_line_item', 'add_custom_field_to_order', 10, 4 );

در این کد، ما بررسی می‌کنیم که آیا اطلاعات فیلد custom_field در سبد خرید وجود دارد یا خیر. اگر وجود داشته باشد، ما با استفاده از متد add_meta_data()، اطلاعات را به صفحه سفارش اضافه می‌کنیم. این اطلاعات در صفحه سفارش قابل مشاهده خواهند بود.

۱۰- افزودن متا داده سفارشی ووکامرس به ایمیل

در نهایت، برای نمایش اطلاعات فیلدهای سفارشی در ایمیل‌های مربوط به سفارش، ما از فیلتر woocommerce_order_item_name استفاده می‌کنیم.

کد زیر، اطلاعات فیلد custom_field را به ایمیل‌های مربوط به سفارش اضافه می‌کند:

/** * نمایش اطلاعات فیلد سفارشی در ایمیل */function display_custom_field_in_email( $product_name, $item, $item_id ) {    if ( isset( $item['custom_field'] ) ) {        $product_name .= sprintf( '<br>متن دلخواه: %s', esc_html( $item['custom_field'] ) );    }    return $product_name;}add_filter( 'woocommerce_order_item_name', 'display_custom_field_in_email', 10, 3 );

در این کد، ما بررسی می‌کنیم که آیا اطلاعات فیلد custom_field در آیتم سفارش وجود دارد یا خیر. اگر وجود داشته باشد، ما با استفاده از تابع sprintf()، اطلاعات را به نام محصول اضافه می‌کنیم. این اطلاعات در ایمیل‌های مربوط به سفارش قابل مشاهده خواهند بود.

با این مراحل، شما می‌توانید فیلدهای سفارشی خود را به محصولات ووکامرس اضافه کنید و اطلاعات مورد نیاز خود را از مشتریان جمع‌آوری کنید. این روش، به شما کنترل کاملی بر روی ظاهر و عملکرد فیلدهای سفارشی می‌دهد.

افزودن فیلدهای سفارشی با استفاده از افزونه‌های آماده

اگر ترجیح می‌دهید از کدنویسی اجتناب کنید، می‌توانید از افزونه‌های آماده برای افزودن فیلدهای سفارشی به محصولات ووکامرس استفاده کنید. این افزونه‌ها، رابط کاربری ساده‌ای را ارائه می‌دهند که به شما امکان می‌دهد فیلدهای سفارشی را به راحتی ایجاد و مدیریت کنید.

یکی از محبوب‌ترین افزونه‌ها برای این منظور، افزونه WooCommerce Product Addons است. این افزونه، امکانات گسترده‌ای را برای ایجاد انواع فیلدهای سفارشی، مانند فیلدهای متنی، انتخاب چندگانه، آپلود فایل، و غیره، ارائه می‌دهد. استفاده از این افزونه بسیار ساده است و شما می‌توانید فیلدهای سفارشی خود را در عرض چند دقیقه ایجاد کنید.

برای استفاده از این افزونه، مراحل زیر را دنبال کنید:

1. نصب و فعال‌سازی افزونه: افزونه WooCommerce Product Addons را از مخزن وردپرس یا از وب‌سایت توسعه‌دهنده دانلود و نصب کنید. پس از نصب، افزونه را فعال کنید.
2. ایجاد فرم جدید: در پیشخوان وردپرس، به بخش “محصولات” > “Custom Product Addons” بروید و روی دکمه “Add New Form” کلیک کنید.
3. تنظیمات فرم: در صفحه ایجاد فرم، عنوان فرم را وارد کنید و فیلدهای مورد نظر خود را با استفاده از کشیدن و رها کردن، به فرم اضافه کنید. این فیلدها می‌توانند شامل فیلدهای متنی، انتخاب چندگانه، آپلود فایل، و غیره باشند.
4. تنظیمات فیلدها: برای هر فیلد، تنظیمات مربوطه را انجام دهید. این تنظیمات شامل برچسب فیلد، متن کمکی، نوع فیلد، و سایر گزینه‌ها می‌شود.
5. انتشار فرم: پس از تکمیل تنظیمات، روی دکمه “Publish” کلیک کنید تا فرم ایجاد شود.
6. انتخاب فرم برای محصول: به صفحه ویرایش محصول مورد نظر خود بروید و در بخش “Product data”، تب “Addons” را انتخاب کنید. فرم ایجاد شده را از لیست انتخاب کنید و محصول را به‌روزرسانی کنید.
7. مشاهده فیلدهای سفارشی در صفحه محصول: پس از به‌روزرسانی محصول، فیلدهای سفارشی در صفحه محصول نمایش داده می‌شوند.

با استفاده از این افزونه، شما می‌توانید فیلدهای سفارشی را به راحتی و بدون نیاز به کدنویسی به محصولات ووکامرس اضافه کنید. این روش، برای کسانی که با کدنویسی آشنایی ندارند، بسیار مناسب است.

نتیجه‌گیری

افزودن فیلدهای سفارشی به محصولات ووکامرس، یک راه عالی برای بهبود تجربه کاربری و جمع‌آوری اطلاعات مورد نیاز شما است. با استفاده از روش‌های کدنویسی یا افزونه‌های آماده، شما می‌توانید فیلدهای سفارشی را به راحتی به فروشگاه خود اضافه کنید. انتخاب روش مناسب، به میزان دانش فنی و نیازهای شما بستگی دارد. امیدواریم این آموزش، به شما در افزودن فیلدهای سفارشی به محصولات ووکامرس کمک کرده باشد.