Style Conflict with Flux Checkout Plugin on Checkout Page

Hi Aizaz,

Thanks for coming back to me. I’ve since heard from the IconicWP support team, who kindly provided some CSS to add to Appearance > Customise > Additional CSS. It mostly did the trick, and I added some additional CSS to enhance the mobile/iPad appearance and to remove the mobile footer that was appearing. Although it seems much better on browsers such as Chrome, in mobile format on Chrome, Edge, and Safari, the product image floats to the top left-hand side of the screen. It’s worth getting your opinion on the CSS in case there are a few tweaks needed that the IconicWP support team may not have been able to anticipate. I’ve given you access to my staging site, which has the most recent version of custom CSS. Login credentials are listed in the private section below.

Many thanks for your time, expertise and assistance!

IconicWP’s CSS code:

/* Hide duplicate WooCommerce/Woodmart quantity buttons – keep only Flux buttons */
.flux-checkout__content-right .quantity .minus.btn,
.flux-checkout__content-right .quantity .plus.btn,
.flux-step .quantity .minus.btn,
.flux-step .quantity .plus.btn {
display: none !important;
}

/* Fix checkout product layout */
.flux-checkout__content-right #order_review tr.cart_item td,
.flux-step #order_review tr.cart_item td {
background-color: transparent !important;
padding-bottom: 32px;
padding-top: 32px;
}

/* Improve checkout product container layout */
.wd-checkout-prod-cont {
display: flex;
align-items: center;
gap: 15px;
width: 100%;
}

.wd-checkout-prod-title {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}

.cart-product-label {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}

/* Fix product image in checkout */
.flux-cart-image.flux-checkout__cart-image {
flex-shrink: 0;
width: 60px;
height: 60px;
}

.flux-cart-image.flux-checkout__cart-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}

/* Style the quantity controls properly */
.flux-checkout__content-right .quantity,
.flux-step .quantity {
display: flex;
align-items: center;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
margin: 0 10px;
}

.flux-checkout__content-right .quantity .qty,
.flux-step .quantity .qty {
border: none;
text-align: center;
width: 50px;
height: 36px;
margin: 0;
background: white;
}

.flux-checkout__content-right .quantity__button,
.flux-step .quantity__button {
border: none;
background: #f8f8f8;
width: 32px;
height: 36px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #555;
transition: background-color 0.2s;
}

.flux-checkout__content-right .quantity__button:hover,
.flux-step .quantity__button:hover {
background: #e8e8e8;
}

/* Fix product total alignment */
.wd-checkout-prod-total {
margin-left: auto;
text-align: right;
font-weight: bold;
}

/* Style remove link */
.flux-checkout__remove-link {
margin-right: 8px;
}

.flux-checkout__remove-link .remove {
color: #999;
text-decoration: none;
font-size: 18px;
line-height: 1;
padding: 2px;
}

.flux-checkout__remove-link .remove:hover {
color: #e74c3c;
}

/* Responsive adjustments */

@media (max-width: 768px) {
.wd-checkout-prod-cont {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.wd-checkout-prod-title {
width: 100%;
padding-left: 100px;
}

.wd-checkout-prod-total {
width: 100%;
text-align: left;
margin-left: 0;
}
}

.wd-checkout-prod-title {
width: 100%;
padding-left: 100px;
}
/* — Simple Fix for Mobile Checkout Layout — */

@media (max-width: 768px) {
.wd-checkout-prod-title {
padding-left: 0 !important; /* Removes the large awkward gap on mobile */
}

.wd-checkout-prod-total {
justify-content: space-between !important; /* Aligns remove link left and price right */
}
}
/* Hide the mobile toolbar on the checkout page */
.woocommerce-checkout .wd-toolbar {
display: none !important;
}