FoxyTeam

CSS for Checkout page

Oct 22nd, 2025
569
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.32 KB | Source Code | 0 0
  1. /* ===============================
  2.    ЕКОНТ – Добавяне на лого при доставка
  3.    =============================== */
  4. .checkout-skin .woocommerce ul#shipping_method li label[for*="office-econt"],
  5. .checkout-skin .woocommerce ul#shipping_method li label[for*="econt"] {
  6.   position: relative;
  7.   padding-left: 50px; /* Оставя място за логото вляво */
  8.   min-height: 36px;
  9.   display: flex;
  10.   align-items: center;
  11. }
  12.  
  13. /* Самото лого на Еконт */
  14. .checkout-skin .woocommerce ul#shipping_method li label[for*="office-econt"]::before,
  15. .checkout-skin .woocommerce ul#shipping_method li label[for*="econt"]::before {
  16.   content: "";
  17.   position: absolute;
  18.   left: 0;
  19.   top: 50%;
  20.   transform: translateY(-50%);
  21.   width: 42px; /* ширина на логото */
  22.   height: 20px; /* височина на логото */
  23.   background: url("https://versiontwo.kenzoshoes.eu/wp-content/uploads/2025/10/econt-logo.png") no-repeat center;
  24.   background-size: contain;
  25.   opacity: 0.9;
  26. }
  27.  
  28. /* ===============================
  29.    Woo Checkout clean Divi skin
  30.    Основни стилове за форма на поръчка
  31.    =============================== */
  32.  
  33. /* Етикети на полетата */
  34. .checkout-skin .woocommerce form .form-row label {
  35.   font-size: 14px;
  36.   font-weight: 600;
  37.   margin: 0 0 6px;
  38.   color: #111318;
  39. }
  40.  
  41. /* Основни полета (input, select, textarea) */
  42. .checkout-skin .woocommerce input.input-text,
  43. .checkout-skin .woocommerce textarea,
  44. .checkout-skin .woocommerce select,
  45. .checkout-skin .select2-container .select2-selection--single {
  46.   background: #ffffff;
  47.   border: 1px solid #e7e7ee !important;
  48.   border-radius: 12px !important;
  49.   min-height: 56px;
  50.   padding: 14px 16px;
  51.   box-shadow: none !important;
  52.   color: #111318;
  53. }
  54. .checkout-skin .woocommerce textarea {
  55.   min-height: 120px; /* височина на бележките */
  56.   resize: vertical;
  57.   line-height: 1.5;
  58. }
  59. .checkout-skin .woocommerce input::placeholder,
  60. .checkout-skin .woocommerce textarea::placeholder {
  61.   color: #6b7280; /* цвят на placeholder текста */
  62. }
  63.  
  64. /* Ефект при фокус върху поле */
  65. .checkout-skin .woocommerce input.input-text:focus,
  66. .checkout-skin .woocommerce textarea:focus,
  67. .checkout-skin .woocommerce select:focus,
  68. .checkout-skin .select2-container--default .select2-selection--single:focus {
  69.   border-color: #ff7f66 !important; /* основен акцентен цвят */
  70.   outline: 0;
  71.   box-shadow: 0 0 0 3px rgba(255, 127, 102, 0.15) !important;
  72. }
  73.  
  74. /* Държави / Области – селект */
  75. .checkout-skin .select2-container .select2-selection--single {
  76.   display: flex;
  77.   align-items: center;
  78.   min-height: 56px;
  79.   padding: 0 12px;
  80.   border-radius: 12px;
  81. }
  82. .checkout-skin .select2-container .select2-selection__rendered {
  83.   line-height: 56px;
  84.   padding-left: 2px;
  85.   color: #111318;
  86. }
  87. .checkout-skin .select2-container .select2-selection__arrow {
  88.   height: 56px;
  89.   right: 10px;
  90. }
  91.  
  92. /* Заглавия на секциите (Billing, Shipping, т.н.) */
  93. .checkout-skin .woocommerce h3 {
  94.   font-size: 22px;
  95.   font-weight: 800;
  96.   margin: 6px 0 14px;
  97. }
  98.  
  99. /* Разстояния между редовете */
  100. .checkout-skin .woocommerce form.checkout .form-row {
  101.   margin: 0 0 14px;
  102. }
  103.  
  104. /* Карта (каре) за основните секции */
  105. .checkout-skin .woocommerce-billing-fields,
  106. .checkout-skin .woocommerce-shipping-fields,
  107. .checkout-skin .woocommerce-additional-fields {
  108.   background: #ffffff;
  109.   border: 1px solid #e7e7ee;
  110.   border-radius: 16px;
  111.   padding: 18px;
  112.   margin-bottom: 18px;
  113. }
  114.  
  115. /* Преглед на поръчката (Your order) */
  116. .checkout-skin #order_review,
  117. .checkout-skin .woocommerce-checkout-review-order {
  118.   background: #ffffff;
  119.   border: 1px solid #e7e7ee;
  120.   border-radius: 16px;
  121.   box-shadow: 0 8px 28px rgba(16, 24, 40, 0.06);
  122.   padding: 6px 6px 0;
  123. }
  124.  
  125. /* Таблици за продуктите */
  126. .checkout-skin table.shop_table {
  127.   border: 0 !important;
  128.   margin: 0 !important;
  129. }
  130. .checkout-skin table.shop_table th,
  131. .checkout-skin table.shop_table td {
  132.   border: 0 !important;
  133.   padding: 14px 16px !important;
  134.   font-size: 14px;
  135. }
  136. .checkout-skin table.shop_table thead th {
  137.   font-weight: 700;
  138.   color: #111318;
  139. }
  140. .checkout-skin table.shop_table tfoot th {
  141.   font-weight: 700;
  142. }
  143. .checkout-skin .woocommerce-checkout-review-order-table tfoot tr.order-total th,
  144. .checkout-skin .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  145.   font-size: 16px;
  146.   font-weight: 800;
  147.   border-top: 1px solid #e7e7ee !important;
  148. }
  149.  
  150. /* Текст за доставка */
  151. .checkout-skin .woocommerce-checkout-review-order-table .shipping td {
  152.   color: #6b7280;
  153. }
  154.  
  155. /* Платежна секция */
  156. .checkout-skin #payment {
  157.   background: transparent;
  158.   border-radius: 16px;
  159.   margin: 10px 6px 16px;
  160.   border: 1px solid #e7e7ee;
  161.   padding: 6px 6px 0;
  162. }
  163. .checkout-skin #payment ul.payment_methods {
  164.   padding: 10px 12px !important;
  165.   border-bottom: 1px solid #e7e7ee;
  166.   margin: 0 !important;
  167. }
  168. .checkout-skin #payment div.payment_box {
  169.   background: #fafafa;
  170.   color: #111;
  171.   border: 1px solid #e7e7ee;
  172.   border-radius: 12px;
  173.   padding: 14px 16px;
  174.   margin: 12px;
  175. }
  176. .checkout-skin #payment div.payment_box:before {
  177.   display: none;
  178. }
  179.  
  180. /* Чекбоксове и радио бутони */
  181. .checkout-skin input[type="checkbox"],
  182. .checkout-skin input[type="radio"] {
  183.   accent-color: #ff7f66; /* цвят на отметките */
  184. }
  185. .checkout-skin .woocommerce-terms-and-conditions-wrapper {
  186.   padding: 10px 12px 16px;
  187. }
  188. .checkout-skin .woocommerce-privacy-policy-text {
  189.   color: #6b7280;
  190.   font-size: 13px;
  191.   line-height: 1.5;
  192. }
  193.  
  194. /* Известие за купон */
  195. .checkout-skin p.woocommerce-info {
  196.   border: 1px dashed #e7e7ee;
  197.   border-radius: 12px;
  198. }
  199. .checkout-skin p.woocommerce-info a {
  200.   color: #ff7f66;
  201.   font-weight: 700;
  202. }
  203.  
  204. /* Бутон "Поръчване" */
  205. .checkout-skin #place_order,
  206. .checkout-skin .woocommerce #place_order.button {
  207.   background: #ff7f66 !important;
  208.   color: #fff !important;
  209.   border: 0 !important;
  210.   padding: 10px 22px !important;
  211.   border-radius: 9999px !important; /* кръгъл бутон */
  212.   font-weight: 800 !important;
  213.   letter-spacing: 0.02em;
  214.   transition: transform 0.06s ease, filter 0.2s ease;
  215. }
  216. .checkout-skin #place_order:hover {
  217.   filter: brightness(0.95);
  218. }
  219. .checkout-skin #place_order:active {
  220.   transform: translateY(1px);
  221. }
  222.  
  223. /* Съобщения за грешки / успех */
  224. .checkout-skin .woocommerce-error,
  225. .checkout-skin .woocommerce-message,
  226. .checkout-skin .woocommerce-info {
  227.   border-radius: 12px;
  228. }
  229.  
  230. /* Мобилна оптимизация */
  231. @media (max-width: 980px) {
  232.   .checkout-skin .woocommerce-billing-fields,
  233.   .checkout-skin .woocommerce-additional-fields {
  234.     padding: 14px;
  235.   }
  236.   .checkout-skin table.shop_table th,
  237.   .checkout-skin table.shop_table td {
  238.     padding: 12px 12px !important;
  239.   }
  240. }
  241.  
  242. /* Малки подобрения */
  243. .checkout-skin .woocommerce form .form-row .required {
  244.   color: #ef4444; /* червена звездичка */
  245. }
  246. .checkout-skin .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper label {
  247.   font-weight: 600;
  248. }
  249.  
  250. /* Премества “Изпращане до друг адрес” под секцията за фактуриране */
  251. .checkout-skin #customer_details {
  252.   display: flex;
  253.   flex-direction: column;
  254. }
  255. .checkout-skin #customer_details .col-1,
  256. .checkout-skin #customer_details .col-2 {
  257.   width: 100%;
  258. }
  259. .checkout-skin #customer_details .col-2 {
  260.   order: 2;
  261. }
  262. .checkout-skin .woocommerce-additional-fields {
  263.   order: 3;
  264. }
  265.  
  266. /* ===============================
  267.    Секция за купон
  268.    =============================== */
  269. .checkout-skin .woocommerce form.checkout_coupon {
  270.   background:#fff;
  271.   border:1px solid #e7e7ee;
  272.   border-radius:16px;
  273.   padding:18px;
  274.   margin-bottom:18px;
  275. }
  276.  
  277. /* Поле за купон */
  278. .checkout-skin .woocommerce form.checkout_coupon input.input-text{
  279.   min-height:56px;
  280.   padding:14px 16px;
  281.   border:1px solid #e7e7ee !important;
  282.   border-radius:12px !important;
  283.   box-shadow:none !important;
  284. }
  285.  
  286. /* Бутон "Apply coupon" – същия стил като Place Order */
  287. .checkout-skin .woocommerce form.checkout_coupon button.button,
  288. .checkout-skin .woocommerce form.checkout_coupon button[name="apply_coupon"],
  289. .checkout-skin .woocommerce .checkout_coupon button.button {
  290.   background:#ff7f66 !important;
  291.   color:#fff !important;
  292.   border:0 !important;
  293.   padding:10px 20px !important;
  294.   border-radius:9999px !important;
  295.   font-weight:800 !important;
  296.   letter-spacing:.02em;
  297.   transition:transform .06s ease, filter .2s ease;
  298. }
  299.  
  300. /* Hover и натискане на бутона за купон */
  301. .checkout-skin .woocommerce form.checkout_coupon button.button:hover{
  302.   filter:brightness(.95);
  303. }
  304. .checkout-skin .woocommerce form.checkout_coupon button.button:active{
  305.   transform:translateY(1px);
  306. }
  307.  
  308. /* Ако Divi бутоните се намесват – изключваме техните стилове */
  309. .checkout-skin .woocommerce form.checkout_coupon .et_pb_button {
  310.   all:unset; /* изчиства Divi стиловете */
  311.   display:inline-block;
  312. }
  313.  
Tags: CSS
Advertisement
Add Comment
Please, Sign In to add comment