```css
/* CartFlows Custom Checkout CSS */
:root {
--primary-color: #d4af37; /* Gold */
--primary-dark: #b8860b; /* Dark Gold */
--secondary-color: #8b4513; /* Brown */
--text-dark: #333333;
--text-light: #ffffff;
--bg-light: #f9f5ea;
--bg-dark: #222222;
--border-radius: 6px;
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
/* Main Checkout Container */
.cartflows-checkout-main-wrapper {
font-family: "Poppins", sans-serif;
color: var(--text-dark);
line-height: 1.6;
}
.wcf-embed-checkout-form .woocommerce h3,
.wcf-embed-checkout-form .woocommerce h3 span,
.wcf-embed-checkout-form .woocommerce-checkout #order_review_heading {
font-family: "Playfair Display", serif;
font-weight: 700;
margin-bottom: 1rem;
color: var(--secondary-color);
}
/* Checkout Header with Steps */
.main-header--wrapper {
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.main-header--content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
max-width: 1200px;
margin: 0 auto;
}
/* Checkout Steps Addition */
.checkout-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
.step {
display: flex;
align-items: center;
opacity: 0.5;
transition: var(--transition);
}
.step.active {
opacity: 1;
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background-color: var(--secondary-color);
color: var(--text-light);
border-radius: 50%;
margin-right: 10px;
font-weight: 600;
}
.step.active .step-number {
background-color: var(--primary-color);
color: var(--text-dark);
}
.step-name {
font-weight: 500;
}
/* Main Container Styling */
.main-container--wrapper {
background-color: var(--bg-light);
padding: 40px 0;
}
/* Two Column Layout */
.checkout-form--wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.wcf-instant-checkout-wrapper {
display: flex;
flex-direction: column;
}
.wcf-customer-info-main-wrapper {
display: flex;
flex-direction: row;
gap: 30px;
}
.wcf-ic-layout-left-column {
flex: 1;
background-color: #ffffff;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
}
.wcf-ic-layout-right-column {
width: 350px;
position: sticky;
top: 100px;
}
/* Product Selection First */
.wcf-product-option-wrap {
margin-bottom: 30px;
padding: 30px;
border-radius: var(--border-radius);
background-color: #ffffff;
}
/* Style the product options */
#your_products_heading {
font-family: "Playfair Display", serif;
font-size: 1.8rem;
color: var(--secondary-color);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.wcf-qty-options {
margin-bottom: 20px;
}
.wcf-qty-row {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.wcf-qty-row:last-child {
border-bottom: none;
}
.wcf-item {
flex: 1;
}
.wcf-item-selector {
margin-right: 15px;
}
.wcf-display-title {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 5px;
color: var(--text-dark);
}
.wcf-display-attributes {
font-size: 0.9rem;
color: #666;
margin-bottom: 10px;
}
.wcf-qty {
width: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.wcf-qty-selection-wrap {
display: flex;
align-items: center;
}
.wcf-qty-change-icon {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background-color: var(--bg-light);
border: none;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
}
.wcf-qty-change-icon:hover {
background-color: #e0e0e0;
}
.wcf-qty-selection {
width: 40px;
height: 26px;
padding: 0 5px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 0 5px;
text-align: center;
}
.wcf-price {
width: 100px;
text-align: right;
font-weight: 600;
color: var(--secondary-color);
}
/* Order Bumps */
.wcf-bump-order-wrap {
margin-bottom: 20px;
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid #eee;
transition: var(--transition);
}
.wcf-bump-order-wrap:hover {
box-shadow: var(--box-shadow);
}
.wcf-bump-order-content {
padding: 15px;
}
.wcf-bump-order-field-wrap {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
}
.wcf-bump-order-field-wrap label {
margin-left: 10px;
font-weight: 500;
}
.wcf-content-container {
display: flex;
gap: 15px;
}
.wcf-bump-order-image {
width: 80px;
height: 80px;
border-radius: var(--border-radius);
overflow: hidden;
}
.wcf-bump-order-offer-content-right {
flex: 1;
}
.wcf-bump-order-bump-highlight {
display: inline-block;
background-color: var(--primary-color);
color: var(--text-dark);
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 10px;
}
/* Customer Info Section */
.wcf-customer-info {
padding: 30px;
}
.woocommerce-billing-fields-custom h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3 {
font-size: 1.8rem;
margin-bottom: 25px;
color: var(--secondary-color);
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.wcf-logged-in-customer-info {
background-color: var(--bg-light);
padding: 15px;
border-radius: var(--border-radius);
margin-bottom: 20px;
}
/* Form Style */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
margin-bottom: 20px;
}
.form-row {
margin-bottom: 20px;
}
.form-row.form-row-first,
.form-row.form-row-last {
width: 48%;
}
.form-row.form-row-first {
float: left;
}
.form-row.form-row-last {
float: right;
}
.form-row.form-row-full,
.form-row.form-row-wide {
clear: both;
width: 100%;
}
.form-row label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-row input,
.form-row select,
.form-row textarea {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 1rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
outline: none;
border-color: var(--primary-color);
}
/* Order Summary */
.wcf-order-wrap {
background-color: #ffffff;
border-radius: var(--border-radius);
padding: 25px;
box-shadow: var(--box-shadow);
margin-bottom: 20px;
}
#order_review_heading {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--secondary-color);
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.shop_table {
width: 100%;
border-collapse: collapse;
}
.shop_table th,
.shop_table td {
padding: 12px 0;
}
.shop_table thead th {
text-align: left;
border-bottom: 1px solid #eee;
font-weight: 600;
}
.shop_table tbody td {
border-bottom: 1px solid #eee;
}
.shop_table tfoot tr:first-child {
border-top: 2px solid #eee;
}
.shop_table tfoot th,
.shop_table tfoot td {
padding: 15px 0;
text-align: left;
font-weight: 600;
}
.shop_table tfoot tr.order-total {
border-top: 1px solid #eee;
font-size: 1.2rem;
color: var(--secondary-color);
}
/* Payment Methods */
#payment {
margin-top: 30px;
}
.payment_methods {
margin-bottom: 30px;
}
.payment_methods li {
padding: 15px;
border: 1px solid #eee;
border-radius: var(--border-radius);
margin-bottom: 10px;
}
.payment_methods label {
display: flex;
align-items: center;
font-weight: 500;
cursor: pointer;
}
.payment_methods input[type="radio"] {
margin-right: 10px;
}
.payment_box {
padding: 15px;
background-color: var(--bg-light);
border-radius: var(--border-radius);
margin-top: 10px;
font-size: 0.95rem;
}
/* Place Order Button */
#place_order {
background-color: var(--primary-color);
color: var(--text-dark);
font-weight: 600;
padding: 12px 24px;
border-radius: var(--border-radius);
border: none;
cursor: pointer;
transition: var(--transition);
width: 100%;
font-size: 1.1rem;
}
#place_order:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--box-shadow);
}
/* Coupon Section */
#wcf_custom_coupon_field {
display: flex;
margin-bottom: 15px;
margin-top: 15px;
}
.wcf-coupon-col-1 {
flex: 1;
}
.wcf-coupon-col-2 {
width: 100px;
}
.wcf-coupon-code-input {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: var(--border-radius) 0 0 var(--border-radius);
font-family: inherit;
}
.wcf-btn-small {
padding: 10px 15px;
background-color: var(--secondary-color);
color: var(--text-light);
border: none;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.wcf-btn-small:hover {
background-color: var(--primary-color);
color: var(--text-dark);
}
/* Mobile Responsive Styles */
@media (max-width: 1024px) {
.wcf-customer-info-main-wrapper {
flex-direction: column;
}
.wcf-ic-layout-right-column {
width: 100%;
position: static;
}
}
@media (max-width: 768px) {
.checkout-steps {
gap: 15px;
}
.form-row.form-row-first,
.form-row.form-row-last {
width: 100%;
float: none;
}
.wcf-content-container {
flex-direction: column;
}
.wcf-qty-row {
flex-wrap: wrap;
}
.wcf-qty {
margin-top: 10px;
}
.wcf-price {
margin-top: 10px;
width: 100%;
text-align: left;
}
}
@media (max-width: 480px) {
.step-name {
font-size: 0.9rem;
}
.wcf-customer-info {
padding: 20px 15px;
}
#place_order {
padding: 12px 15px;
}
}
/* Step-based checkout modifications */
.checkout-section {
display: none;
}
.checkout-section.active {
display: block;
}
/* Navigation buttons */
.form-actions {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.prev-step {
background-color: transparent;
color: var(--text-dark);
border: 1px solid #ddd;
padding: 12px 24px;
border-radius: var(--border-radius);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.prev-step:hover {
background-color: #f5f5f5;
}
.next-step {
background-color: var(--primary-color);
color: var(--text-dark);
padding: 12px 24px;
border-radius: var(--border-radius);
border: none;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.next-step:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--box-shadow);
}
```
// CartFlows Custom Checkout JavaScript
jQuery(document).ready(function($) {
// Initialize checkout step navigation
initCheckoutSteps();
// Initialize quantity controls
initQuantityControls();
// Initialize coupon functionality
initCouponSystem();
// Add step indicators to the header
addCheckoutSteps();
// Function to add checkout steps indicators
function addCheckoutSteps() {
// Only proceed if we're on the checkout page
if (!$('.cartflows-checkout-main-wrapper').length) return;
// Create the steps container
const stepsHTML = `
1
Order Summary
2
Billing Details
3
Payment
`;
// Insert after the header
$('.main-header--content').append(stepsHTML);
}
// Initialize checkout step navigation
function initCheckoutSteps() {
// Create sections if they don't exist
createStepSections();
// Handle next button clicks
$(document).on('click', '.next-step', function(e) {
e.preventDefault();
const currentStep = $('.checkout-section.active').data('step');
// Validate step before proceeding
if (validateStep(currentStep)) {
goToStep(currentStep + 1);
}
});
// Handle previous button clicks
$(document).on('click', '.prev-step', function(e) {
e.preventDefault();
const currentStep = $('.checkout-section.active').data('step');
goToStep(currentStep - 1);
});
}
// Create step sections from the existing checkout form
function createStepSections() {
// Don't proceed if already set up or not on the checkout page
if ($('.checkout-section').length || !$('.wcf-customer-info-main-wrapper').length) return;
// Step 1: Product Selection (wrap the product selection part)
const productSection = $('.wcf-product-option-wrap');
if (productSection.length) {
productSection.addClass('checkout-section active').attr('data-step', '1');
// Add navigation buttons
productSection.append(`
Continue to Billing
`);
}
// Step 2: Billing Information
const billingSection = $('.wcf-customer-info');
if (billingSection.length) {
billingSection.addClass('checkout-section').attr('data-step', '2').removeClass('active');
// Add navigation buttons
billingSection.append(`
Back to Order
Continue to Payment
`);
}
// Step 3: Payment
const paymentSection = $('#payment');
if (paymentSection.length) {
paymentSection.addClass('checkout-section').attr('data-step', '3').removeClass('active');
// We don't need to modify the existing place order button
// But we'll add a back button
const placeOrderRow = paymentSection.find('.place-order');
placeOrderRow.prepend(`
Back to Billing
`);
}
}
// Navigate to a specific step
function goToStep(stepNumber) {
// Hide all sections
$('.checkout-section').removeClass('active');
// Deactivate all step indicators
$('.checkout-steps .step').removeClass('active');
// Show the current section
$(`.checkout-section[data-step="${stepNumber}"]`).addClass('active');
// Activate the current step indicator
$(`.checkout-steps .step[data-step="${stepNumber}"]`).addClass('active');
// Scroll to top of the form
$('html, body').animate({
scrollTop: $('.cartflows-checkout-main-wrapper').offset().top - 50
}, 500);
}
// Validate step before proceeding
function validateStep(stepNumber) {
switch(stepNumber) {
case 1:
// Always valid - just product selection
return true;
case 2:
// Basic billing field validation
let isValid = true;
const requiredFields = $('form.checkout [required]');
// Check each required field
requiredFields.each(function() {
if ($(this).val() === '') {
$(this).addClass('error');
isValid = false;
// Get field label
const fieldLabel = $(this).closest('.form-row').find('label').text().replace('*', '').trim();
alert(`Please enter your ${fieldLabel}`);
// Focus on the first invalid field
$(this).focus();
return false; // break the loop
}
});
return isValid;
case 3:
// Payment validation
// For most payment methods, validation happens when placing the order
return true;
default:
return true;
}
}
// Initialize quantity controls
function initQuantityControls() {
// Decrease quantity
$(document).on('click', '.wcf-qty-decrement', function() {
const input = $(this).siblings('.wcf-qty-selection');
let value = parseInt(input.val());
if (value > 1) {
input.val(value - 1).trigger('change');
}
});
// Increase quantity
$(document).on('click', '.wcf-qty-increment', function() {
const input = $(this).siblings('.wcf-qty-selection');
let value = parseInt(input.val());
if (value < 10) {
input.val(value + 1).trigger('change');
}
});
// Quantity input change - trigger AJAX update cart
$(document).on('change', '.wcf-qty-selection', function() {
// This should automatically trigger cart update through CartFlows functionality
});
}
// Initialize coupon system
function initCouponSystem() {
// Toggle coupon field visibility
$('.wcf-custom-coupon-field').on('click', function(e) {
$(this).toggleClass('active');
});
// Apply coupon button handling is already handled by CartFlows
}
});
Skip to content
Home / Uncategorised
Showing all 7 results
