Woocommerce state and country dropdowns not working in firefox

Hi there,

I have a production site that has been having issues with the state and country drop downs not working in Firefox for quite some time. I have tried reading through a number of different forums and other information and am coming up empty.

Are there any known issues that might be causing this? I have tried everything I can think of (disabling plugins, etc.)

I did read there was an issue with select2 and that a custom version was being developed, but that was some time ago and we are now using woocommerce 4.0 so I am guessing it is something else.

I will send credentials if I need to once we get moving on this… Thanks.

Hey @Sharpy01,

We have no known issue with regards to WooCommerce dropdowns. Before we proceed to investigate your site, please confirm that you have tested that the issue you’re experiencing is not a common issue. This is to ensure that the issue is really coming from our theme and not caused by other factors such us 3rd party plugin conflict and customizations.

It would also be best to copy your site to a staging server so that we eliminate the risk of breaking your live site. Performing troubleshooting will disrupt your live site’s operation so you need to take that into account.

Once you’ve copied your site to an online staging server, give us the following info in a Secure Note. In case you don’t want to create a staging site, give us access to your live site. Please just be reminded of the risks.

  • Staging WordPress Login URL
  • Admin level username and password
  • I believe you’re referring to the WooCommerce Checkout page but if not, please give us the URL where we can find the issue.

Thanks.

I sent overthe secure note inline with my initial post. Thanks

Hi @Sharpy01,

I tried different variants of username but it’s not working. Please provide the correct username.

In the meantime, please deactivate all other plugins except Woocommerce and cornerstone and test it again. The select and other options are implemented by Woocommerce itself and only skinned and designed to match the theme. This issue is probably caused by 3rd party plugin or customization that loads similar libraries.

Thanks!

Hi there,

I ended up pushing forward a more recent copy of the site and ended up deleting the user account I had created for you. Sorry about that!

Please try again using the above mentioned credentials.

I did what you said and quickly checked the site on chrome, which was silly of me because the issue is with Firefox.

Long story short, same issue. No plugins other than woocommerce are enabled.

To test it on your end, you will want to use the search function to find something like “broadcloth” or something.

Best regards,

Grant

Hello Grant,

I have checked your site and I can confirm that in Firefox, you cannot select any state or country. This could be a bug in the latest release (4.0.1) of the WooCommerce plugin. Please understand that the latest supported version of the theme is only 4.0. Please revert to this version instead. You can get the previous version of WooCommerce from here: https://wordpress.org/plugins/woocommerce/advanced/

Best Regards.

Thanks for looking into it. I have no problem reverting to a previous version of Woo Commerce. The problem is that this has been a problem for quite some time (like approaching a full year).

We didn’t uncover the issue right away because rather than flag the issue people who used Firefox just got frustrated and left.

Is there anything else is could be other than a bug on their end? I am pretty sure if I reach out to Automattic they will tell me it is a theme issue and send me back here.

Hello @Sharpy01,

I have logged in again and about to investigate the issue in your site a little further. When I view the product page, it seems that there is a fatal error occurred.

Please enable the debug mode so that we can get more information about this fatal error. You can do this by opening wp-config.php and adding

define('WP_DEBUG', true);

/* That's all, stop editing! Happy blogging. */

And by the way, I checked your child theme’s functions.php file and I found these lines:

add_action( 'wp_enqueue_scripts', 'agentwp_dequeue_stylesandscripts', 100 );

add_action( 'wp_enqueue_scripts', 'agentwp_dequeue_stylesandscripts', 100 );
function agentwp_dequeue_stylesandscripts() {
if ( class_exists( 'woocommerce' ) ) {
wp_dequeue_style( 'select2' );
wp_deregister_style( 'select2' );
wp_dequeue_script( 'select2');
wp_deregister_script('select2');
}
}

This seems to dequeue the WooCommerce style for the select element. Please have this removed and check your checkout page in Firefox again.

Kindly let us know how it goes.

So I have enabled the debug mode and tried removing the function and the drop down select stopped working altogether.

The little arrow on the right side of the field still moves, but that is it. Could the php version have anything to do with this? I know Word Press recommends 7.3 right now, and I just checked the server and it is running on 7.0 something.

Hello @Sharpy01,

The PHP Error is this:

Fatal error: Uncaught Error: Call to undefined function print_attribute_radio() in /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-content/themes/pro-child/woocommerce/single-product/add-to-cart/variable.php:62 Stack trace: #0 /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-content/plugins/woocommerce/includes/wc-core-functions.php(251): include() #1 /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-content/plugins/woocommerce/includes/wc-template-functions.php(1630): wc_get_template('single-product/...', Array) #2 /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-includes/class-wp-hook.php(287): woocommerce_variable_add_to_cart('') #3 /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-includes/class-wp-hook.php(311): WP_Hook->apply_filters('', Array) #4 /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-includes/plugin.php(478): WP_Hook->do_action(Array) #5 /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-content/plugins/woocommerce/includes/wc-template-functions.php(15 in /home/189110.cloudwaysapps.com/pnxrscvvut/public_html/wp-content/themes/pro-child/woocommerce/single-product/add-to-cart/variable.php on line 62

This means that in the line 62 of the file: woocommerce/single-product/add-to-cart/variable.php, there is a missing function:

<?php
/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.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/
 * @package WooCommerce/Templates
 * @version 3.4.1
 */

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys = array_keys( $attributes );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo htmlspecialchars( wp_json_encode( $available_variations ) ) ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>

	<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
		<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
	<?php else : ?>
		<table class="variations" cellspacing="0">
			<tbody>
				<?php foreach ( $attributes as $name => $options ) : ?>
					<tr class="attribute-<?php echo sanitize_title($name); ?>">
						<td class="label"><label for="<?php echo sanitize_title( $name ); ?>"><?php echo wc_attribute_label( $name ); ?></label></td>
						<?php
						$sanitized_name = sanitize_title( $name );
						if ( isset( $_REQUEST[ 'attribute_' . $sanitized_name ] ) ) {
							$checked_value = $_REQUEST[ 'attribute_' . $sanitized_name ];
						} elseif ( isset( $selected_attributes[ $sanitized_name ] ) ) {
							$checked_value = $selected_attributes[ $sanitized_name ];
						} else {
							$checked_value = '';
						}
						?>
						<td class="value">
							<?php
							if ( ! empty( $options ) ) {
								if ( taxonomy_exists( $name ) ) {
									// Get terms if this is a taxonomy - ordered. We need the names too.
									$terms = wc_get_product_terms( $product->get_id(), $name, array( 'fields' => 'all' ) );

									foreach ( $terms as $term ) {
										if ( ! in_array( $term->slug, $options ) ) {
											continue;
										}
										print_attribute_radio( $checked_value, $term->slug, $term->name, $sanitized_name );
									}
								} else {
									foreach ( $options as $option ) {
										print_attribute_radio( $checked_value, $option, $option, $sanitized_name );
									}
								}
							}

							echo end( $attribute_keys ) === $name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
							?>
						</td>
					</tr>
				<?php endforeach; ?>
			</tbody>
		</table>

		<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>

		<div class="single_variation_wrap">
			<?php
				do_action( 'woocommerce_before_single_variation' );
				do_action( 'woocommerce_single_variation' );
				do_action( 'woocommerce_after_single_variation' );
			?>
		</div>

		<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
	<?php endif; ?>

	<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
<?php
do_action( 'woocommerce_after_add_to_cart_form' );

This means that your custom code added in your child theme has some errors. You are using the old version of the template. In the latest version of WooCommerce, the code which should be added for the variable.php file will be:

<?php
/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/add-to-cart/variable.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/
 * @package WooCommerce/Templates
 * @version 3.5.5
 */

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>

	<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
		<p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
	<?php else : ?>
		<table class="variations" cellspacing="0">
			<tbody>
				<?php foreach ( $attributes as $attribute_name => $options ) : ?>
					<tr>
						<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
						<td class="value">
							<?php
								wc_dropdown_variation_attribute_options(
									array(
										'options'   => $options,
										'attribute' => $attribute_name,
										'product'   => $product,
									)
								);
								echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
							?>
						</td>
					</tr>
				<?php endforeach; ?>
			</tbody>
		</table>

		<div class="single_variation_wrap">
			<?php
				/**
				 * Hook: woocommerce_before_single_variation.
				 */
				do_action( 'woocommerce_before_single_variation' );

				/**
				 * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
				 *
				 * @since 2.4.0
				 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
				 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
				 */
				do_action( 'woocommerce_single_variation' );

				/**
				 * Hook: woocommerce_after_single_variation.
				 */
				do_action( 'woocommerce_after_single_variation' );
			?>
		</div>
	<?php endif; ?>

	<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>

<?php
do_action( 'woocommerce_after_add_to_cart_form' );

Hope this makes sense.

Ok… I did that, still not working on the state / country drop down is still not working on the checkout page. The code you had me remove earlier from the functions.php file cause the function to stop working in chrome as well so I put it back in.

There are other templates that seem to need updating, so I am guessing that I should work through all of them and see if that works? It also appears as though the way I am calling some woo commerce updates in the product detail page is outdated too, my question is if none these solutions works, where should I go next?

Best Grant

Hi @Sharpy01,

Yes, please check your customizations. I have mentioned that previously and I have tested switching to the parent theme now and that fixed the issue so the cause is definitely in the child theme. If you’re unsure how to fix your custsom codes, you need to consult with a developer.

image

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.