```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(`

`); } // 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(`

`); } // 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(` `); } } // 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 } });

Variation product

Name: Variation product - Mukul Gogia
Price: 100.00 INR
Availability: InStock

₹100.00

day

Clear

SKU: N/A Category: Uncategorised

Additional information
Reviews (0)

Additional information

day	For 20 People (Mon & Tue), For 30 People (Mon & Tue), For 35 People (Mon & Tue), For 20 People (Wed & Thu), For 30 People (Wed & Thu), For 35 People (Wed & Thu), For 20 People (Fri), For 30 People (Fri), For 35 People (Fri), For 20 People (Sat), For 30 People (Sat), For 35 People (Sat)

Reviews

There are no reviews yet.

Be the first to review “Variation product”

Variation product

Additional information

Reviews

Related products

new course for test

Notion Template

test

tutor > foc