/** * Custom Frame Designer — WooCommerce Cart & Checkout fixes * Loaded only on /cart/ and /checkout/ via wp_enqueue_scripts. * * Fixes: "Proceed to Checkout" button hidden behind the footer on the cart * page, and mobile layout issues on cart/checkout (client feedback). */ body.woocommerce-cart .woocommerce-cart-form table.shop_table td.product-thumbnail, body.woocommerce-cart .woocommerce-cart-form table.shop_table th.product-thumbnail { width: 19% !important; } /* ===== Cart/Checkout: widen page container ===== Divi squeezes the body layout into .container { width:80%; max-width:1080px }. On wide screens the cart table gets ~680px and the product metadata grid (min 170px columns) overflows the product-name cell, colliding with the thumbnail. Widen to 1400px on cart/checkout only (header/footer untouched). */ body.woocommerce-cart #page-container .container, body.woocommerce-cart #page-container .et-l--body .et_pb_row, body.woocommerce-cart #page-container .et-l--body .et_block_row, body.woocommerce-checkout #page-container .container, body.woocommerce-checkout #page-container .et-l--body .et_pb_row, body.woocommerce-checkout #page-container .et-l--body .et_block_row { max-width: 1400px !important; width: 94% !important; } /* ===== Cart: Proceed to Checkout button always visible ===== */ /* The button container must stay in normal flow and above the footer. */ .et_pb_wc_cart_totals_0_tb_body .wc-proceed-to-checkout, .woocommerce-cart .wc-proceed-to-checkout { position: relative; z-index: 50; clear: both; overflow: visible; padding-bottom: 20px; } /* The button itself: visible, not floated, above everything. */ .et_pb_wc_cart_totals_0_tb_body a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { position: relative; z-index: 60; display: inline-block; float: none; visibility: visible; opacity: 1; } /* The footer must never overlap cart/checkout content. */ .et-l--footer { position: relative; z-index: 1; } /* Bottom separation for the totals block so nothing gets covered. */ .et_pb_wc_cart_totals_0_tb_body { margin-bottom: 0 !important; padding-bottom: 40px !important; } /* ===== Checkout: keep actions visible on small screens ===== */ .woocommerce-checkout .wc-proceed-to-checkout, .woocommerce-checkout .checkout-button, .woocommerce-checkout .place-order { position: relative; z-index: 50; clear: both; overflow: visible; } .woocommerce-checkout .woocommerce-checkout-payment { position: relative; z-index: 50; } /* ===== Divi container fixes: force the page to scroll / not clip content ===== Divi's page containers can clip the cart/checkout content so the "Proceed to Checkout" button is hidden behind the footer. Force the containers to allow vertical scrolling and show overflow. NOTE: the woocommerce-cart / woocommerce-checkout body classes are on , not , so selectors must target body.woocommerce-cart. */ body.woocommerce-cart, body.woocommerce-checkout { overflow-y: auto !important; height: auto !important; min-height: 100% !important; } body.woocommerce-cart #et-boc, body.woocommerce-cart #page-container, body.woocommerce-cart #main-content, body.woocommerce-cart .et-l--body, body.woocommerce-cart .et_builder_inner_content, body.woocommerce-cart .et_pb_section, body.woocommerce-checkout #et-boc, body.woocommerce-checkout #page-container, body.woocommerce-checkout #main-content, body.woocommerce-checkout .et-l--body, body.woocommerce-checkout .et_builder_inner_content, body.woocommerce-checkout .et_pb_section { overflow: visible !important; height: auto !important; min-height: 0 !important; max-height: none !important; } body.woocommerce-cart .et_pb_row, body.woocommerce-cart .et_pb_column, body.woocommerce-checkout .et_pb_row, body.woocommerce-checkout .et_pb_column { overflow: visible !important; } /* ===== Responsive: mobile cart & checkout ===== */ @media only screen and (max-width: 980px) { /* Cart: full-width checkout button */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; margin-bottom: 10px; } /* Cart: make the table horizontal-scrollable instead of cramped */ .woocommerce-cart table.cart { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Checkout: stack the two columns so nothing is cut off */ .woocommerce-checkout .woocommerce-columns--addresses .woocommerce-column, .woocommerce-checkout .woocommerce-form-coupon-toggle + form.checkout { float: none; width: 100%; } /* Order review table scrollable on phones */ .woocommerce-checkout .shop_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media only screen and (max-width: 767px) { /* Checkout: place order button full width */ .woocommerce-checkout .place-order .button.alt { width: 100%; text-align: center; } }