document.addEventListener("DOMContentLoaded", function () {
/* =====================================
CHECKOUT BACKGROUND
===================================== */
document.body.style.backgroundColor = "#f3f5f9";
/* =====================================
HIDE LEFT CHECKOUT NAVIGATION
===================================== */
const leftNav = document.querySelectorAll(
"nav, .wc-block-components-checkout-step__heading"
);
/* শুধু পুরোনো sidebar থাকলে */
document.querySelectorAll(
".wc-block-checkout__sidebar, .checkout-sidebar"
).forEach(function (el) {
el.style.display = "none";
});
/* =====================================
MAIN CHECKOUT CONTAINER
===================================== */
const main = document.querySelector(
".wp-block-woocommerce-checkout, " +
".wc-block-checkout, " +
".woocommerce-checkout"
);
if (main) {
main.style.maxWidth = "1460px";
main.style.margin = "0 auto";
main.style.padding = "10px 15px";
}
/* =====================================
BILLING DETAILS BOX
===================================== */
const billing = document.querySelector(
".wc-block-components-checkout-step--billing, " +
".wc-block-checkout__billing"
);
if (billing) {
billing.style.background = "#ffffff";
billing.style.borderRadius = "18px";
billing.style.padding = "20px 24px";
billing.style.marginBottom = "18px";
billing.style.boxSizing = "border-box";
billing.style.border = "none";
}
/* =====================================
CHECKOUT STEPS
===================================== */
document.querySelectorAll(
".wc-block-components-checkout-step"
).forEach(function (box) {
box.style.background = "#ffffff";
box.style.borderRadius = "18px";
box.style.padding = "20px 24px";
box.style.marginBottom = "18px";
box.style.boxSizing = "border-box";
});
/* =====================================
HEADINGS
===================================== */
document.querySelectorAll(
".wc-block-components-checkout-step__heading"
).forEach(function (heading) {
heading.style.fontSize = "18px";
heading.style.fontWeight = "500";
heading.style.color = "#172033";
heading.style.marginBottom = "18px";
});
/* =====================================
HEADING ORANGE LINE
===================================== */
document.querySelectorAll(
".wc-block-components-checkout-step__heading"
).forEach(function (heading) {
if (!heading.querySelector(".custom-orange-line")) {
const line = document.createElement("span");
line.className = "custom-orange-line";
line.style.display = "inline-block";
line.style.width = "3px";
line.style.height = "20px";
line.style.background = "#ff7900";
line.style.marginRight = "8px";
line.style.verticalAlign = "middle";
heading.prepend(line);
}
});
/* =====================================
INPUT FIELDS
===================================== */
document.querySelectorAll(
".wc-block-components-text-input input, " +
".wc-block-components-combobox input, " +
".wc-block-components-textarea textarea"
).forEach(function (input) {
input.style.border = "1px solid #b8b8b8";
input.style.borderRadius = "8px";
input.style.background = "#fff";
input.style.fontSize = "14px";
input.style.boxSizing = "border-box";
});
/* =====================================
FIELD LABEL
===================================== */
document.querySelectorAll(
".wc-block-components-text-input label, " +
".wc-block-components-combobox label"
).forEach(function (label) {
label.style.color = "#172033";
label.style.fontSize = "14px";
});
/* =====================================
SELECT / DROPDOWN
===================================== */
document.querySelectorAll(
".wc-block-components-select"
).forEach(function (select) {
select.style.borderRadius = "8px";
select.style.borderColor = "#b8b8b8";
select.style.background = "#fff";
});
/* =====================================
PAYMENT BOX
===================================== */
document.querySelectorAll(
".wc-block-components-payment-methods"
).forEach(function (payment) {
payment.style.background = "#fff";
payment.style.borderRadius = "18px";
payment.style.padding = "18px 24px";
payment.style.boxSizing = "border-box";
});
/* =====================================
ORDER SUMMARY
===================================== */
document.querySelectorAll(
".wc-block-components-order-summary"
).forEach(function (summary) {
summary.style.background = "#fff";
summary.style.borderRadius = "18px";
summary.style.padding = "18px 24px";
summary.style.boxSizing = "border-box";
});
/* =====================================
BUTTON
===================================== */
document.querySelectorAll(
".wc-block-components-button"
).forEach(function (button) {
button.style.borderRadius = "8px";
button.style.background = "#ff7900";
button.style.color = "#fff";
button.style.border = "none";
});
/* =====================================
MOBILE
===================================== */
function mobileCheckout() {
document.querySelectorAll(
".wc-block-components-checkout-step, " +
".wc-block-components-payment-methods, " +
".wc-block-components-order-summary"
).forEach(function (box) {
if (window.innerWidth <= 767) {
box.style.padding = "15px";
box.style.borderRadius = "12px";
} else {
box.style.padding = "20px 24px";
box.style.borderRadius = "18px";
}
});
}
mobileCheckout();
window.addEventListener(
"resize",
mobileCheckout
);
/* =====================================
WOOCOMMERCE UPDATE
===================================== */
const observer = new MutationObserver(function () {
setTimeout(function () {
mobileCheckout();
}, 300);
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
