لتغيير لون أزرار WooCommerce ، نحتاج إلى تغيير ملف style.css الافتراضي للأزرار أو استبداله. للقيام بذلك ، سنحتاج إلى إضافة كود CSS مخصص لنا وورد موضوع الطفل.

هناك طريقتان للقيام بذلك:

• إضافة CSS مخصص إلى ملف style.css السمة التابعة
• استخدم بعض المكونات الإضافية لحقن كود CSS مخصص في صفحات الويب الخاصة بك.

الخطوة 1: تثبيت البرنامج المساعد على وورد CSS مخصص بسيط وتفعيلها

سنستخدم مكون إضافي لـ WordPress لحقن كود CSS في صفحات WooCommerce للتسوق عبر الإنترنت. يمكنك تنزيل البرنامج المساعد: CSS مخصص بسيط

يمكنك قراءة البرنامج التعليمي لدينا على تثبيت وتفعيل البرنامج المساعد WordPress.

بعد تنشيط المكون الإضافي ، ستتم إضافة قائمة فرعية جديدة إلى القائمة Apparence :

سينقلك الوصول إلى هذا القسم إلى واجهة بها مربع نص حيث يمكنك إدخال رمز CSS مخصص.

ضع CSS التالي في مربع النص ثم انقر فوق " تحديث CSS مخصص".

.woocommerce #content input.button.alt: تحوم، .woocommerce #respond المدخلات # submit.alt: تحوم، .woocommerce a.button.alt: تحوم، .woocommerce button.button.alt: تحوم، .woocommerce input.button. بديل: تحوم، .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 # تقديم: تحوم، a.button .woocommerce الصفحات: تحوم، button.button .woocommerce الصفحات: تحوم، input.button .woocommerce الصفحات: تحوم {خلفية : الأحمر من الأهمية بمكان؛ لون الخلفية: الأحمر من الأهمية بمكان؛ ! اللون: أبيض المهم. النص الظل: الشفافية هامة. مربع الظل: لا شيء؛ الحدود بين اللون: #ca0606 من الأهمية بمكان؛ } .woocommerce #content Input.button، .woocommerce #respond المدخلات # تقدم، a.button .woocommerce، button.button .woocommerce، input.button .woocommerce، .woocommerce الصفحات #content input.button، .woocommerce الصفحات # # تقديم يستجيب المدخلات، a.button .woocommerce صفحة، button.button .woocommerce صفحة، input.button .woocommerce الصفحات {خلفية: أحمر كبيره. ! اللون: أبيض المهم. النص الظل: الشفافية هامة. الحدود بين اللون: #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: أحمر مهم! بواسطة أ لون من اختيارك. قم بتحديث الرموز والوصول إلى متجرك عبر الإنترنت مرة أخرى. في الواقع ، باستخدام التصميم الذي قدمناه لك للتو ، ستتمكن من تغيير هيكل الأزرار تمامًا.

من خلال القليل من البحث، يمكنك إنشاء أزرار فريدة بأسلوب يتناسب مع قالب WordPress الخاص بك (خاصة إذا كان الأخير غير متوافق مع WooCommerce).

في المثال التالي ، يمكنك استخدام كود CSS التالي.

.woocommerce #content input.button، .woocommerce #respond المدخلات # تقدم، a.button .woocommerce، button.button .woocommerce، input.button .woocommerce، .woocommerce الصفحات #content input.button، #respond .woocommerce الصفحات # تقديم المدخلات، a.button .woocommerce صفحة، button.button .woocommerce صفحة، .woocommerce الصفحات input.button {لون الخلفية: #6fba26. الحشو: 10px. الموقف: النسبية. font-family: 'Open Sans'، sans-serif؛ FONT-SIZE: 12px. النص الديكور: لا شيء؛ اللون: # الاتحاد الفرنسي. background-image: linear-gradient (bottom، rgb (100,170,30) 0٪، rgb (129,212,51) 100٪)؛ مربع الظل: أقحم 0px 1px 0px #7F8EF1، 0px 6px 0px #0D496F. border-radius: 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: hover، .woocommerce-page input.button.alt: hover {top: 7px؛ background-image: linear-gradient (bottom، 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 استرداد المهجورة العربة ستتمكن من الاتصال بهم وتذكيرهم بما اشتروه ودعوتهم لإكمال أعمالهم.

عيِّن الفاصل الزمني بين وقت التخلي عن عربة التسوق ووقت إرسال بريد إلكتروني تذكير شخصي إلى عميلك مع رابط مباشر إلى صفحة المشتريات ليتمكنوا من معرفة ما كانوا عليه أشر للشراء.

تحميل | عرض | استضافة المواقع

2. WooCommerce إخفاء السعر وإضافة زر إضافة إلى عربة التسوق

يسمح المكون الإضافي WooCommerce إخفاء الأسعار للتجار بإنشاء قواعد متعددة لإخفاء الأسعار أو إخفاء زر "إضافة إلى سلة التسوق" عن العملاء الذين لم يسجلوا الدخول أو المستخدمين الذين لديهم حقوق وصول معينة إلى موقع التجارة الإلكترونية الخاص بك.

يمكنك إخفاء السعر وزر "إضافة إلى سلة التسوق" في منتجات معينة أو فئات محددة. يمكنك استبدالهما بنص مخصص أو زر ينقلك إلى نموذج الاتصال. يمكنك إنشاء أي عدد تريده من القواعد لإخفاء السعر وزر "إضافة إلى سلة التسوق" تلقائيًا. أضف إلى بانيr "حسب ما تريد.

تحميل | عرض | استضافة المواقع

3. ووكومرس العملات الجلاد

يتيح لك هذا البرنامج المساعد تبديل أسعار المنتج من عملة إلى أخرى في الوقت الفعلي.

هذا مهم بشكل خاص في التجارة الإلكترونية ، لأنه يستهدف العالم بأسره. يضمن هذا المكون الإضافي أنه بغض النظر عن مكان تواجد عملائك ، سيتمكنون دائمًا من الطلب من متجرك عبر الإنترنت.

تحميل | عرض | استضافة المواقع

الموارد الموصى بها

اكتشف الموارد الأخرى الموصى بها والتي ستساعدك تحسين أداء متجرك عبر الإنترنت. 

• الإضافات 50 WooCommerce لتحسين متجر على الانترنت
• 9 WordPress plugins لإنشاء برنامج فرعي
• الإضافات 9 WooCommerce لتحسين سمات منتجاتك المتغيرة
• ملحقات 5 WordPress لتحرير CSS بصريًا على مدونتك

الخاتمة

هنا! هذا كل شيء في هذا البرنامج التعليمي المخصص لتخصيص الأزرار أضف إلى السلة من WooCommerce. لا تتردد في مشاركتها مع أصدقائك على الشبكات الاجتماعية فضل. 

ومع ذلك ، ستتمكن أيضًا من الرجوع إلى موقعنا RESSOURCES، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق.

ولكن في غضون ذلك ، أخبرنا عن ملف تعليقات والاقتراحات في قسم مخصص.

... 

بلير Jersyer

مطور WordPress ومتحمس لكل ما يتعلق بالاتجاهات التكنولوجية الجديدة. مؤلفو الإضافات وموضوعات WordPress وتطبيقات الويب الأخرى. مؤلف في BlogPasCher.com.

انظر السيرة الذاتية الكاملة