WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Checkout form fields have bad positioning (6 posts)

  1. gstricklind
    Member
    Posted 1 year ago #

    The Country select option seems to jump out of its p tag and to the right for both Billing and Shipping forms. I've inspected the CSS to see if it cold be an issue there, but can't seem to figure this one out.

    http://colorsoffaith.com/checkout/
    You'll need to go back and add a product to your cart.

    http://wordpress.org/extend/plugins/woocommerce/

  2. bheadrick
    Member
    Posted 1 year ago #

    it looks like there's a structural problem with your html -
    a closing </p> before the country field. Something must be amiss with your wc template files

  3. gstricklind
    Member
    Posted 1 year ago #

    That's what I thought too.
    I looked at the template files and the coding seems to be correct. Anything I missed?

    Here's the coding from woocommerce/woocomerce-tempalte.php line 1102-1124 (country - beginning of state)

    case "country" :
    
    			$field = '<p class="form-row ' . implode( ' ', $args['class'] ) .'" id="' . $key . '_field">
    					<label for="' . $key . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required  . '</label>
    					<select name="' . $key . '" id="' . $key . '" class="country_to_state ' . implode( ' ', $args['class'] ) .'">
    						<option value="">'.__( 'Select a country&hellip;', 'woocommerce' ) .'</option>';
    
    			foreach ( $woocommerce->countries->get_allowed_countries() as $ckey => $cvalue ) {
    				$field .= '<option value="' . $ckey . '" '.selected( $value, $ckey, false ) .'>'.__( $cvalue, 'woocommerce' ) .'</option>';
    			}
    
    			$field .= '</select>';
    
    			$field .= '<noscript><input type="submit" name="woocommerce_checkout_update_totals" value="' . __('Update country', 'woocommerce') . '" /></noscript>';
    
    			$field .= '</p>' . $after;
    
    			break;
    		case "state" :
  4. gstricklind
    Member
    Posted 1 year ago #

    I hated to do this but I had to edit the plugin file and create a negative margin; and thought I'd post what fixed it just in case someone else has this problem or if this could possibly be a bug that can be fixed with the next release.

    case "country" :
    
    			$field = '<p class="form-row ' . implode( ' ', $args['class'] ) .'" id="' . $key . '_field">';
    			$field .= '<label for="' . $key . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required  . '</label>';
    			$field .= '<select name="' . $key . '" id="' . $key . '" class="country_to_state ' . implode( ' ', $args['class'] ) .'">';
    			$field .= '<option value="">'.__( 'Select a country&hellip;', 'woocommerce' ) .'</option>';
    
    			foreach ( $woocommerce->countries->get_allowed_countries() as $ckey => $cvalue ) {
    				$field .= '<option value="' . $ckey . '" '.selected( $value, $ckey, false ) .'>'.__( $cvalue,
  5. mcnamara14
    Member
    Posted 1 year ago #

    Thanks gstricklind, I was having the same issue. Not sure how our template files had these bugs while most apparently didn't.

  6. rickgrevatt
    Member
    Posted 1 year ago #

    I tried your fix and must be missing something. I too have the same problem for a site in development. I updated my woocommerce-templae.php as follows

    case "country" :
    
                $field = '<p class="form-row ' . implode( ' ', $args['class'] ) .'" id="' . $key . '_field">';
    			$field .= '<label for="' . $key . '" class="' . implode( ' ', $args['label_class'] ) .'">' . $args['label']. $required  . '</label>';
    			$field .= '<select name="' . $key . '" id="' . $key . '" class="country_to_state ' . implode( ' ', $args['class'] ) .'">';
    			$field .= '<option value="">'.__( 'Select a country&hellip;', 'woocommerce' ) .'</option>';
    
    			foreach ( $woocommerce->countries->get_allowed_countries() as $ckey => $cvalue ) {
    				$field .= '<option value="' . $ckey . '" '.selected( $value, $ckey, false ) .'>'.__( $cvalue,
    
    	        }

    All I managed to do was break the site. Can you tell me what I am doing wrong please?

    Thanks

    http://microscanada.onlyhospitality.com/shop/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.