Thank you for identifying this conflict. I believe version 2.0.22 will now display the estimate on the cart page. However the checkout page seems to be significantly changed by the fluid checkout plugin and will be much more difficult to accommodate.
We were trying to add compatibility with your plugin from our side, however, there is no function we could use to get the formatted shipping method description and estimated delivery time to then add it to the appropriate places on both the cart and checkout pages.
We checked the code of your plugin and see that you are using pseudo elements in CSS to display the text.
For the checkout page, you probably need to use a CSS selector with a higher specificity. You could for example use the CSS code below:
.woocommerce ul#shipping_method .shipping-method__option .shipping-method__option-text:after { content: 'Your description and delivery estimate.'; display: block; /* Your other style properties here */ }
Please not that we DO NOT recommend using CSS to display content since this is not a good practice and can lead to usability issues for people using assistive technologies such as screen readers for people with low vision.
If you need any further assistance to make your plugin compatibly with Fluid Checkout, please don’t hesitate to contact us.
Hi Diego, Thank you for your previous recommendations. You have created a beautiful plugin and I would like to improve compatibility between the two plugins.
The Cart page works fine, the issue is on Checkout.
I see the Order Summary html structure on /checkout with Fluid Checkout is different than the native structure.
Here are a two images, the first with Fluid Checkout, and the second with native WC elements. Since the structure is different, the pseudo element does not apply in the Order Summary.
I look forward to your recommendations to improve compatibility on the checkout page.
Yes, the structure of the HTML with Fluid Checkout is quite different.
However, since the description and delivery estimate are being shown with CSS, adding compatibility with Fluid Checkout is a matter of setting the right CSS selectors for each desired position.
Thank you for you reply. This is on our list of items to scope within the next few weeks unless Fluid Checkout makes the accommodations on their end first. I will keep you posted on this thread.
Unfortunately it is not possible for us to fix these issues from our side as your plugin does not provide any function that we could use to get the formatted text to be displayed as the shipping method description and delivery estimate.
With the lack of such function, we cannot even use custom CSS from our plugin as it is not possible to recover the CSS content property after it has been overwritten by our main plugin styles, or set the content property for the elements that are missing it because of the different in the HTML structure.
If such a function becomes available in your plugin, then we (or yourselves) could ideally use the Fluid Checkout PHP filter hook fc_shipping_method_option_description to display the shipping method description and delivery estimate.
Fluid Checkout also provides the PHP filter hooks fc_shipping_method_description_html_element and fc_shipping_method_option_description_markup to let developers change the actual HTML code used to display these values, at least for the checkout and cart pages.
When you have a moment, please check today’s release, version 2.0.23, to see if the adjustments are displaying the dates on /checkout in your installation.
Please let me know if this resolves the issue you are experiencing with Fluid Checkout.
You are correct, it appears that this is an element transformed by Fluid Checkout and they are inserting both the :before and :after pseudo elements to create the checkbox. Ship Estimate for WooCommerce is only using the :after pseudo element.
The ideal solution for the checkmark to be visible would have Fluid Checkout compromise and move their checkmark into the :before element. I’ve tested this solution (below) and it cleanly resolves the issue.
If the burden is on Ship Estimate for WooCommerce to move Fluid Checkout’s mark, it would be messy and rather complicated because Ship Est would have to rewrite and override Fluid Checkout’s styles. This would be a less ideal solution that prone to breaking if styles change in Fluid Checkout, and can lead to unintended side effects in the layout.
If you want to implement this solution yourself, please try this style pasted into your theme’s custom styles if supported (or preferably a child theme or snippet -in case you ever switch themes in the future).
