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

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

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

رنگ بندی فروشگاه ووکامرس

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

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

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

بهبود و رشد کسب و کار با رعایت نکات ظاهری سایت

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

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

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

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

افزونه را نصب و فعال سازی کنید بعد از فعال سازی برای اعمال رنگ جدید به ووکامرس به قسمت نمایش>سفارشی سازی و سپس بر روی گزینه WooCommerce کلیک کنید

بعد شما وارد صفحه ای می شوید که در آن تنظیمات رنگ بندی دیده می شود .

Primary Color : با استفاده از این گزینه می توانید رنگ اصلی فروشگاه را تغییر دهید مانند رنگ دکمه ها ، قیمت ها و …
Secondary Color : با این گزینه شما قادر به تغییر رنگ تب ها خواهید بود .
Highlight Color : در این گزینه شما می توانید رنگ دکمه های حراج، قیمت و … را تغییر دهید.
Content Background Color : در این گزینه نیز میتوان رنگ پس زمینه را انتخاب نمود
Subtext Color : رنگ متن ها را نیز از این گزینه مشخص کنید .

بعد از انتخاب رنگ های مورد نظر خود بر روی گزینه ذخیره و انتشار کلیک کنید تا تغییرات روی ووکامرس اعمال شود.

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

شما برای آن که بتوانید رنگ پیش فرض دکمه ها را در WooCommerce را تغییر دهید باید کد های CSS پیش فرض و سبک موجود را ویرایش و تغییر دهید و در واقع آنها را سفارش سازی نمایید که انجام این کار به صورت کلی از دو طریق قابل انجام است :

  • اضافه کردن کد های CSS سفارشی به فایل style.css قالب ووکامرس
  • استفاده از یک پلاگین برای وارد کردن کد های CSS سفارشی

استفاده از افزونه Simple Custom CSS

شما با استفاده از این افزونه می توانید به راحتی کد های سفارش سازی شده ی خود را به صفحات سایت اعمال کنید و تغییرات دلخواه خود را ایجاد نمایید در ابتدا افزونه را نصب و سپس فعال سازی کنید . بعد از فعال سازی برای انجام تنظیمات وارد افزونه شوید .
سپس در صفحه ای که برای شما باز می شود کد های CSS مورد نظر خود را در بخش و یا کادر Text وارد کرده و بر روی Update CSS Custom CSS”کلیک کنید .

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

 

حال برای دیدن نتیجه ی کار خود به یکی از محصولات خود و یا به صفحه ی سبد خرید مراجعه کنید . در آن جا خواهید دید که دکمه ها دارای رنگ قرمز شده اند که برای تغییر این رنگ می توانید backgroud: red! important” را به رنگ دلخواه خود تغییر دهید و سپس بر روی دکمه ی Update کلیک کرده و تغییرات خود را ذخیره و بروز کنید .

این کد ها در افزونه فوق قرار دهید اما اگر نمیخواهید از افزونه استفاده کنید کافیست تا کد های بالا را در فایل استایل قالب خود یعنی style.css قرار دهید به گونه ای که نیازی به تغییر بخشی خاص نیست و تنها باید در انتهای این فایل این کد ها را قرار دهید اگر با قرار دادن کد های بالا تغییری مشاهده نکردید احتمالا دو حالت وجود دارد یکی اینکه باید کش سایت و سیستم خود را خالی کنید و مجدد تست کنید به این ترتیب که اگر از افزونه های کش یا افزایش سرعت برای بارگذاری سریع تر وب سایت استفاده میکنید در پوشه کش داخل هاست را پاک کنید تا کش سایت خالی شود و در مرورگر هم کش را پاک کنید برای خالی کردن کش همان وب سایت در حال اجرا کلید ترکیبی Ctrl + F5 را بزنید.

احتمال دوم اینکه کد های شما به صورت تکراری در استایل قرار دارند یعنی اینکه برای کلاس مثلا woocommerce-page یک خاصیت از قبل تعریف شده است که مطمئنن این طور می باشد اما چطور به مرورگر بفهمانیم که کد ها ی ما را در اولیت برای نمایش دادن قرار دهد ؟

اینکار با استفاده از دستور important در css انجام میشود به معنی اهمیت بالاتر این خاصیت در این کلاس ممکن است چند بار برای یک کلاس خاصیت تعریف شده باشد اما به ترتیب اولیت از استایل درون خطی شروع و به بدون important ختم میشود. اگر کد های بالا را قرار دادید و آن بخش رنگ تغییری نکرد از کد important برای دادن اولیت به خاصیت مد نظر که همان تغییر رنگ است استفاده کنید.

البته برای انتخاب رنگ ها نیز میتوانید از پالت های رنگ آماده هم استفاده کنید به طوری که کافیست عبارت color palette  را در گوگل جستجو کنید تا ترکیب رنگ های مناسب تری را پیدا کنید.

برچسب ها

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Captcha loading...

بستن