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

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

چون تو این مقاله قراره بهت نشون بدم چطور می‌تونی به راحتی این صفحه رو بدون نیاز به افزونه تغییر بدی و اون رو به یه صفحه جذاب‌ و منحصر به فرد تبدیل کنی. 💻🚀 پس با من تا انتهای این پست همراه باش.

🤔چرا باید صفحه تشکر از خرید ووکامرس رو شخصی‌ سازی کنیم؟

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

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

× ✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

پس چرا از این فرصت استفاده نکنی و صفحه تشکر از خرید رو به یه صفحه جذاب و پرفکت تبدیل نکنی که مشتری با خوشحالی دوباره به سراغت بیاد؟ 😎

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

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

1. ویرایش فایل thankyou.php

وقتی به مسیر wp-content/plugins/woocommerce/templates/checkout بری، می‌بینی که فایل thankyou.php اونجا قرار داره. این همون فایلیه که صفحه تشکر از خرید ووکامرس رو تشکیل میده. با ویرایش این فایل می‌تونی صفحه تشکر رو به دلخواه خودت تغییر بدی و ظاهری جدید بهش بدی.

📝 نکته مهم: درسته که ما می‌تونیم این فایل رو همینجا ویرایش کنیم و کدهامون رو داخلش بذاریم، ولی یه نکته‌ای هست که ممکنه در نگاه اول زیاد به چشم نیاد. اگه افزونه ووکامرس آپدیت یا دانگرید بشه، تمام تغییرات ما پاک میشه و فایل دوباره بازنویسی میشه. نتیجه؟ صفحه تشکر از خرید با همون استایل پیش‌فرض نمایش داده میشه. حالا شاید بپرسی، برای اینکه تغییرات دائم بمونه و پاک نشه چیکار باید کرد؟ نگران نباش! من یه راهکار فوق‌العاده دارم که می‌تونی با خیال راحت ازش استفاده کنی. 😎

برای اینکه تغییراتت با آپدیت‌های بعدی ووکامرس از بین نره، این مراحل رو دنبال کن:

1. وارد کنترل پنل سایتت بشو.
2. به مسیر wp-content/themes/your-Childtheme/woocommerce/checkout/ برو. (اگر پوشه‌های woocommerce و checkout در قالبت وجود نداره، باید اون‌ها رو بسازی. بهتره این پوشه‌ها رو در قالب فرزند یا چایلدت بسازی تا تغییراتت در برابر آپدیت‌های آینده حفظ بشه!)
3. فایل thankyou.php رو از باکس زیر دانلود کن (از حالت فشرده خارج کن) و داخل پوشه checkout آپلود کن.
4. حالا به بخش سفارشی‌سازی وردپرس برو و در قسمت “کدهای CSS اضافی”، کدهای زیر رو برای استایل صفحه پیست کن:

/* Style for the thank you page by RayaWp.ir */
.thank-you-message.full-width {
    width: 100%;
    margin: 20px 0;
    padding: 20px;
    background: #006EA3; 
    border-radius: 10px;
    color: #fff; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.thank-you-message h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: white;
}

.thank-you-message .emoji {
    font-size: 48px;
    margin-bottom: 10px;
}

.order-details {
    margin-top: 20px;
}

.order-details .order-number,
.order-details .order-total {
    font-size: 18px;
    color: white; 
}

.copy-button {
    margin-left: 10px;
    background-color: #ffeb3b;
    color: #333;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.copy-button:hover {
    background-color: #333; 
    color: #fff;
}
.support-message {
    display: flex;
    align-items: center;
    margin-top: 20px;
	border-right-style:solid;
	background-color:rgba(255,255,255,0.11);
	backdrop-filter:blur(10px);
	    padding: 10px;
    border-radius: 5px;
}
section.woocommerce-order-details {
    display: none;
}

section.woocommerce-customer-details {
    display: none;
}
h1.entry-title {
    display: none;
}
.support-icon {
    font-size: 24px;
    margin-right: 10px;
}

.support-text {
    color: #333;
    font-size: 14px;
}
.support-message span{
	color:#ffffff;
	
}
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4caf50;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
    animation: fadeInOut 3s;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
}

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

در کدی که برای thankyou.php نوشتم، آدرس سایت به صورت داینامیک دریافت میشه و به جای “رایا وردپرس” قرار می‌گیره. همچنین، کاربر امکان کپی کردن شماره سفارش خودش رو از طریق دکمه کپی داره تا بعداً بتونه در اختیار پشتیبانی محصول قرار بده و سفارش خودش رو پیگیری کنه. 💬📦 همینطور پایین مبلغ پرداختی، یک پیام پیش‌فرض برای ارتباط با پشتیبانی وجود داره که می‌تونید اون متن رو به دلخواه خودتون تغییر بدین. ✨

دانلود فقط برای اعضا ( کلیک کنید)

برای دانلود وارد حساب کاربری خود شوید یا ثبت نام کنید. کمتر از یک دقیقه زمان میبره 🙂

2. ویرایش فایل order-downloads.php

حالا وقتشه استایل پیش فرض جدول دانلود محصولات رو هم ویرایش کنیم برای اینکار، باید فایل order-downloads.php رو پیدا کنی. این فایل رو می‌تونی تو مسیر زیر در هاست پیدا کنی:

wp-content/plugins/woocommerce/templates/order

توی این مسیر فایل order-downloads.php هست که همون صفحه‌ای که مشتری‌ها می‌تونن محصولات خریداری شده رو دانلود کنن، نمایش می‌ده.

اگه می‌خواهی تغییراتت دائم بمونه و با آپدیت‌های بعدی ووکامرس از بین نره، پیشنهاد می‌کنم این فایل رو تو قالب فرزند (چایلد تم) خودت ویرایش کنی یعنی تو پوشه ووکامرس که پاراگراف بالاتر در مسیر قالبت ساختی، یه پوشه به نام order بسازی و فایل order-downloads.php رو که از پایین دانلود کردی و در مسیر wp-content/themes/your-Childtheme/woocommerce/order آپلود کنی.

برای استایل جدولم کدهای CSS زیر رو در قسمت سفارشی سازی و کدهای CSS اضافی پیست کن:

/* Style for Download box by RayaWp.ir */
.styled-downloads {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #0073aa, #005177);
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.styled-downloads h2 {
    text-align: center;
    font-size: 24px;
    color: #fff;
    margin-bottom: 15px;
}

.styled-downloads-table {
    width: 100%;
    border-collapse: collapse;
}

.styled-downloads-table th, .styled-downloads-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.styled-downloads-table th {
    background: rgba(0, 0, 0, 0.1);
    font-size: 16px;
    color: #fff;
}

.styled-downloads-table td {
    font-size: 14px;
    color: #eee;
}

.styled-downloads-table a {
    color: ##8e44ad;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}
.woocommerce-table--order-downloads .download-product a{
		color:#ffffff;

}
.styled-downloads-table a:hover {
    color: #fff;
}

.styled-download-button {
    display: inline-block;
    padding: 10px 20px;
    background: #fff; 
    color: #333;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.styled-download-button:hover {
    background: #333;
    color: #fff;
}

.download-emoji {
    font-size: 20px;
    margin-left: 10px;
}

بعد از قرار دادن کدهای بالا استایل جدول دانلود محصول به شکل زیر تغییر خواهد کرد 🙂

نتیجه‌ گیری 🏆

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

این روش به‌طور کامل بهت این امکان رو میده که بدون هیچ افزونه‌ای صفحه تشکر از خرید ووکامرس رو مطابق سلیقه خودت شخصی‌سازی کنی. امیدوارم این آموزش بهت کمک کنه و بتونی ازش استفاده کنی! 🌟