Bug Checkout with Cartflow

Hi,

I’m experiencing an issue on my website during the checkout process, which is built using the CartFlows plugin. The dropdown field for selecting the country appears to be buggy.

I reached out to CartFlows support, and here is their response:

“I’ve checked the issue with the country field and found that some custom CSS from your theme is causing the layout issue with the dropdown field. For your reference, here’s a screen recording demonstrating the issue:”

Could you please assist me in resolving this issue?

Thank you,

To fix this issue, try to add the following code snippet to the Custom CSS area in Theme Settings.

.cartflows-elementor__checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    position: relative !important;
}

Thank you for your assistance earlier; the previous issue is now resolved.

However, I’ve encountered another problem. As shown in the attached picture, the product details, including the name and cost, are missing in the checkout. Instead, only the total amount is displayed. Normally, the checkout should display both the product and its corresponding cost.

Could you please help me resolve this issue?

Thank you in advance for your support.

Best regards,
Raphael

Attachments:

You must be logged in to view attached files.

Hello,

Please send us a screenshot of how it looks with the default theme so we can understand what is wrong.

Kind Regards

I put the screenshots for you

Attachments:

You must be logged in to view attached files.

Can we switch between themes and see the difference on your website?

Yes, but put the original theme once your testing is finished

You need to disable the following options in Theme Settings to make it work https://monosnap.com/file/tRK7OxvSkqqe4HVFkD8LxuPgt2ewaO

Hello,

I have again the first problem i told in this post, because i change the template in cartflow, can you check again please (problem when select country, problem with css i guess)

You need to add the CSS code we sent you earlier to fix this issue https://xtemos.com/forums/topic/bug-checkout-with-cartflow/#post-628860

Ok thanks, I also have another problem with the layout of the shipping fields (the first two screenshots are from the Woodmart theme on desktop and mobile, and the last two screenshots are from the Astra theme on mobile and desktop). You can clearly see that with the Woodmart theme, there is a CSS issue with the positioning of the text. Could you please provide me with the CSS code to fix this?

Attachments:

You must be logged in to view attached files.

Try to use the following code snippet. We will fix this in the update as well

.wcf-order-wrap .shop_table,
	.wcf-collapsed-order-review-section .shop_table {
		display: table;
	}
	
	.wcf-order-wrap .shop_table tr,
	.wcf-collapsed-order-review-section .shop_table tr {
		display: table-row;
		border-bottom: none;
	}

I try to use this code but it don’t fix the problem.

Try to add the following part as well

.wcf-shipping-method-options .woocommerce-shipping-methods input.shipping_method {
    float: unset;
    top: 1px;
}

Work on mobile but nothing change on computer

Sorry, try to replace the previous snippet with this one

.cartflows-container .woocommerce-shipping-methods input.shipping_method {
    float: unset;
    top: 1px;
}

[Author]

Posts