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



شما میتوانید با استفاده از دانش کدنویسی خودتان، این قطعه کد را شخصیسازی و از آن استفاده کنید.
این مورد از جذابترین ترفندهای ووکامرس به شمار میرود و با خیال راحت آن را تست کنید.
/**
* @snippet Auto Create Product @ WP Admin
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_action( 'add_attachment', 'themefour_create_product_automatically', 9999 );
function themefour_create_product_automatically( $image_id ) {
$product = new WC_Product_Simple();
$product->set_name( 'محصول ' . get_the_title( $image_id ) );
$product->set_status( 'publish' );
$product->set_catalog_visibility( 'visible' );
$product->set_price( 50000 );
$product->set_regular_price( 47500 );
$product->set_sold_individually( true );
$product->set_image_id( $image_id );
$product->set_downloadable( true );
$product->set_virtual( true );
$src_img = wp_get_attachment_image_src( $image_id, 'full' );
$file_url = reset( $src_img );
$file_md5 = md5( $file_url );
$download = new WC_Product_Download();
$download->set_name( get_the_title( $image_id ) );
$download->set_id( $file_md5 );
$download->set_file( $file_url );
$downloads[$file_md5] = $download;
$product->set_downloads( $downloads );
$product->save();
}
وردپرس به صورت پیشفرض اجازه آپلود همۀ فرمتها و فایلها را به دلایل امنیتی نمیدهد.
اما با وجود قطعه کدهایی میتوانید هر نوع فایلی را در وردپرس بدون مشکل آپلود و از آنها استفاده کنید.

اگر میخواهید از فایلهای متنی با فرمت txt در هنگام آپلود فایل در ووکامرس استفاده کنید.
از قطعه کد زیر برای این کار میتوانید بهره بگیرید و در فایل فانکشن قالب خود آن را قرار دهید.
/**
* @snippet Fix "Sorry File Type Not Permitted" @ WooCommerce Downloadable Product + WordPress Media Library
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_filter( 'upload_mimes', 'themefour_allow_custom_mime_types' );
function themefour_allow_custom_mime_types( $mimes ) {
if ( current_user_can( 'manage_woocommerce' ) ) {
$mimes['txt'] = 'text/plain';
$mimes['json'] = 'text/plain';
}
return $mimes;
}
add_filter( 'wp_check_filetype_and_ext', 'themefour_correct_filetypes', 10, 5 );
function themefour_correct_filetypes( $data, $file, $filename, $mimes, $real_mime ) {
if ( ! empty( $data['ext'] ) && ! empty( $data['type'] ) ) {
return $data;
}
$wp_file_type = wp_check_filetype( $filename, $mimes );
if ( 'json' === $wp_file_type['ext'] ) {
$data['ext'] = 'json';
$data['type'] = 'text/plain';
} elseif ( 'txt' === $wp_file_type['ext'] ) {
$data['ext'] = 'txt';
$data['type'] = 'text/plain';
}
return $data;
}
با دهمین از ترفندهای ووکامرس به معرفی یکی از شخصیسازی صفحۀ تسویه حساب فروشگاه میپردازیم.
با کد زیر میتوانید یک Placeholder یا Mask روی فیلد تلفن صورت حساب ووکامرس قرار دهید.
این میتواند راهنمای خوبی برای نحوه صحیح وارد کردن شماره موبایل برای مشتریان باشد.

/**
* @snippet Phone Mask @ WooCommerce Checkout
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_filter( 'woocommerce_checkout_fields', 'themefour_checkout_phone_us_format' );
function themefour_checkout_phone_us_format( $fields ) {
$fields['billing']['billing_phone']['placeholder'] = '09140000';
$fields['billing']['billing_phone']['maxlength'] = 12; // حداکثر تعداد کاراکتر فیلد
return $fields;
}
add_action( 'woocommerce_after_checkout_form', 'bbloomer_phone_mask_us' );
function bbloomer_phone_mask_us() {
wc_enqueue_js( "
$('#billing_phone')
.keydown(function(e) {
var key = e.which || e.charCode || e.keyCode || 0;
var phone = $(this);
if (key !== 8 && key !== 9) {
if (phone.val().length === 3) {
phone.val(phone.val() + '-'); // add dash after char #3
}
if (phone.val().length === 7) {
phone.val(phone.val() + '-'); // add dash after char #7
}
}
return (key == 8 ||
key == 9 ||
key == 46 ||
(key >= ۴۸ && key <= 57) ||
(key >= ۹۶ && key <= 105));
});
" );
}
اگر میخواهید متن عدم موجودی یا ناموجود یا out in stock را در صفحههای فروشگاه تغییر دهید.
از این قطعه کد میتوانید برای این کار استفاده کنید و به راحتی این متن را به دلخواه تغییر بدید.

/**
* @snippet Rename Out of stock @ WooCommerce Shop
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_filter( 'woocommerce_product_add_to_cart_text', 'themefour_archive_custom_cart_button_text' );
function themefour_archive_custom_cart_button_text( $text ) {
global $product;
if ( $product && ! $product->is_in_stock() ) {
return 'توقف فروش!';
}
return $text;
}
کاربرد این کد برای نمایش یک پیام روی هر بلوک محصول جهت نمایش برچسب استفاده شده آن است.

در کد، برچسب را مشخص کردیم (همان تست) و هر محصولی که این برچسب را داشته باشد پیام چاپ میشود.
/**
* @snippet Show Tag Name in WooCommerce Shop
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_action( 'woocommerce_after_shop_loop_item', 'themefour_print_message_if_product_belongs' );
function themefour_print_message_if_product_belongs() {
global $product;
$product_id = $product->get_id();
if ( has_term( 'تست', 'product_tag', $product_id ) ) { // نام برچسب: تست
echo 'این محصول با برچسب تست است'; // نمایش پیام در صفحههای دسته بندی و فروشگاه
}
}
به صورت پیشفرض در ووکامرس، در صفحه پرداخت نام فیلدها بالای هر فیلد نمایش داده میشود.
اما اگر میخواهید این نامها در داخل input فیلدها و به جای placeholder جایگزین شوند.

از این کد ساده اما کاربردی برای این اعمال چنین تغییری استفاده کنید. ابتدا صفحه پرداخت خود را ببینید.
با بررسی صفحه پرداخت قبل از درج این کد، میتوانید بهتر کار این قطعه را درک کنید.
/**
* @snippet Move Labels Inside Inputs - WooCommerce Checkout
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_filter( 'woocommerce_checkout_fields', 'themefour_move_labels_inside_checkout_fields', 9999 );
function themefour_move_labels_inside_checkout_fields( $fields ) {
foreach ( $fields as $section => $section_fields ) {
foreach ( $section_fields as $section_field => $section_field_settings ) {
$fields[$section][$section_field]['placeholder'] = $fields[$section][$section_field]['label'];
$fields[$section][$section_field]['label'] = '';
}
}
return $fields;
}
با این ترفند فوق العاده کاربردی، میتوان در کنار نام محصول در صفحه پرداخت، تصویر آن را نمایش دهید.
نمایش تصویر محصول در صفحۀ تسویه حساب (پرداخت) به بهبود رابط کاربری فروشگاه شما کمک کند.

/**
* @snippet Product Images @ Woo Checkout
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
add_filter( 'woocommerce_cart_item_name', 'themefour_product_image_review_order_checkout', 9999, 3 );
function themefour_product_image_review_order_checkout( $name, $cart_item, $cart_item_key ) {
if ( ! is_checkout() ) return $name;
$product = $cart_item['data'];
$thumbnail = $product->get_image( array( '50', '50' ), array( 'class' => 'alignleft' ) );
return $thumbnail . $name;
}
دوست دارید وضعیت دلخواه خود را برای سفارشات ایجاد کنید؟ این کد برای همین نوشته شده است.
شما میتوانید با استفاده از این کد یک وضعیت سفارشی برای محصولات خودتان ایجاد کنید.

/**
* @snippet Set Custom Order Status during Checkout
* @post WooCommerce Customization & Development Tricks - Part 2
* @developer themefour
* @testedwith WooCommerce 6.1
* @website https://themefour.com/
*/
// ---------------------
// ۱. Register Order Status
add_filter( 'woocommerce_register_shop_order_post_statuses', 'themefour_register_custom_order_status' );
function themefour_register_custom_order_status( $order_statuses ){
// Status must start with "wc-"
$order_statuses['wc-custom-status'] = array(
'label' => _x( 'وضعیت دلخواه', 'Order status', 'woocommerce' ),
'public' => false,
'exclude_from_search' => false,
'show_in_admin_all_list' => true,
'show_in_admin_status_list' => true,
'label_count' => _n_noop( 'وضعیت تم فور (%s)', 'وضعیت تم فور (%s)', 'woocommerce' ),
);
return $order_statuses;
}
// ---------------------
// ۲. Show Order Status in the Dropdown @ Single Order and "Bulk Actions" @ Orders
add_filter( 'wc_order_statuses', 'themefour_show_custom_order_status' );
function themefour_show_custom_order_status( $order_statuses ) {
$order_statuses['wc-custom-status'] = _x( 'وضعیت تم فور', 'Order status', 'woocommerce' );
return $order_statuses;
}
add_filter( 'bulk_actions-edit-shop_order', 'themefour_get_custom_order_status_bulk' );
function themefour_get_custom_order_status_bulk( $bulk_actions ) {
// Note: "mark_" must be there instead of "wc"
$bulk_actions['mark_custom-status'] = 'تغییر وضعیت به تم فور';
return $bulk_actions;
}
// ---------------------
// ۳. Set Custom Order Status @ WooCommerce Checkout Process
add_action( 'woocommerce_thankyou', 'themefour_thankyou_change_order_status' );
function themefour_thankyou_change_order_status( $order_id ){
if( ! $order_id ) return;
$order = wc_get_order( $order_id );
// Status without the "wc-" prefix
$order->update_status( 'custom-status' );
}
نام وضعیت را به دلخواه خودتان داخل سورس کد تغییر بدهید و همۀ شخصی در اختیار شماست.
این آخرین مورد از ترفندهای ووکامرس بود اما افزونههای مختلفی برای ایجاد تغییر وضعیت نیز موجود هستند.
پایان بخش دوم آموزش ترفندها و توسعه ووکامرس
در این آموزش ترفندهای ووکامرس و مهم دیگر برای این فروشگاه ساز را با نمونه فارسی آموزش دادیم.
این آخرین لیست از ترفندهای ووکامرس نیست و دهها قطعه کد دیگر برای توسعه ووکامرس وجود دارد.
تقریباً هیچ چیزی در فروشگاه ساز WooCommerce افزونۀ محبوب و فوق العاده وردپرس غیرممکن نیست.
در صورتی که پست آموزشی ترفندهای ووکامرس را دوست داشتید، ابتدا یک به آن یک امتیاز بدهید.
سپس نظر خود را در مورد پیشنهاد و درخواستهایتان در مورد ترفندهای ووکامرس مطرح کنید.
سلامت و موفق باشید.
این مقاله چقدر براتون مفید بود؟
از ۱ تا ۵ امتیاز بدید
میانگین رتبه ۵ / ۵. تعداد رای: ۵