ترفندهای ووکامرس، توسعه و شخصی سازی بخش 2

ترفندهای ووکامرس، توسعه و شخصی سازی بخش ۲

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

در قسمت قبلی تعدادی از ترفندهای ووکامرس که در نوع خود جدید بودند را با نمونه‌های فارسی آموزش دادیم.

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

ترفند ۸: ایجاد و ساخت یک محصول خودکار

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

با قطعه کدی که در زیر قرار دادیم می‌توان با آپلود هر تصویری در وردپرس‌ یک محصول جدید ایجاد کرد.

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

ترفند 8: ایجاد و ساخت یک محصول خودکار 3
ترفند 8: ایجاد و ساخت یک محصول خودکار
ترفند 8: ایجاد و ساخت یک محصول خودکار 2

شما می‌‌توانید با استفاده از دانش کدنویسی خودتان، این قطعه کد را شخصی‌سازی و از آن استفاده کنید.

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

				
					/**
 * @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 در ووکامرس

وردپرس به صورت پیش‌فرض اجازه آپلود همۀ فرمت‌ها و فایل‌ها را به دلایل امنیتی نمی‌دهد.

اما با وجود قطعه کدهایی می‌توانید هر نوع فایلی را در وردپرس بدون مشکل آپلود و از آن‌ها استفاده کنید.

آموزش ترفندها و کدهای افزونه ووکامرس

اگر می‌خواهید از فایل‌های متنی با فرمت 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 روی فیلد تلفن صورت حساب ووکامرس قرار دهید.

این می‌تواند راهنمای خوبی برای نحوه صحیح وارد کردن شماره موبایل برای مشتریان باشد.

ترفند 10: راهنمای وارد کردن تلفن هنگام ثبت سفارش
				
					/**
 * @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;
}
				
			
ترفند ۱۲: مشخص سازی برچسب محصول

کاربرد این کد برای نمایش یک پیام روی هر بلوک محصول جهت نمایش برچسب استفاده شده آن است.

ترفند 12: مشخص سازی برچسب محصول

در کد، برچسب را مشخص کردیم (همان تست) و هر محصولی که این برچسب را داشته باشد پیام چاپ می‌شود.

				
					/**
 * @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 '<div class="themefour-product-tag">این محصول با برچسب <strong>تست</strong> است</div>';  // نمایش پیام در صفحه‌های دسته بندی و فروشگاه
   }
}
				
			
ترفند ۱۳: نام فیلدهای داخل input فیلدهای پرداخت

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

اما اگر می‌خواهید این نام‌ها در داخل input فیلدها و به جای placeholder جایگزین شوند.

ترفند 13: نام فیلدها داخل input فیلدهای پرداخت

از این کد ساده اما کاربردی برای این اعمال چنین تغییری استفاده کنید. ابتدا صفحه پرداخت خود را ببینید.

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

				
					/**
 * @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;
}
				
			
ترفند ۱۴: نمایش تصویر عکس در صفحه پرداخت

با این ترفند فوق العاده کاربردی، می‌توان در کنار نام محصول در صفحه پرداخت، تصویر آن را نمایش دهید.

نمایش تصویر محصول در صفحۀ تسویه حساب (پرداخت) به بهبود رابط کاربری فروشگاه شما کمک کند.

ترفند 14: نمایش تصویر عکس در صفحه پرداخت
				
					/**
 * @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( 'وضعیت تم فور <span class="count">(%s)</span>', 'وضعیت تم فور <span class="count">(%s)</span>', '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 افزونۀ محبوب و فوق العاده وردپرس غیرممکن نیست.

در صورتی که پست آموزشی ترفندهای ووکامرس را دوست داشتید، ابتدا یک به آن یک امتیاز بدهید.

سپس نظر خود را در مورد پیشنهاد و درخواست‌هایتان در مورد ترفندهای ووکامرس مطرح کنید.

سلامت و موفق باشید.

این مطلب را با دوستان خود به اشتراک بگذارید

ارسال یک دیدگاه

برای ارسال دیدگاه، نیاز است که را انجام دهید.

دلیل بازپرداخت