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

دو راه برای انجام این کار وجود دارد:

• CSS سفارشی را به پرونده style.css کودک اضافه کنید
• برای تزریق کد CSS سفارشی در صفحات وب از برخی افزونه ها استفاده کنید.

مرحله 1: پلاگین Simple CSS Custom را در وردپرس نصب و فعال کنید

از a استفاده خواهیم کرد پلاگین وردپرس برای تزریق کد CSS به صفحات a فروشگاه WooCommerce آنلاین. می توانید افزونه را بارگیری کنید: ساده CSS سفارشی

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

پس از فعال سازی افزونه ، زیر منوی جدیدی به منو اضافه می شود ظاهر :

دسترسی به این بخش شما را به یک رابط با جعبه متن می برد که در آن می توانید کد CSS سفارشی را وارد کنید.

CSS زیر را در کادر متن قرار داده و سپس روی " به روز رسانی CSS سفارشی"

.woocommerce #content input.button.alt: شناور، .woocommerce #respond ورودی # submit.alt: شناور، .woocommerce a.button.alt: شناور، .woocommerce button.button.alt: شناور، .woocommerce input.button. ALT: شناور، .woocommerce صفحه #content input.button.alt: شناور، ورودی .woocommerce صفحه #respond # submit.alt: شناور، a.button.alt .woocommerce صفحه: شناور، دکمه .woocommerce صفحه. button.alt: شناور، input.button.alt .woocommerce صفحه: شناور {پس زمینه: قرمز قابل توجه است؛ رنگ پس زمینه: قرمز مهم؛ ! رنگ: سفید مهم؛ متن سایه: شفاف مهم؛ جعبه سایه: هیچ؛ رنگ حاشیه: #ca0606 مهم؛ } .woocommerce #content Input.button: شناور، .woocommerce #respond ورودی # ارسال: شناور، .woocommerce a.button: شناور، .woocommerce button.button: شناور، .woocommerce input.button: شناور، .woocommerce صفحه # input.button مبارک: شناور، ورودی .woocommerce صفحه #respond # ارسال: شناور، .woocommerce صفحه a.button: شناور، .woocommerce صفحه button.button: شناور، .woocommerce صفحه input.button: شناور {پس زمینه : قرمز مهم؛ رنگ پس زمینه: قرمز مهم؛ ! رنگ: سفید مهم؛ متن سایه: شفاف مهم؛ جعبه سایه: هیچ؛ رنگ حاشیه: #ca0606 مهم؛ } .woocommerce #content Input.button، .woocommerce #respond ورودی # را ارسال کنید، a.button .woocommerce، button.button .woocommerce، input.button .woocommerce، .woocommerce صفحه #content input.button، .woocommerce صفحه # # ارسال ورودی پاسخ می دهد، a.button .woocommerce صفحه، .woocommerce صفحه button.button، .woocommerce صفحه input.button {پس زمینه: قرمز قابل توجه است؛ ! رنگ: سفید مهم؛ متن سایه: شفاف مهم؛ رنگ حاشیه: #ca0606 مهم؛ } .woocommerce #content Input.button.alt: شناور، .woocommerce #respond ورودی # submit.alt: شناور، .woocommerce a.button.alt: شناور، .woocommerce button.button.alt: شناور، .woocommerce input.button .alt: شناور، .woocommerce صفحه #content input.button.alt: شناور، ورودی .woocommerce صفحه #respond # submit.alt: شناور، a.button.alt .woocommerce صفحه: شناور، دکمه .woocommerce صفحه .button.alt: شناور، input.button.alt .woocommerce صفحه: شناور {پس زمینه: قرمز قابل توجه است؛ جعبه سایه: هیچ؛ متن سایه: شفاف مهم؛ ! رنگ: سفید مهم؛ رنگ حاشیه: #ca0606 مهم؛ }

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

برای سفارشی کردن رنگ دکمه ها تا در نهایت ظاهری که می خواهید داشته باشید ،

جایگزین اموال " backgroud: قرمز! مهم است توسط یک رنگ انتخابی خود را. کدها را به روز کنید و دوباره به فروشگاه آنلاین خود دسترسی پیدا کنید. در واقع ، با استفاده از یک ظاهر طراحی شده که به شما ارائه داده ایم ، می توانید ساختار دکمه ها را کاملا تغییر دهید.

با کمی تحقیق، می‌توانید دکمه‌های منحصربه‌فردی را با سبکی که با شما مطابقت دارد ایجاد کنید تم وردپرس (به خصوص اگر مورد دوم با ووکامرس سازگار نباشد).

برای مثال زیر می توانید از کد CSS زیر استفاده کنید.

.woocommerce #content input.button، .woocommerce #respond ورودی # را ارسال کنید، a.button .woocommerce، button.button .woocommerce، input.button .woocommerce، .woocommerce صفحه #content input.button، #respond .woocommerce صفحه # ارسال ورودی، .woocommerce صفحه a.button، .woocommerce صفحه button.button، .woocommerce صفحه input.button {رنگ پس زمینه: #6fba26؛ بالشتک: 10px؛ موقعیت: نسبی؛ فونت خانواده: 'باز کردن بدون'، بدون serif؛ اندازه فونت: 12px؛ متن دکوراسیون: هیچ؛ رنگ: به #fff؛ تصویر پس زمینه: خطی با شیب (پایین، RGB (100,170,30) 0٪ RGB (129,212,51) 100٪)؛ جعبه سایه: الحاق 0px 1px 0px #7F8EF1، 0px 6px 0px #0D496F؛ مرز-شعاع: 5px؛ } .woocommerce #content input.button.alt: شناور، .woocommerce #respond ورودی # submit.alt: شناور، .woocommerce a.button.alt: شناور، .woocommerce button.button.alt: شناور، .woocommerce input.button .alt: شناور، .woocommerce صفحه #content input.button.alt: شناور، ورودی .woocommerce صفحه #respond # submit.alt: شناور، a.button.alt .woocommerce صفحه: شناور، دکمه .woocommerce صفحه .button.alt: شناور، input.button.alt .woocommerce صفحه: شناور {بالا: 7px؛ تصویر پس زمینه: خطی با شیب (پایین، RGB (100,170,30) 100٪ RGB (129,212,51) 0٪)؛ جعبه سایه: الحاق 0px 1px 0px #0D496F، الحاق 0px -1px 0px #0D496F؛ رنگ: # 156785؛ متن سایه: 0px 1px 1px RGBA (255,255,255,0.3)؛ پس زمینه: rgb (44,160,202)؛ }

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

ما همچنین افزونه های 3 premium WordPress را برای این کار طراحی کرده ایم.

1. WooCommerce بازیابی کارت تخفیف

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

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

دانلود | نسخه ی نمایشی | میزبانی وب

2. افزونه دکمه WooCommerce Hide Price & Add to Cart

افزونه WooCommerce Hide Prices به بازرگانان این امکان را می دهد تا قوانین متعددی برای پنهان کردن قیمت ها یا پنهان کردن دکمه "افزودن به سبد خرید" از مشتریانی که به سیستم آنها وارد نشده اند یا کاربرانی که از حقوق دسترسی خاصی به وب سایت تجارت الکترونیکی شما برخوردار هستند ، پنهان کنند.

می‌توانید قیمت و دکمه «افزودن به سبد خرید» را روی محصولات خاص یا در دسته‌های خاص پنهان کنید. می‌توانید آن‌ها را با متن سفارشی یا دکمه‌ای جایگزین کنید که آن‌ها را به آن می‌برد  فرم تماس. می توانید قوانینی را ایجاد کنید که به طور خودکار قیمت و "" را مخفی می کند. اضافه کردن به panier ”بسته به آنچه می خواهید.

دانلود | نسخه ی نمایشی | میزبانی وب

3. WooCommerce Currency Switcher

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

این امر به ویژه در تجارت الکترونیکی از این جهت مهم است که هدف آن کل جهان است. این افزونه تضمین می کند که مشتریان شما در هر کجا مستقر هستند ، همیشه می توانند از فروشگاه آنلاین شما سفارش بگیرند.

دانلود | نسخه ی نمایشی | میزبانی وب

منابع پیشنهادی

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

• 50 از WooCommerce پلاگین برای بهبود فروشگاه آنلاین خود را
• افزونه 9 وردپرس برای ایجاد یک برنامه وابسته
• 9 WooCommerce پلاگین برای ارتقاء ویژگی های محصولات متغیر شما
• افزونه های 5 وردپرس به صورت بصری CSS را در وبلاگ خود ویرایش کنید

نتیجه

اینجاست این همه این آموزش است که به سفارشی سازی دکمه اختصاص یافته است افزودن به سبد خرید از WooCommerce. دریغ نکنید که آن را با دوستان خود در میان بگذارید شبکه های اجتماعی ارجح است. 

با این حال، شما همچنین می توانید با ما مشورت کنید ressourcesاگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس.

در ضمن ، در مورد خودتان به ما بگویید نظر و پیشنهادات در بخش اختصاصی

...