كيفية تغيير لون خلفية WooCommerce Checkout

نشرت: 2021-04-19

تغيير لون خلفية WooCommerce Checkout هل تبحث عن طريقة لتغيير لون خلفية النماذج في صفحة الخروج؟ يعد تحسين صفحة الخروج منطقة يتم تجاهلها بشكل متكرر من قبل مالكي متاجر WooCommerce.

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

قد ترغب في تغيير لون الخلفية في صفحة الخروج. بشكل افتراضي ، لا يحتوي WooCommerce على حل مضمن للقيام بذلك.

يمكنك استخدام مكون إضافي ، لكننا نوصي باستخدام رمز مخصص. هذا لأنهم قد ينتفخ موقع الويب الخاص بك.

تغيير لون خلفية WooCommerce Checkout

بنهاية هذا المنشور ، يجب أن تكون قادرًا على تغيير لون الخلفية لنماذج صفحة الخروج.

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

سنقوم أيضًا بتصميم حقول النموذج ونص العنصر النائب وجميع أزرار WooCommerce.

ومن الجدير بالذكر أيضًا أننا قمنا بتضمين رمز لتخصيص صندوق الدفع وحقل القسيمة والقوائم المنسدلة في صفحة الخروج.

خطوات لتغيير لون خلفية WooCommerce Checkout

في هذا القسم ، سوف نستخدم كود CSS لتخصيص عربة WooCommerce ، والخروج ، وصفحات الحساب لتتناسب مع بقية موقعك.

هذه هي الطريقة التي يتم بها عرض صفحة الخروج: صفحة التفقد

فيما يلي الخطوات التي يجب عليك اتباعها:

قم بتسجيل الدخول إلى موقع WordPress الخاص بك والوصول إلى لوحة التحكم بصفتك المستخدم المسؤول.
من قائمة Dashboard ، انقر فوق Appearance> Customize .
سيؤدي هذا إلى تشغيل لوحة التخصيص على الجانب الأيسر من الشاشة.
انقر فوق ارتباط CSS الإضافي وأضف رمز CSS التالي:

 


/*** MAIN FORMS BACKGROUND COLOR ***/

.woocommerce table.shop_table,

.woocommerce form.checkout_coupon,

.woocommerce form.login,

.woocommerce form.register,

#add_payment_method #payment,

.woocommerce-cart #payment,

.woocommerce-checkout #payment,

#customer_details,

h3#order_review_heading,

form.woocommerce-EditAccountForm.edit-account {

            border: 0 !important; /* you can add a border if you prefer */

            background: #f5f5f5; /* this is the main background color for all forms */

}

/*** FORM AND OTHER PADDING ***/

#customer_details,

form.woocommerce-EditAccountForm.edit-account,

h3#order_review_heading {

            padding: 30px 20px;

}

/*** ADJUST FORM ROUNDED EDGES ***/

#customer_details {

            border-top-left-radius: 5px;

            border-top-right-radius: 5px;

}

.woocommerce-checkout-review-order table.shop_table {

            border-top-left-radius: 0;

            border-top-right-radius: 0;

}

/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/

.woocommerce-account input,

.woocommerce-checkout input,

#order_comments.input-text {

            background-color: #f5f5f5 !important;

            color: black !important; /* not the placeholder, the text color when typed */

            border: 0; /* optional */

}

/*** COUPON FIELD ONLY ***/

.woocommerce-page #coupon_code.input-text { /* if you want your coupon different from other fields */

            background-color: black !important;

            color: blue !important;

            font-size: 16px !important; /* if you don't want the default giant font on the coupon field */

}

/*** PLACEHOLDER TEXT ON ALL WOO PAGES ***/

.woocommerce-page ::-webkit-input-placeholder {

    color: red !important;

}

.woocommerce-page :-ms-input-placeholder {

    color: red !important;

}

.woocommerce-page ::-moz-placeholder {

    color: red !important;

}

.woocommerce-page :-moz-placeholder { /* this isn't the same as above don't delete */

    color: red !important;

}

/*** THIS COMPENSATES FOR SHIP TO DIFF ADDRESS FIELD NOT ALIGNING ***/

h3#ship-to-different-address {

            margin-top: -3px;

}

/*** ALL WOO BUTTONS ***/

.woocommerce button.button.alt,

.woocommerce-page button.button.alt,

.woocommerce a.button,

.woocommerce-page a.button,

.woocommerce button.button,

.woocommerce-page button.button {

            text-transform: capitalize !important;

            background: #ffa500 !important;

            color: #222 !important;

}

.woocommerce button.button.alt:hover,

.woocommerce-page button.button.alt:hover,

.woocommerce a.button.alt:hover,

.woocommerce-page a.button.alt:hover,

.woocommerce a.button:hover,

.woocommerce-page a.button:hover,

.woocommerce button.button:hover,

.woocommerce-page button.button:hover {

            background: #00adad !important;

            color: #fff !important;

}

/*** PAYMENT BOX ON CHECKOUT ***/

#add_payment_method #payment div.payment_box,

.woocommerce-cart #payment div.payment_box,

.woocommerce-checkout #payment div.payment_box {

            background-color: #15bf86;

            color: #fff;

}

#add_payment_method #payment div.payment_box::before,

.woocommerce-cart #payment div.payment_box::before,

.woocommerce-checkout #payment div.payment_box::before {

            border-bottom-color: #15bf86;

}

#add_payment_method #payment ul.payment_methods,

.woocommerce-cart #payment ul.payment_methods,

.woocommerce-checkout #payment ul.payment_methods {

            border-bottom: 0;

}

/*** BORDERS AND TABLES ***/

.woocommerce form .form-row input.input-text,

.woocommerce form .form-row textarea {

            border: 0;

}

.woocommerce table.shop_table td,

#add_payment_method .cart-collaterals .cart_totals tr td,

#add_payment_method .cart-collaterals .cart_totals tr th,

.woocommerce-cart .cart-collaterals .cart_totals tr td,

.woocommerce-cart .cart-collaterals .cart_totals tr th,

.woocommerce-checkout .cart-collaterals .cart_totals tr td,

.woocommerce-checkout .cart-collaterals .cart_totals tr th,

.woocommerce table.shop_table tbody th,

.woocommerce table.shop_table tfoot td,

.woocommerce table.shop_table tfoot th,

.woocommerce-checkout #main-content .cart-subtotal td {

            border-top: 2px solid #fff;

}

.woocommerce table.shop_table_responsive tr:nth-child(2n) td,

.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {

            background: transparent;

}

.woocommerce-checkout #content-area table th,

.woocommerce-checkout #content-area table td {

            padding-left: 20px;

}

.woocommerce form .form-row input.input-text,

.woocommerce form .form-row textarea {

            font-size: 18px;

}

/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/

.woocommerce-message,

.woocommerce-error,

.woocommerce-info {

            background: #b33f62 !important;

}

/*** ORDER NOTES ON CHECKOUT ***/

.woocommerce-checkout .woocommerce form .form-row textarea {

            height: 150px; /* height of optional notes box */

}

/*** STATE DROPDOWN SELECT COLOR ***/

.select2-container--default .select2-results__option--highlighted[aria-selected],

.select2-container--default .select2-results__option--highlighted[data-selected] {

            background: #ffa500;

}

/*** QUANTITY BOX ***/

.woocommerce #content .quantity input.qty,

.woocommerce .quantity input.qty,

.woocommerce-cart table.cart td.actions .coupon .input-text,

.woocommerce-page #content .quantity input.qty,

.woocommerce-page .quantity input.qty {

            color: #fff !important;

            background: #222 !important;

            height: 46px; /* you may need to change this based on your font size */

}

إذا كنت تستخدم سمة مثل Divi ، فانقر فوق خيارات السمة> مربع CSS مخصص لإضافة الرمز.
تذكر أن تضغط على هذه هي النتيجة:

استنتاج

من المهم تخصيص صفحة الدفع ، لأن هذه هي الخطوة الأخيرة قبل أن يقوم العملاء بالشراء. ومع ذلك ، يجب أن تتوافق التغييرات مع تصميم موقعك.

مقالات مماثلة

إعادة توجيه WooCommerce بعد تسجيل الخروج [الدليل النهائي]
إعادة توجيه WooCommerce بعد الخروج: إعادة التوجيه إلى صفحة الشكر المخصصة
كيفية تحرير تفاصيل الفواتير صفحة WooCommerce Checkout
كيفية إعداد الشحن المجاني مع الحد الأدنى من الإنفاق في WooCommerce
الدليل السريع WooCommerce Mobile Checkout Optimization
كيفية إضافة عملة إلى WooCommerce [عملة مخصصة]
كيفية الحصول على تفاصيل الطلب بعد الخروج في WooCommerce
كيفية إخفاء أو تغيير أو إزالة WooCommerce On Sale Badge
كيفية إعداد WooCommerce Checkout Field Placeholder
كيفية تغيير ألوان البريد الإلكتروني لـ WooCommerce
كيفية إضافة فئة التنقل النشط بناءً على URL
كيفية استخدام do_shortcode في WordPress (PHP)
كيفية إضافة بحث إلى صفحة التسوق في WooCommerce
كيفية إنشاء صفحة فئة مخصصة في WooCommerce
كيفية إضافة المنتج إلى عربة التسوق برمجيًا في WooCommerce
كيفية مسح سلة التسوق عند تسجيل الخروج في WooCommerce
كيفية التحقق مما إذا كان المستخدم قد تم تسجيل دخوله إلى WordPress
كيفية إنشاء قسيمة في WooCommerce
كيفية الحصول على عنوان URL الخاص بالدفع في WooCommerce
كيفية تغيير رمز العملة في WooCommerce