On my website, when the Woocommerce Checkout page is loaded (and refreshed) it flashes. Two things happen:
How can I correct these issues?
Hi @justinmking,
I couldn’t replicate this issue on my location installation:
Do you have any custom CSS for the checkout form? Please temporarily remove them.
Please also try testing a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
If it doesn’t help, please provide us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:
Thanks.
Hey @thai - thanks for the video. If you refresh the page a few times, will the ship to a different address content display and then hide, or will it stay hidden the whole time?
Confirming this is happening for me in both FF and Chrome.
Hi @justinmking,
Sorry for the confusion!
The ship to a different address content is hidden by the Javascript from the WooCommerce plugin.
To make it stay hidden for the whole time, you need to override the checkout form templates.
Assuming you have your child theme active and ready, please follow the following steps below:
1.) Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2.) Insert the following code into that new file
<?php
/**
* Checkout shipping information form
*
* This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-shipping.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 3.0.9
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="woocommerce-shipping-fields">
<?php if ( true === WC()->cart->needs_shipping_address() ) : ?>
<h3 id="ship-to-different-address">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input id="ship-to-different-address-checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" <?php checked( apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 ), 1 ); ?> type="checkbox" name="ship_to_different_address" value="1" /> <span><?php _e( 'Ship to a different address?', 'woocommerce' ); ?></span>
</label>
</h3>
<div class="shipping_address hide">
<?php do_action( 'woocommerce_before_checkout_shipping_form', $checkout ); ?>
<div class="woocommerce-shipping-fields__field-wrapper">
<?php
$fields = $checkout->get_checkout_fields( 'shipping' );
foreach ( $fields as $key => $field ) {
if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
$field['country'] = $checkout->get_value( $field['country_field'] );
}
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
}
?>
</div>
<?php do_action( 'woocommerce_after_checkout_shipping_form', $checkout ); ?>
</div>
<?php endif; ?>
</div>
<div class="woocommerce-additional-fields">
<?php do_action( 'woocommerce_before_order_notes', $checkout ); ?>
<?php if ( apply_filters( 'woocommerce_enable_order_notes_field', 'yes' === get_option( 'woocommerce_enable_order_comments', 'yes' ) ) ) : ?>
<?php if ( ! WC()->cart->needs_shipping() || wc_ship_to_billing_address_only() ) : ?>
<h3><?php _e( 'Additional information', 'woocommerce' ); ?></h3>
<?php endif; ?>
<div class="woocommerce-additional-fields__field-wrapper">
<?php foreach ( $checkout->get_checkout_fields( 'order' ) as $key => $field ) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_order_notes', $checkout ); ?>
</div>
3.) Save the file named as form-shipping.php
4.) Upload this file to your server in the child theme’s folder wp-content/themes/x-child/woocommerce/checkout/.
Let us know how it goes!
Hey @thai that worked perfectly for the shipping address! Thank you so much!
In testing I see three remaining flashes on the page:
Can this be resolved as well?
Hi justin.kay,
It does not seem to be the case on my installation. This shows there might be a problem in your case. Would you please test the case by changing the Theme from Pro to a default WordPress theme and see if the problem persists?
If yes, then please check for a plugin conflict. Try to disable all the plugins except the Woocommerce and check the case. Also, kindly make sure that you Uninstall the Cornerstone plugin as you already use the Pro theme and do not need that plugin.
kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.
Thank you.
@thai - results of testing:
The credit card area seems to “load” twice - tested on a different theme and the issue persists
“Create account password” field shows quickly and then hides the same way the shipping fields were doing. - this appears to be an issue with woocommerce as it’s happening on the storefront demo too
On the billing fields, the state/province drop down shows the placeholder text shows “Select a state…” before disappearing - an issue with pro theme only
Hi @justinmking,
It’s normal, Woocommerce reloaded that area through Ajax and all of that functionality is from Woocommerce itself. And it could be due to payment method as well, as some payment method always appear hidden first, then loads through Ajax. It seems to be blinking since the payment method is initially displayed instead of waiting for Ajax response. I recommend checking it with Woocommerce developer or the author of the payment method you have installed or activated.
It’s normal too since the entire functionality is controlled by javascript. It’s not completely hidden but just temporary, and will be visible once a user select that shipping option.
It’s the same on other themes, I tried it.Please try activating another theme then add a product on cart and go to checkout. Do this in incognito mode of your browser to make sure it will not use any information you already added to the checkout account. And this is just normal, it uses Select2 library like this https://select2.org/dropdown which is built-in to Wordpress. And it’s not integrated or modified through our theme.
I recommend contacting the Woocommerce developer about these issues.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.