Elementor pro နဲ့ woocommerce order details စာမျက်နှာကို စိတ်ကြိုက်ပြင်ဆင်နိုင်တယ်ဆိုတာ သိပါသလား။ ဒီအခြေခံဒီဇိုင်းကနေ သင်စဉ်းစားနိုင်တဲ့ မည်သည့် custom layout ကိုမဆို ပြောင်းလဲနိုင်ပါတယ်။.
အဓိကပြဿနာက Elementor Pro မှာ Loop grid ကိုသုံးပြီး Account page မှာ order details တွေကိုပြလို့မရတာပါ။ ပေးထားတဲ့ Elementor Account widget နဲ့ပတ်သက်လာရင် styling ကိုလည်း သိပ်မထိန်းချုပ်နိုင်ပါဘူး။ ဒါကြောင့် Elementor Pro ရဲ့ အစွမ်းအပြည့်အဝကို အသုံးချလို့မရတဲ့ option တွေ အရမ်းနည်းသွားတာပါ။.
သင်ခန်းစာအများစုမှာ မူရင်းအတိုင်းပြသထားပါတယ် /ကျွန်ုပ်၏အကောင့်/ကြည့်ရှုမှုအမှာစာ/ စာမျက်နှာ သို့မဟုတ် လေးလံသော PHP တင်းပလိတ်များ။.
မူရင်းအတိုင်းနေရတာ ငြီးငွေ့နေပြီ /ကျွန်ုပ်၏အကောင့်/ကြည့်ရှုမှုအမှာစာ/ဒီသင်ခန်းစာကို လိုက်နာဖို့အတွက် Woocommerce builder အများစုမှာ လိုင်စင်ရှိပြီးသား plugin တွေစာရင်းကို လိုအပ်ပါတယ်။.
အစီအစဉ်က ရိုးရှင်းပါတယ်၊ Woocommerce database ကနေ data တွေကို ဆွဲထုတ်ပြီး Elementor/woobuilder template မှာ dynamically ပြသဖို့ custom query တစ်ခု ဖန်တီးပါမယ်။ အဲဒီလို လုပ်ဆောင်နိုင်ပြီဆိုရင် သင်လိုချင်တဲ့ ဒီဇိုင်းအမျိုးအစားကို လက်ချောင်းထိပ်နဲ့ ဖန်တီးနိုင်ပါပြီ။.
Elementor Pro
Crocoblock ရဲ့ ဂျက်အင်ဂျင်
Crocoblocks Woo Builder
နောက်ဆုံးနှစ်ခုက လိုင်စင်တူတူနဲ့ လာတာလို့ ထင်တယ်။ ပြန်စစ်ကြည့်ပါ။.
စတင်ခင်မှာ- ရှိပြီးသားဖြစ်သင့်ပါတယ်
JetWooBuilder သည် အသက်ဝင်နေပြီး My Account custom endpoint ကို Woo builder ဖြင့် သတ်မှတ်ပြီးဖြစ်သင့်သည်။ သင်၏ woocommerce အကောင့်တွင်လည်း စမ်းသပ်မှာယူမှုတစ်ခု ပြုလုပ်ပြီးဖြစ်သင့်သည်။.
အဆင့် ၁ — Jet Engine ကို အသုံးပြု၍ woocommerce data ကို Elementor Pro သို့ dynamically ဆွဲယူပါ
JetEngine → Query Builder → Add New → Query Type: SQL/AI Query → Advanced/AI mode။.
သင့်ဝက်ဘ်ဆိုက်အတွက် Query အသစ်တစ်ခု ဖန်တီးသွားပါမယ်။ သင်ကြိုက်နှစ်သက်ရာအမည်ပေးနိုင်ပြီး သင်ကြိုက်နှစ်သက်ရာဖော်ပြချက်ကို ထည့်သွင်းနိုင်ပါတယ်၊ ဒါပေမယ့် ကျွန်တော်လုပ်ခဲ့တဲ့နည်းလမ်းက ဒီလိုပါ။ ကျွန်တော့်ရဲ့ setting တွေကို လိုက်နာနိုင်ပါတယ်။.
အောက်ပါကုဒ်ကို SQL Query box ထဲတွင် ကူးထည့်ပါ-
အောက်ပါကုဒ်က အရာအနည်းငယ်ကို လုပ်ဆောင်ပေးပါတယ်၊ အဓိကလုပ်ဆောင်ချက်ကတော့ Woocommerce မှဒေတာများကို "စုဆောင်း" ရန်ဖြစ်ပြီး သင့် Elementor တွင် ၎င်းတို့ကို တက်ကြွစွာပြသနိုင်စေရန်ဖြစ်သည်။ အခြားလုပ်ဆောင်ချက်များမှာ USD မှ $ လက္ခဏာသို့ ငွေကြေးအမည်ပြောင်းခြင်းနှင့် wc-pending မှ Pending သို့ မှာယူမှုအခြေအနေကို ပြောင်းလဲခြင်းကဲ့သို့ဖြစ်သည်။
ရွေးချယ်ပါ
o.id၊,
DATE_FORMAT(o.date_created_gmt, '%M %e, %Y') အမှာစာရက်စွဲအဖြစ်၊,
/* စမတ်စုစုပေါင်း: ၁၁၃၅ သို့မဟုတ် ၁၁၃၅.၅ */
ကိစ္စ
o.total_amount = FLOOR(o.total_amount) ဖြစ်တဲ့အခါ
ထို့နောက် CAST(o.total_amount ကို လက်မှတ်မထိုးရသေးသည့်အတိုင်း)
ELSE ROUND(စုစုပေါင်း_ပမာဏ၊ ၁)
total_smart အဖြစ် အဆုံးသတ်ပါ။,
o.ငွေကြေး၊,
/* ကုဒ်မပါတဲ့ သင်္ကေတပြပါ */
ငွေကြေးကိစ္စ
'USD' ဖြစ်တဲ့အခါ '$'‘
'EUR' ဖြစ်တဲ့အခါ '€'‘
'GBP' ဖြစ်ရင် '£' ဖြစ်ရင်‘
'THB' ဖြစ်ရင် '฿'‘
'MMK' ဖြစ်ရင် 'K'‘
မဟုတ်ရင်”
ငွေကြေး_သင်္ကေတအဖြစ် အဆုံး,
/* အခြေအနေ (အကြမ်း + လှပသော) */
o.status ကို status_raw အဖြစ်၊,
ကိစ္စရပ် အခြေအနေ
'wc-pending' ဖြစ်တဲ့အခါ 'Pending'‘
'wc-processing' ဖြစ်တဲ့အခါ 'Processing' ဖြစ်တဲ့အခါ‘
'wc-ပြီး' သောအခါ 'ပြီး'‘
'wc-on-hold' ဖြစ်တဲ့အခါ ပြီးရင် 'on hosted' ဖြစ်တဲ့အခါ‘
'wc-ပယ်ဖျက်' ပြီးနောက် 'ပယ်ဖျက်' သောအခါ‘
'wc-refund လုပ်ပြီးနောက်' 'refund လုပ်ပြီး'‘
'wc-မအောင်မြင်' ဖြစ်တဲ့အခါ 'မအောင်မြင်'‘
မဟုတ်ရင် o.status
အဆုံး - အခြေအနေ_တံဆိပ်၊,
o.ငွေပေးချေမှုနည်းလမ်း_ခေါင်းစဉ်၊,
o.billing_email
wc_orders o မှ {prefix}
o.type = 'ဆိုင်_အမှာစာ' နေရာမှာ‘
နှင့် o.id = '%get%{‘key“:”order_id”}' — ?order_id=123 ကို ဖတ်သည်
နှင့် o.customer_id = '%current_user_id%{‘context“:”default_object”}' — လုံခြုံသည်- ပိုင်ရှင်သာ မြင်နိုင်သည်
ကန့်သတ်ချက် ၁;
ထည့်ပြီးသည်နှင့် ညာဘက်ရှိ သိမ်းဆည်းရန် သို့မဟုတ် အပ်ဒိတ်လုပ်ရန် ခလုတ်ကို နှိပ်ပါ။.
အဆင့် ၂ — Jet Engine မှ Listing Grid widget ဖြင့် Order Summary စာရင်းကို တည်ဆောက်ပါ။
အရင်ဆုံး Elementor Editor နဲ့ သင့်ရဲ့ custom account details end point ကိုသွားရပါမယ်။ သေချာမသိရင် Woobuilder ကိုသုံးပြီး ဖန်တီးထားတဲ့ custom template အကြောင်းပြောနေတာပါ။ ဒီမှာ woocommerce order details page ကို customize လုပ်ဖို့အတွက် listing တစ်ခုဖန်တီးပါမယ်။.
Elementor editor ထဲမှာရောက်ရင် listing grid widget တစ်ခုထည့်ပါ။ Jet Engines ကို install လုပ်ထားရင် listing grid widget ကိုမြင်ရပါလိမ့်မယ်။ listing grid ကိုထည့်ပါ။ listing မှာ create listing item ကို နှိပ်ပါ။ (ခဏထားခဲ့ပြီး custom template တစ်ခုဖန်တီးဖို့ နောက်မှပြန်လာပါမယ်)။ နာမည်က အရေးမကြီးပါဘူး။ Order Listing လို့ခေါ်ပါတယ်။.
အရေးကြီးတယ်။ ကျွန်တော့်ရဲ့ ဖန်သားပြင်ဓာတ်ပုံရဲ့ ဘယ်ဘက်အောက်ခြေမှာ click here ဆိုတဲ့ အပြာရောင်ခလုတ်တစ်ခုကို တွေ့ရပါလိမ့်မယ်။ အဲဒါကို နှိပ်ပါ။ ဒီနေ့မှာ အဲဒါကို အားကိုးတော့မှာ မဟုတ်တဲ့အတွက် legacy Query setting တွေကို disable လုပ်ပါမယ်။.
ပြီးရင် ဘယ်ဘက်ကော်လံမှာ အောက်ကိုဆင်းပါ။ Custom Query ကို ဒီလိုမြင်ရပါလိမ့်မယ်။ ဖွင့်ပြီး ဖန်တီးထားတဲ့ query ကို ရွေးပါ။ နာမည်ပေးပုံပေါ်မူတည်ပြီး ကျွန်တော့်နာမည်နဲ့ ကွဲပြားနိုင်ပါတယ်။.
ဒီအဆင့်အတွက် ဒါပါပဲ။ အခုအတွက် Publish လုပ်ပြီးရင် နောက်ဆုံးအဆင့်ကို ဆက်သွားပါမယ်။ အဲဒါကတော့ order details ကို customize လုပ်တာပါ။ Elementor Pro နဲ့ ရင်းနှီးပြီးသားဆိုရင် ဒါက Loop Grid နဲ့ Loop item လိုပဲ။ ဒီအစား Jet Engine နဲ့ အရမ်းကောင်းကောင်းအလုပ်လုပ်လို့ Crocoblock ရဲ့ Listing Grid နဲ့ Listing item ကို အားကိုးနေပါတယ်။.
အဆင့် ၃ – ယခု woocommerce အမှာစာအသေးစိတ်စာမျက်နှာကို စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါပြီ
အရင်ဆုံး သင်အရင်က ဖန်တီးထားတဲ့ စာရင်းထဲက ပစ္စည်းကို တည်းဖြတ်ပါ။ အဝါရောင် selector ထဲမှာ ရှိသင့်ပါတယ်။ အောက်မှာ ကျွန်တော်ပေးထားတဲ့ ပုံလိုပဲ။ (ဒါပေမယ့် သင့်ပုံကတော့ ဗလာဖြစ်နေပါလိမ့်မယ်)
listing item ရဲ့ Elementor editor ထဲရောက်တာနဲ့ သင့်ရဲ့ ပထမဆုံး dyanamically pulled data ကို ဘယ်လိုဖန်တီးရမလဲဆိုတာ ပြပေးပါမယ်။.
Elementor Heading widget ကိုထည့်ပါ၊ style တွေအကြောင်း နောက်မှစိတ်ပူနိုင်ပါတယ်။.
title box မှာ Dynamic Tags ခလုတ်ကို တွေ့ရပါလိမ့်မယ်။ ဒင်္ဂါးပြားတစ်ပြားလိုပါပဲ။ အဲဒါကို နှိပ်ပါ > Current Object Field ကိုရှာဖို့ အောက်ဆုံးအထိ scroll လုပ်ပါ။.
အဲဒါကို ရွေးချယ်ပြီးရင် နောက်ထပ် field တွေကို ရွေးချယ်ဖို့ နောက်ထပ် option တစ်ခု ထပ်တွေ့ရပါလိမ့်မယ်။ ဒီ heading widget မှာ ပြသချင်တဲ့ data ကို ရွေးချယ်နိုင်ပါပြီ။ ကျွန်တော်တို့ ဖန်တီးထားတဲ့ query item တွေကို ရှာဖို့ အောက်ကို အဆုံးထိ scroll လုပ်ဖို့ မမေ့ပါနဲ့။.
သင့်အား အကြံဥာဏ်အချို့ပေးရန်အတွက်-
id ကို ရွေးပါ > order id ကို ပြပါမည်
ငွေကြေးသင်္ကေတကို ရွေးချယ်ပါ > $ ကို ပြသပါမည်
total_smart ကို ရွေးချယ်ပါ > အလိုအလျောက် ဝိုင်းထားသော စုစုပေါင်း အော်ဒါပမာဏကို ပြသပေးပါမည်
Dynamic tags တွေနဲ့ ပျော်ရွှင်စွာ စမ်းသုံးကြည့်ပါ။ ဒီကနေစပြီး Elementor Pro နဲ့ woocommerce order details စာမျက်နှာကို သင်လိုချင်တဲ့ layout ဒါမှမဟုတ် style နဲ့ စိတ်ကြိုက်ပြင်ဆင်နိုင်ပြီး Jet Engine ရဲ့ စွမ်းအားကို အမှန်တကယ် အသုံးချနိုင်ပါပြီ။.
