تغییر رنگ ووکامرس بدون افزونه؛ آموزش کامل

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

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

تغییر رنگ ووکامرس بدون نصب افزونه

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

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

اول نوع پوسته سایتتون رو مشخص کنید

پوسته بلوکی یعنی پوسته‌ای که سربرگ، پابرگ، قالب نوشته‌ها و بخش‌های دیگه سایت رو با بلوک‌های وردپرس ویرایش می‌کنه. اگه در پیشخوان به مسیر «نمایش ← ویرایشگر» دسترسی دارید، به احتمال زیاد پوسته‌تون بلوکیه.

اگه به‌جای «ویرایشگر»، گزینه «سفارشی‌سازی» رو در منوی نمایش می‌بینید، احتمالاً پوسته‌تون کلاسیکه. اسم و جای دقیق تنظیمات در هر پوسته فرق می‌کنه.

تغییر رنگ ووکامرس در پوسته‌های بلوکی

در پوسته‌های بلوکی، بیشتر تغییرات ظاهری فروشگاه از داخل ویرایشگر سایت انجام می‌شن. برای شروع این مراحل رو پیش برید:

1. در پیشخوان وردپرس وارد «نمایش ← ویرایشگر» بشید.
2. بخش «استایل‌ها» رو باز کنید. استایل‌ها همون تنظیماتی هستن که رنگ، فونت و ظاهر کلی سایت رو کنترل می‌کنن.
3. وارد قسمت «رنگ‌ها» بشید و پالت اصلی سایت رو ببینید.
4. اگه می‌خواید فقط یک بخش تغییر کنه، قسمت «بلوک‌ها» رو باز کنید و بلوک موردنظرتون رو انتخاب کنید.
5. پیش‌نمایش رو با دقت ببینید و بعد روی «ذخیره» کلیک کنید.

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

تغییر رنگ یک بلوک ووکامرس

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

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

تغییر رنگ ووکامرس در پوسته‌های کلاسیک

در پوسته‌های کلاسیک معمولاً باید به مسیر «نمایش ← سفارشی‌سازی» برید. بعد دنبال بخش‌هایی با عنوان «رنگ‌ها»، «ووکامرس»، «فروشگاه»، «دکمه‌ها» یا «استایل عمومی» بگردید. این عنوان‌ها به پوسته‌تون بستگی دارن و ممکنه با اسم متفاوتی نمایش داده بشن.

1. قبل از شروع، از ظاهر فعلی فروشگاهتون نسخه پشتیبان بگیرید.
2. وارد «نمایش ← سفارشی‌سازی» بشید.
3. تنظیمات رنگ یا ووکامرس رو باز کنید.
4. رنگ دکمه‌ها، لینک‌ها و پس‌زمینه رو یکی‌یکی تغییر بدید.
5. پیش‌نمایش موبایل و دسکتاپ رو ببینید.
6. اگه نتیجه مناسب بود، روی «انتشار» کلیک کنید.

اگه گزینه «سفارشی‌سازی» رو نمی‌بینید، احتمالاً پوسته‌تون بلوکیه و باید از مسیر «نمایش ← ویرایشگر» برید. بعضی پوسته‌ها هم پنل تنظیمات جداگانه دارن. در این حالت بهتره راهنمای رسمی همون پوسته رو ببینید.

تغییر رنگ بخش‌های مهم فروشگاه

دکمه خرید و دکمه‌های فروشگاه

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

قیمت محصول

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

برچسب حراج

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

سبد خرید و تسویه‌حساب

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

تغییر رنگ ووکامرس با CSS اضافی

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

در پوسته‌های کلاسیک معمولاً کد رو از مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» وارد می‌کنید. محل ثبت CSS در پوسته‌های بلوکی به پوسته و نسخه وردپرس بستگی داره. اگه این قسمت رو پیدا نکردید، امکانات پوسته یا یک چایلد تم به کارتون میاد. چایلد تم نسخه فرزند پوسته‌ست و کمک می‌کنه تغییراتتون با به‌روزرسانی پوسته اصلی از بین نرن.

این نمونه رنگ پس‌زمینه و نوشته دکمه‌های معمول ووکامرس رو تغییر می‌ده:

.woocommerce a.button,.woocommerce button.button,.woocommerce input.button {  background-color: #1e73be;  color: #ffffff;}

نمونه بعدی برای تغییر رنگ قیمت محصوله:

.woocommerce div.product p.price,.woocommerce div.product span.price {  color: #1e73be;}

برای تغییر رنگ برچسب حراج هم می‌تونید این کد رو امتحان کنید:

.woocommerce span.onsale {  background-color: #d63638;  color: #ffffff;}

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

قبل از ذخیره رنگ‌ها این نکته‌ها رو بررسی کنید

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

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

جمع‌بندی

برای تغییر رنگ ووکامرس، اول ببینید پوسته سایتتون بلوکیه یا کلاسیک. در پوسته‌های بلوکی از مسیر «نمایش ← ویرایشگر ← استایل‌ها» برید. در پوسته‌های کلاسیک هم تنظیمات «نمایش ← سفارشی‌سازی» و پنل خود پوسته رو ببینید. اگه هیچ‌کدوم تنظیم لازم رو نداشتن، اون موقع از CSS اضافی کمک بگیرید.

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

سؤالات متداول

تیم تولید محتوا

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