سلام رفقا ، شاید تا به امروز توجه کرده باشین که ایمیل های ووکامرس یا همون فروشگاه اینترنتی سایت وردپرسیتون برای کاربر هایی که با موبایل هستن به درستی نمایش داده نمیشه؛
خب همینجا بگم خیالتون راحت باشه که مشکل از جانب شما نیست و عدم نمایش صحیح ایمیل خرید ووکامرس در تلفن های همراه یکی از مشکلات همه مدیران سایت های فروشگاهی هست که سایتشون بر پایه ووکامرسه . حالا اگه شما هم با این مشکل مواجه هستید تا آخر این آموزش همراه من باشید.
مشکل نمایش ایمیل ووکامرس
– مشکل نمایش ایمیل ووکامرس به دو روش از بین میرود.
- روش اول استفاده از افزونه
- روش دوم کدنویسی
در روش اول افزونه های مختلفی برای شخصی سازی ایمیل و نمایش ایمیل هاتون وجود دارد اما ما در این آموزش قصد توضیح و نحوه استفاده از افزونه را نداریم. برای اینکار میتونید منتظر آموزش های دیگه من در آینده باشین و یا اینکه به سایت ها و مقالات دیگر دوستان مراجعه کنید.
قصد دارم راحت رتین راه رو بهتون بگم تا با استفاده از دو خط کد به راحتی ایمیل ووکامرس را ریسپانسیو کنید.
ریسپانسیو شدن ایمیل ووکامرس در یک دقیقه
برای ریسپانسیو شدن ایمیل ووکامرس در موبایل مراحل را با من قدم به قدم پیش ببرید تا در عرض یک دقیقه ایمیل های خرید مشتری های خود را به زیبایی تماشا کنید.
قبل از هر چیز اگر با فایل ها در وردپرس آشنایی ندارید پیشنهاد میکنم آموزش های وردپرس سایت من را مشاهده کنید.
البته در این بخش نیاز به دانش فنی خاصی ندارید.
برای شروع به هاست خود بروید.
در بخش مدیریت فایل ها وارد پوشه public_html بشوید.
در این پوشه فایل های قالب وردپرس قرار دارد.وارد پوشه wp-content شده و سپس پوشه plugins را باز کنید.
در حال حاضر شما وارد بخش افزونه های سایت خود شده اید.
پوشه woocommerce را انتخاب کنید و سپس وارد پوشه templates شوید.حال پوشه emails را انتخاب کنید.آخرین فایل با نام email-styles.php را انتخاب کنید.بر روی فایل دابل کلیک کرده و یا کلیک راست و ویرایش فایل را بزنید.
در واقع مسیر فایل به شکل زیر است.
public_html/wp-content/plugins/woocommerce/templates/emails
بعد از باز شدن فایل به آخرین خط فایل رفته و قبل از علامت ?> کدهای زیر را جایگذاری نمایید.
#template_container, #template_header_image, #template_header, #template_body, #template_footer {
width:100% !important;
max-width:600px !important;
min-width:320px !important;
}
#wrapper {
max-width: 600px !important;
margin: 0 auto !important;
padding: 0 !important;
}
افزونه ریسپانسیو شدن ایمیل ووکامرس در موبایل
اگر مسیر بالا براتون سخت هست و میخواید راه راحت تر رو انتخاب کنید میتونید از افزونه ” woocommerce responsive email style armanplus ” استفاده کنید . برای اینکار کافیه به صفحه زیر برید
افزونه رو دانلود کنید و طبق آموزش های موجود افزونه رو داخل هاست در پوشه پلاگین ها آپلود کنید. و بعد از فعالسازی این پلاگین مشکل واکنشگرا نبودن ایمیل ها حل میشه.
– و یا اینکه نام افزونه رو در مخزن وردپرس جستجو کنید و از طریق مخزن به سادگی افزونه رو نصب و فعال کنید.
آیکون افزونه در مخزن وردپرس:
نکته بسیار مهم به دلیل اینکه فایل ویرایش شده در بخش افزونه های ووکامرس است با هر بروزرسانی این افزونه تغییرات شما از بین میرود.برای حل این مشکل کد بالا را در بخش از سیستم خود ذخیره کنید و بعد از هر بروزرسانی این کد را در همان فایل email-styles.php قرار دهید.
4 پاسخ
سلام خیلی ممنونم بابت این آموزش ساده و کاربردی
اما یک سوال اینکه آیا میشه کاری کرد به صورت دائمی ریسپانسیو بمونه؟ بدون افزونه
سلام ، وقتتون بخیر باشه ، خوشحالم پستی که آماده کردم مورد توجهتون بوده ؛
بله قطعا راهکار هایی برای ثابت بودن این کد هست که نیاز نباشه بعد از هر آپدیت زحمت تغییر این کد رو بکشین،
برای مثال هم میتونید از طریق فایل فانکشن قالب کاری کنید که این کد اجرا بشه، یا اینکه به صورت افزونه از کد استفاده کنید. حتما هر دو روش رو در آپدیت این مقاله براتون توضیح میدم.
سلام و درود
متاسفانه کد قرار داده شده اصلا درست کار نمیکنه و ایمیل ها هنوز با همون شرایط ارسال خواهند شد.
با احترام
سلام شهروز جان ، کد تست شده و مشکلی نداره … االبته اگر مشکلی وجود داره برای حل مشکل در خدمتتون هستم.
در ضمن حتما آپدیت این پست رو هم مطالعه کنید ، افزونه و کد فانکشن هم برای انجام این کار بهتون معرفی کردم.
اگر باز هم مشکلتون حل نشد ، حتما از طریق راه های ارتباطیم بهم پیام بدین، با کمال میل در خدمت هستم.