From f2e86e4a8ad119457f0a58b21a7821ef2d138bfe Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Thu, 8 May 2025 16:20:37 +0500 Subject: [PATCH] style checkout page --- assets/css/custom.css | 134 ++++++++++++++++++- assets/css/custom.css.map | 2 +- assets/scss/custom.scss | 268 ++++++++++++++++++++++++++++---------- assets/scss/static.scss | 2 +- functions.php | 95 +++++++++----- 5 files changed, 395 insertions(+), 106 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index 6592300..1a37eeb 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -529,7 +529,9 @@ body { .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:hover, .wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus { border-color: var(--wp--preset--color--foreground); } -.wc-block-components-form .has-error input, .wc-block-components-form .has-error select, .wc-block-components-form .has-error textarea { +.wc-block-components-form .has-error input, +.wc-block-components-form .has-error select, +.wc-block-components-form .has-error textarea { border-color: var(--wp--preset--color--foreground); border-width: 2px; } @@ -696,15 +698,38 @@ body { fill: var(--wp--preset--color--foreground) !important; } -.wc-block-components-form .wc-block-components-text-input.has-error label, .wc-block-components-text-input.has-error label { +.wc-block-components-form .wc-block-components-text-input.has-error label, +.wc-block-components-text-input.has-error label { color: var(--wp--preset--color--foreground); } -.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus { +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=number]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=password]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=text]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=url]:focus, +.wc-block-components-text-input input[type=email]:focus, +.wc-block-components-text-input input[type=number]:focus, +.wc-block-components-text-input input[type=password]:focus, +.wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-text-input input[type=text]:focus, +.wc-block-components-text-input input[type=url]:focus { background-color: var(--wp--preset--color--background); } -.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus { +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=number]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=password]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=text]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=url]:focus, +.wc-block-components-text-input input[type=email]:focus, +.wc-block-components-text-input input[type=number]:focus, +.wc-block-components-text-input input[type=password]:focus, +.wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-text-input input[type=text]:focus, +.wc-block-components-text-input input[type=url]:focus { color: var(--wp--preset--color--foreground); } @@ -716,15 +741,112 @@ body { display: none; } } -.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link) { +.woocommerce #respond input#submit, +.woocommerce a.button, +.woocommerce button.button, +.woocommerce input.button, +.wc-block-components-button:not(.is-link) { background-color: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); text-transform: uppercase; transition: all 0.125s ease-in-out; } -.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .wc-block-components-button:not(.is-link):hover { +.woocommerce #respond input#submit:hover, +.woocommerce a.button:hover, +.woocommerce button.button:hover, +.woocommerce input.button:hover, +.wc-block-components-button:not(.is-link):hover { background-color: white; color: black; } +.woocommerce-form-coupon-toggle { + display: none; +} + +.woocommerce-account .wp-block-post-title, +.woocommerce-account main .woocommerce, +.woocommerce-cart .wp-block-post-title, +.woocommerce-cart main .woocommerce, +.woocommerce-checkout .wp-block-post-title, +.woocommerce-checkout main .woocommerce { + max-width: 968px !important; +} + +.woocommerce h3 { + font-family: var(--wp--preset--font-family--eb-garamond); + font-size: 32px; +} + +.woocommerce form .form-row label, +.wc-block-components-form .wc-block-components-text-input label { + margin-left: 0 !important; +} + +.woocommerce .col2-set, +.woocommerce-page .col2-set { + display: flex; + flex-direction: column; +} + +.woocommerce .col2-set .col-1, +.woocommerce-page .col2-set .col-1 { + width: unset; +} + +.woocommerce form .form-row .input-text, +.woocommerce form .form-row select { + background: transparent; + border-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--foreground); + border-radius: 12px; +} + +.select2-container .select2-dropdown, +.select2-container .select2-selection { + background-color: var(--wp--preset--color--foreground); +} + +#add_payment_method #payment div.payment_box, +.woocommerce-cart #payment div.payment_box, +.woocommerce-checkout #payment div.payment_box { + background: white; +} + +.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated label { + color: black; +} + +#add_payment_method #payment div.payment_box::before, +.woocommerce-cart #payment div.payment_box::before, +.woocommerce-checkout #payment div.payment_box::before { + border: 1em solid white; + border-top-color: white; + border-right-color: white; + border-left-color: white; + border-right-color: transparent; + border-left-color: transparent; + border-top-color: transparent; +} + +.payment_box.payment_method_stripe fieldset { + border: none; +} + +.woocommerce form .form-row.woocommerce-invalid label { + color: var(--wp--preset--color--foreground) !important; +} + +.woocommerce table.shop_table { + border-color: var(--wp--preset--color--foreground); +} + +.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { + border-color: var(--wp--preset--color--foreground); +} + +.woocommerce table.shop_table td { + border-color: var(--wp--preset--color--foreground); +} + /*# sourceMappingURL=custom.css.map */ diff --git a/assets/css/custom.css.map b/assets/css/custom.css.map index 3f4511e..3571f41 100644 --- a/assets/css/custom.css.map +++ b/assets/css/custom.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"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","file":"custom.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"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","file":"custom.css"} \ No newline at end of file diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index b927db2..0f6e0a6 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -3,16 +3,12 @@ html { } body { - background: radial-gradient( - circle at right 15%, - rgba(142, 154, 236, 0.4) 0%, - rgba(142, 154, 236, 0) 25% - ), - radial-gradient( - circle at left 85%, - rgba(142, 154, 236, 0.4) 0%, - rgba(142, 154, 236, 0) 25% - ); + background: radial-gradient(circle at right 15%, + rgba(142, 154, 236, 0.4) 0%, + rgba(142, 154, 236, 0) 25%), + radial-gradient(circle at left 85%, + rgba(142, 154, 236, 0.4) 0%, + rgba(142, 154, 236, 0) 25%); min-height: 100vh; } @@ -20,11 +16,12 @@ body { .woocommerce, .wc-block-components-form, .woocommerce-page { - input[type=email], - input[type=number], - input[type=password], - input[type=tel], - input[type=text], + + input[type=email], + input[type=number], + input[type=password], + input[type=tel], + input[type=text], input[type=url], input[type=search], input[type=date], @@ -36,23 +33,23 @@ body { border: 1px solid var(--wp--preset--color--foreground); border-radius: 12px; transition: border-color 0.3s, box-shadow 0.3s; - + &::placeholder { color: var(--wp--preset--color--foreground); opacity: 0.7; } - + &:hover { border-color: var(--wp--preset--color--foreground); } - + &:focus { outline: none; border-color: var(--wp--preset--color--foreground); box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); } } - + // Special styling for select fields select { appearance: none; @@ -60,19 +57,19 @@ body { background-repeat: no-repeat; background-position: right 1em top 50%; padding-right: 2.5em; - + option { background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); } } - + // Textarea specific styling textarea { min-height: 100px; resize: vertical; } - + // Checkbox and radio styling input[type=checkbox], input[type=radio] { @@ -83,11 +80,11 @@ body { background: transparent; border: 1px solid var(--wp--preset--color--foreground); cursor: pointer; - + &:checked { background-color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--foreground); - + &::after { content: ''; position: absolute; @@ -100,30 +97,31 @@ body { border-radius: 1px; } } - + &:focus { outline: none; box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); } } - + input[type=radio] { border-radius: 50%; - + &:checked::after { border-radius: 50%; } } - + // Error state styling .woocommerce-invalid, .woocommerce-invalid-required-field, .has-error { - input[type=email], - input[type=number], - input[type=password], - input[type=tel], - input[type=text], + + input[type=email], + input[type=number], + input[type=password], + input[type=tel], + input[type=text], input[type=url], input[type=search], input[type=date], @@ -131,13 +129,13 @@ body { select { border-color: var(--wp--preset--color--foreground); border-width: 2px; - + &:focus { box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); } } } - + .woocommerce-error { background-color: rgba(250, 247, 239, 0.1); border-left: 3px solid var(--wp--preset--color--foreground); @@ -145,25 +143,25 @@ body { padding: 1em 1.5em; margin-bottom: 2em; border-radius: 4px; - + li { list-style: none; margin-left: 0; } } - + // Validation error messages .woocommerce-error, .woocommerce-message { margin: 0 0 2em; padding: 1em 1.5em; border-radius: 4px; - + &::before { margin-right: 0.5em; } } - + span.required { color: var(--wp--preset--color--foreground); opacity: 0.8; @@ -172,13 +170,15 @@ body { // Specific class for WooCommerce components .wc-block-components-form { + .wc-block-components-text-input, .wc-block-components-select { - input[type=email], - input[type=number], - input[type=password], - input[type=tel], - input[type=text], + + input[type=email], + input[type=number], + input[type=password], + input[type=tel], + input[type=text], input[type=url], select { padding: 1em; @@ -186,16 +186,16 @@ body { background: transparent; border: 1px solid var(--wp--preset--color--foreground); border-radius: 12px; - + &::placeholder { color: var(--wp--preset--color--foreground); opacity: 0.7; } - + &:hover { border-color: var(--wp--preset--color--foreground); } - + &:focus { outline: none; border-color: var(--wp--preset--color--foreground); @@ -203,7 +203,7 @@ body { } } } - + // Style the combobox .wc-block-components-combobox .wc-block-components-combobox-control { input.components-combobox-control__input { @@ -212,20 +212,24 @@ body { background: transparent; border: 1px solid var(--wp--preset--color--foreground); border-radius: 12px; - - &:hover, &:focus { + + &:hover, + &:focus { border-color: var(--wp--preset--color--foreground); } } } - + // Error states for WC blocks .has-error { - input, select, textarea { + + input, + select, + textarea { border-color: var(--wp--preset--color--foreground); border-width: 2px; } - + .wc-block-components-validation-error { color: var(--wp--preset--color--foreground); font-size: 0.875em; @@ -266,24 +270,24 @@ body { input.input-text { border-color: var(--wp--preset--color--foreground); border-width: 2px; - + &:focus { box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); } } } - + &.woocommerce-invalid { input.input-text { border-color: var(--wp--preset--color--foreground); border-width: 2px; - + &:focus { box-shadow: 0 0 0 1px var(--wp--preset--color--foreground); } } } - + .woocommerce-input-wrapper { .description { background: rgba(250, 247, 239, 0.1); @@ -309,17 +313,17 @@ body { color: var(--wp--preset--color--foreground); transition: all 0.25s ease; font-weight: normal; - + &:hover { background-color: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); text-decoration: none; } - + &.alt { background-color: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); - + &:hover { background-color: transparent; color: var(--wp--preset--color--foreground); @@ -337,12 +341,12 @@ body { color: var(--wp--preset--color--foreground); padding: 1em 1.5em; margin-bottom: 2em; - + a { color: var(--wp--preset--color--foreground); font-weight: 600; text-decoration: underline; - + &:hover { text-decoration: none; } @@ -353,7 +357,7 @@ body { .wc-block-components-notice-banner, .woocommerce-error { color: var(--wp--preset--color--foreground); - + &.is-error, &.is-info, &.is-success, @@ -399,15 +403,38 @@ body { fill: var(--wp--preset--color--foreground) !important; } -.wc-block-components-form .wc-block-components-text-input.has-error label, .wc-block-components-text-input.has-error label { +.wc-block-components-form .wc-block-components-text-input.has-error label, +.wc-block-components-text-input.has-error label { color: var(--wp--preset--color--foreground); } -.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus { +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=number]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=password]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=text]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=url]:focus, +.wc-block-components-text-input input[type=email]:focus, +.wc-block-components-text-input input[type=number]:focus, +.wc-block-components-text-input input[type=password]:focus, +.wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-text-input input[type=text]:focus, +.wc-block-components-text-input input[type=url]:focus { background-color: var(--wp--preset--color--background); } -.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, .wc-block-components-form .wc-block-components-text-input input[type=number]:focus, .wc-block-components-form .wc-block-components-text-input input[type=password]:focus, .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-form .wc-block-components-text-input input[type=text]:focus, .wc-block-components-form .wc-block-components-text-input input[type=url]:focus, .wc-block-components-text-input input[type=email]:focus, .wc-block-components-text-input input[type=number]:focus, .wc-block-components-text-input input[type=password]:focus, .wc-block-components-text-input input[type=tel]:focus, .wc-block-components-text-input input[type=text]:focus, .wc-block-components-text-input input[type=url]:focus { +.wc-block-components-form .wc-block-components-text-input input[type=email]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=number]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=password]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=text]:focus, +.wc-block-components-form .wc-block-components-text-input input[type=url]:focus, +.wc-block-components-text-input input[type=email]:focus, +.wc-block-components-text-input input[type=number]:focus, +.wc-block-components-text-input input[type=password]:focus, +.wc-block-components-text-input input[type=tel]:focus, +.wc-block-components-text-input input[type=text]:focus, +.wc-block-components-text-input input[type=url]:focus { color: var(--wp--preset--color--foreground); } @@ -415,18 +442,125 @@ body { .wp-block-woocommerce-checkout.alignwide.wc-block-checkout { padding-inline: 3rem; } + [data-block-name="woocommerce/page-content-wrapper"] { display: none; } } -.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button:not(.is-link) { +.woocommerce #respond input#submit, +.woocommerce a.button, +.woocommerce button.button, +.woocommerce input.button, +.wc-block-components-button:not(.is-link) { background-color: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); text-transform: uppercase; transition: all 0.125s ease-in-out; + &:hover { background-color: white; color: black; } +} + +// .d-none { +// display: none !important; +// } + +// .wc-block-components-express-payment--checkout, +// .wc-block-components-express-payment__title-container, +// .wc-block-components-express-payment__content, +// .wc-block-components-express-payment-continue-rule.wc-block-components-express-payment-continue-rule--checkout { +// display: none !important; +// } + +// we dont have any coupons on the site +.woocommerce-form-coupon-toggle { + display: none; +} + +.woocommerce-account .wp-block-post-title, +.woocommerce-account main .woocommerce, +.woocommerce-cart .wp-block-post-title, +.woocommerce-cart main .woocommerce, +.woocommerce-checkout .wp-block-post-title, +.woocommerce-checkout main .woocommerce { + max-width: 968px !important; +} + +.woocommerce { + h3 { + font-family: var(--wp--preset--font-family--eb-garamond); + font-size: 32px; + } +} + +.woocommerce form .form-row label, +.wc-block-components-form .wc-block-components-text-input label { + margin-left: 0 !important; +} + +.woocommerce .col2-set, +.woocommerce-page .col2-set { + display: flex; + flex-direction: column; +} + +.woocommerce .col2-set .col-1, +.woocommerce-page .col2-set .col-1 { + width: unset; +} + +.woocommerce form .form-row .input-text, +.woocommerce form .form-row select { + background: transparent; + border-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--foreground); + border-radius: 12px; +} + +.select2-container .select2-dropdown, +.select2-container .select2-selection { + background-color: var(--wp--preset--color--foreground); +} + +#add_payment_method #payment div.payment_box, +.woocommerce-cart #payment div.payment_box, +.woocommerce-checkout #payment div.payment_box { + background: white; +} + +.form-row.woocommerce-SavedPaymentMethods-saveNew.woocommerce-validated label { + color: black; +} +#add_payment_method #payment div.payment_box::before, +.woocommerce-cart #payment div.payment_box::before, +.woocommerce-checkout #payment div.payment_box::before { + border: 1em solid white; + border-top-color: white; + border-right-color: white; + border-left-color: white; + border-right-color: transparent; + border-left-color: transparent; + border-top-color: transparent; +} + +.payment_box.payment_method_stripe fieldset { + border: none; +} +.woocommerce form .form-row.woocommerce-invalid label { + color: var(--wp--preset--color--foreground) !important; +} + +.woocommerce table.shop_table { + border-color: var(--wp--preset--color--foreground); +} + +.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot td, .woocommerce table.shop_table tfoot th { + border-color: var(--wp--preset--color--foreground); +} + +.woocommerce table.shop_table td { + border-color: var(--wp--preset--color--foreground); } \ No newline at end of file diff --git a/assets/scss/static.scss b/assets/scss/static.scss index 2dc8dc0..8f2b515 100644 --- a/assets/scss/static.scss +++ b/assets/scss/static.scss @@ -649,4 +649,4 @@ footer.somos-infinitos-footer { } } } -} +} \ No newline at end of file diff --git a/functions.php b/functions.php index 1b92b33..2cdef83 100644 --- a/functions.php +++ b/functions.php @@ -10,7 +10,8 @@ add_action('after_setup_theme', 'disable_default_patterns'); /** * Enqueue custom CSS file in block editor only */ -function somos_infinitos_block_editor_styles() { +function somos_infinitos_block_editor_styles() +{ // Only load in block editor, not in classic editor if (!is_classic_editor_active()) { wp_enqueue_style( @@ -26,12 +27,13 @@ add_action('enqueue_block_editor_assets', 'somos_infinitos_block_editor_styles') /** * Check if classic editor is active */ -function is_classic_editor_active() { +function is_classic_editor_active() +{ // Check if the classic editor plugin is active if (class_exists('Classic_Editor')) { return true; } - + // Check if we're on the classic editor screen if (function_exists('get_current_screen')) { $screen = get_current_screen(); @@ -39,14 +41,15 @@ function is_classic_editor_active() { return true; } } - + return false; } /** * Enqueue custom CSS file on the frontend */ -function somos_infinitos_frontend_styles() { +function somos_infinitos_frontend_styles() +{ // Don't load in admin if (!is_admin()) { wp_enqueue_style( @@ -85,33 +88,34 @@ add_filter('upload_mimes', 'cc_mime_types'); /* Remove default CSS variables that come with Wordpress https://github.com/WordPress/gutenberg/issues/56180#issuecomment-1819222376 */ -function custom_wp_theme_json_default( $theme_json ) { - $new_data = array( - 'version' => 2, - 'settings' => array( - 'color' => array( - 'palette' => array(), - 'gradients' => array(), - ), - 'shadow' => array( - 'presets' => array(), - ), - 'typography' => array( - 'fontSizes' => array(), - ), - // 'dimensions' => array( - // 'aspectRatios' => array(), - // ), - // 'spacing' => array( - // 'spacingScale' => array( - // 'steps' => 0, - // ), - // ), - ), - ); - return $theme_json->update_with( $new_data ); +function custom_wp_theme_json_default($theme_json) +{ + $new_data = array( + 'version' => 2, + 'settings' => array( + 'color' => array( + 'palette' => array(), + 'gradients' => array(), + ), + 'shadow' => array( + 'presets' => array(), + ), + 'typography' => array( + 'fontSizes' => array(), + ), + // 'dimensions' => array( + // 'aspectRatios' => array(), + // ), + // 'spacing' => array( + // 'spacingScale' => array( + // 'steps' => 0, + // ), + // ), + ), + ); + return $theme_json->update_with($new_data); } -add_filter( 'wp_theme_json_data_default', 'custom_wp_theme_json_default' ); +add_filter('wp_theme_json_data_default', 'custom_wp_theme_json_default'); // remove default woocommerce fonts add_filter('wp_theme_json_data_theme', 'disable_inter_font', 100); @@ -152,3 +156,32 @@ function disable_inter_font($theme_json) } return $theme_json; } + + +// Shortcode checkout +delete_transient('wc_stripe_appearance'); + +// Block checkout +delete_transient('wc_stripe_blocks_appearance'); + +add_filter('wc_stripe_upe_params', function ($stripe_params) { + + // Affects block checkout + $stripe_params['blocksAppearance'] = (object) ['theme' => 'night']; + + // Affects shortcode checkout + $stripe_params['appearance'] = (object) ['theme' => 'flat']; + + return $stripe_params; +}); + +add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) { + $stripe_params['appearance'] = (object) [ + 'rules' => (object) [ + '.Label' => (object) [ + 'color' => 'black' + ] + ], + ]; + return $stripe_params; +} ); \ No newline at end of file