تأطير بوابة الدفع في متجر يوكان
بوابة الدفع عند الاستلام (COD - Cash on Delivery) هي طريقة دفع تتيح للزبائن إتمام عملية الشراء ودفع المبلغ النقدي عند استلام المنتجات. وتكون هذه الطريقة شائعة في التجارة الإلكترونية، حيث يمكن للعملاء طلب المنتجات والدفع عند استلامها دون الحاجة إلى استخدام بطاقات الائتمان أو أي وسيلة دفع إلكترونية أخرى.
يمكنك وضع إطار على بوابة الدفع لتعزيز مظهرها أو تحديدها بشكل أفضل على متجرك الالكتروني. هناك عدة طرق للقيام بذلك، وأحد الأساليب الشائعة هي استخدام كود (CSS) لتحقيق هذا الهدف.
فيما يلي مثال يوضح كيفية إضافة إطار حول بوابة الدفع باستخدام CSS:
<style>.checkout {border: 5px solid #000000;border-style: dotted;border-color: #0584ad ;border-radius: 20px;margin: 0 0 10px;padding: 0 7.5px;box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px;}.single-product .checkout-section .checkout .main .checkout-form .checkout-select select, .single-product .checkout-section .checkout .main .checkout-form input[type="text"], .single-product .checkout-section .checkout .main .checkout-form input[type="email"], .single-product .checkout-section .checkout .main .checkout-form input[type="url"], .single-product .checkout-section .checkout .main .checkout-form input[type="search"], .single-product .checkout-section .checkout .main .checkout-form input[type="number"], .single-product .checkout-section .checkout .main .checkout-form input[type="tel"], .single-product .checkout-section .checkout .main .checkout-form input[type="password"], .single-product .checkout-section .checkout .main .checkout-form textarea {border-color: #1DB6EA;border-radius: 15px;}.checkout-heading {animation: zoom 3s infinite linear;text-align: center;font-weight: bold!important;}[dir] .checkout-section .checkout .main .checkout-form .checkout-groups {margin: 0 -7.5px;}.checkout-form {padding: 30px;border-radius: 7px;}[dir] input[type=email], [dir] input[type=number], [dir] input[type=password], [dir] input[type=search], [dir] input[type=tel], [dir] input[type=text], [dir] input[type=url], [dir] textarea {<!--Made with ♥ by 3adilxp -->border-radius: 12px;border: 2px solid;padding: 10px 15px;background-color: #ffffff;}</style>
يمكنك تخصيص هذا الكود وتعديل القيم المستخدمة وفقًا لتفضيلاتك وتصميم موقعك الحالي. قم بتضمينه في صفحة الويب الخاصة بك واحتفظ بالتعديلات التي تحتاجها لتحقيق المظهر المطلوب.
يمكنك أيضًا استكشاف أساليب أخرى لتخصيص الإطار، مثل تغيير ألوان الخلفية والحدود، وإضافة ظلال أو تأثيرات أخرى باستخدام خصائص CSS المتنوعة.