Style Conflict with Flux Checkout Plugin on Checkout Page

Hi Woodmart Support Team,

I am experiencing a significant style conflict on my WooCommerce checkout page between the Woodmart theme and the “Flux Checkout for WooCommerce” plugin.

The Problem:

On the checkout page, in the “Cart” or “Order Review” section, the theme is causing two main issues:

Duplicate Quantity Buttons: The Woodmart theme is adding its own plus/minus buttons (<button class=”quantity__button”>) next to the standard WooCommerce ones, creating a cluttered and broken interface.

Incorrect Product Layout: The product image is overlapping the product title, instead of being positioned correctly beside it.

My checkout page is here: https://sequoiavalleyfarms.com.au/checkout/

What I Want It To Look Like:

The layout on my “Thank You” page is perfect and shows exactly how the checkout page should look. The image is to the left of the title, and the quantity buttons are neatly underneath the title. You can see an example here: https://sequoiavalleyfarms.com.au/checkout/order-received/22172/?key=wc_order_GDB0T3wJf3auW

Troubleshooting Steps Already Taken:

We have already attempted to resolve this issue through extensive troubleshooting, but have been unsuccessful. This suggests the theme might be using JavaScript to control these elements, which is overriding our fixes. We have tried:

Extensive Custom CSS: Using highly specific selectors with ‘! important’ to hide the duplicate buttons and correct the flexbox layout.

PHP Snippets: Using wp_dequeue_style and wp_deregister_style to try and remove the wd-woo-mod-quantity.min.css stylesheet on the checkout page. This did not work, and the stylesheet was still loaded.

Could you please provide the correct way to resolve this conflict so that the checkout page layout matches the “Thank You” page?

Thank you for your help.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

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;
}

Hello,

Thank you for sharing the details and providing staging access. I’ve reviewed the CSS and the adjustments you made. Overall, the fixes are on the right track, but on mobile, I have not seen the product image on your site. Can you please share some screenshots for a better understanding of what you actually want to move?

Best Regards,

Hi Aizaz,

I’ve attached screenshots taken from the Safari desktop browser illustrating how the product image moves to the top left corner of the checkout page. Additionally, I included a screenshot from my mobile device showing a similar issue, and I used Chrome browser to demonstrate that this problem can occur across different browsers.

Included below in the moderator field is the HTML section from one of the screenshots, should you wish to take a closer look.

Thanks again for your assistance.

Attachments:

You must be logged in to view attached files.

Hi Aizaz,

I’ve added a TXT file with the full HTML code from this section, in case it is needed.

Many thanks again,

Shannon.

Attachments:

You must be logged in to view attached files.

Hello,

Now I have checked your site in Chrome browser and it is showing fine.

See Screenshot for clarification: https://postimg.cc/8fL8yWmb

Please try clearing your browser cache/site cache or checking the issue. If you have any questions, feel free to contact us.

Best Regards,

[Author]

Posts