مرجع آموزش برنامه نویسی

افراد زیادی هستند که از طریق تحصیل یا علاقه به حوزه برنامه نویسی وارد می شوند ، اما پس از مدتی یا از یادگیری بی نتیجه خسته می شوند و یا آنطور که باید از کار خود لذت نمی برند. برنامه نویسی مسیر دشواری دارد که فقط افراد قدرتمند و هدفمند از پس آن بر می آیند. کسانی که به هر قیمتی استقامت می کنند هزینه رشد خود را می پردازند.
۴ دوره
+1500 دقیقه آموزش
۴۶۶ مقاله
۱۲۴۹ کاربر
سون کلونر

نحوه تغییر تم ویترین رنگ دکمه

زمانی که می خواهید ووکامرس خود را راه اندازی کنید، تم Storefront بسیار توصیه می شود. این به این دلیل است که این تم را می توان سفارشی کرد و به طور یکپارچه با افزونه ووکامرس ادغام می شود. با این حال، چگونه می توان رنگ دکمه افزودن به سبد خرید را در ووکامرس تغییر داد؟

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

رنگ دکمه تغییر تم ویترین

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

علاوه بر این، یک طراحی تمیز را ساده می کند، طرح بندی های همه کاره را به حداکثر می رساند، و همچنان می تواند آن جسارتی را که WooThemes به آن معروف است حفظ کند. برای یک تم رایگان، ویژگی های موجود در آن بسیار عالی هستند.

با تمام آنچه گفته شد، بگذارید ببینیم چگونه می توانید رنگ دکمه را در موضوع فروشگاه خود تغییر دهید.

مراحل تغییر رنگ دکمه با استفاده از Customizer

  • وارد سایت وردپرس خود شوید و به عنوان کاربر مدیریت به داشبورد دسترسی پیدا کنید.
  • پس از آن، به Appearance > Customize بروید و Customizer را بارگذاری کنید.
  • در سفارشی ساز روی دکمه ها > رنگ پس زمینه دکمه جایگزین کلیک کنید و رنگ خود را تنظیم کنید.

  • در صورت رضایت از تغییرات بر روی انتشار کلیک کنید.

مراحل تغییر رنگ دکمه با استفاده از CSS

در این قسمت با استفاده از CSS رنگ دکمه را تغییر می دهم. در اینجا شما کمی CSS را یاد خواهید گرفت. قطعه کد باید در فایل style.css تم شما قرار گیرد. علاوه بر این، می توانید آن را به بخش CSS اضافی اضافه کنید. اگر از این روش استفاده می کنید، افزونه ای برای نگهداری ندارید و نیازی نیست استایل های CSS را از پایگاه داده خارج کنید.

برای استایل دادن به دکمه افزودن به سبد خرید در صفحه تک محصول، باید کلاسی را که باید استایل کنیم مشخص کنیم. به سادگی روی ناحیه ای که می خواهید در مرورگری مانند کروم یا فایرفاکس تغییر دهید راست کلیک کنید و روی “Inspect Element” کلیک کنید.

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

باید همین رویه را برای دکمه افزودن به سبد خرید در صفحه فروشگاه انجام دهید. این بدان معناست که ما باید کلاس single_add_to_cart_button و کلاس add_to_cart_button را استایل کنیم.

پس از شناسایی کلاس های CSS، مراحل زیر را دنبال کنید:

  • وارد سایت وردپرس خود شوید و به عنوان کاربر مدیریت به داشبورد دسترسی پیدا کنید.
  • از منوی داشبورد، روی Appearance Menu > Customize کلیک کنید
  • در نوار کناری سمت چپ که ظاهر می‌شود، به قسمت Additional CSS بروید.

  • قانون CSS را مطابق شکل زیر اضافه کنید:
.single-product .product .single_add_to_cart_button.button{

            background-color: #333333;

            color: #FFFFFF;

}

.woocommerce .product .add_to_cart_button.button{

            background-color: #333333;

            color: #FFFFFF;

}

این نتیجه خواهد بود:

  • پس از اینکه از تغییرات راضی شدید، روی انتشار کلیک کنید.

نتیجه

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

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


قیمت آموزش
رایگان
نوع دسترسی
رایگان

این مقاله در حال حاضر تنها به روش رایگان در دسترس می باشد.

ناصر خالدی
مدرس دوره

ناصر خالدی

مهندس شبکه, امنیت, برنامه نویسی تلفن های هوشمند, طراح وب سایت و متخصص هوش مصنوعی

گفتگوی برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر نیاز است تا ابتدا وارد سایت شوید.

هیچ نظری ارسال نشده است.

مقالات پیشنهادی

جاوا اسکریپت

جاوا اسکریپت یک زبان پویا و محبوب مبتنی بر شیء, داینامیک و مفسری می باشد. این زبان برای برنامه نویسی سمت سرور و کلاینت استفاده میشود که ...


۳۵
۰
۱۳ آذر ۱۳۹۹

پی اچ پی - PHP

با استفاده از این زبان می توان وب سایت های پویا طراحی کرد, این زبان می تواند با HTML ادغام شود, در حقیقت یک زبان اسکریپتی متن باز و رایگان است. یعنی زمانی که سرور درخواست ...


۶۴
۰
۱۳ آذر ۱۳۹۹

وردپرس

وردپرس یک سیستم مدیریت محتوای قوی می باشد که با استفاده از آن می توان وب سایت ها و وبلاگ های گوناگونی با هر شرایطی را طراحی کرد چرا که این سیستم و ...


۳۶
۰
۱۳ آذر ۱۳۹۹

نود جی اس

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


۵۴
۰
۱۲ آذر ۱۳۹۹
logo-samandehi
تماس با ما

می توانید از طریق اطلاعات زیر با ما در ارتباط باشید.

درباره ما

سایت سون کلونر به تازگی شروع به کار کرده است و امید می رود تا بتواند پایگاه وسعی از آموزش های رایگان را در دسترس فارسی زبانان قرار دهد.