Default country at checkout and logo size on mobile on checkout page

  • Resolved arjunlajpal

    (@arjunlajpal)


    2 years, 6 months ago

    I need to set default country to IN in checkout. Also don’t show the country field at all to users.

    I have done 2 things:
    First, disabled country from shipping fields and billing fields using Checkout field editor.

    Second, inserted this code snippet:

    add_filter( 'default_checkout_billing_country', 'change_default_checkout_country' );
add_filter( 'default_checkout_shipping_country', 'change_default_shipping_country' );

function change_default_checkout_country() {
  return 'IN'; // Billing country code
}

function change_default_shipping_country() {
  return 'IN'; // Shipping country code
}

    When we create an account at checkout the country is not saved for the user. And hence on all further orders no shipping method can be selected since country is not saved in user’s billing address and shipping address.

    ———————————————-

    Second, if you see here litepace.com:
    on all pages the logo size is different while at the checkout page it appears bigger. Same file is used. This happens only on mobile and looks same on desktop.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @arjunlajpal,

    I need to set default country to IN in checkout. Also don’t show the country field at all to users.

    Currently, the country field is necessary for Fluid Checkout to work properly. This issue will be fixed in future versions of the plugin.

    Alternatively, you could select only India in the WooCommerce options at WP Admin > WooCommerce > Settings, in the fields Selling location(s) and Shipping location(s).

    This would force the checkout page to accept only India as the country field’s value, and would display the country field as text only.

    If you do not want to show the country name in text format, you can hide it with CSS. Most themes allow you to use the CSS class hidden to hide elements visually.

    on all pages the logo size is different while at the checkout page it appears bigger.

    I’m not sure if you already fixed that, I checked the logo size and they are very similar. On the checkout page it actually looks a little smaller than on other pages.

    We needed to set a size that would accommodate the logo image for the majority of websites.

    Any customization to the logo size has to be done by the site owners.

    You can use a CSS code similar to the one below, changing the values for max-width and max-height to fit your design.

    body.woocommerce-checkout .fc-checkout-header .fc-checkout__branding img {
	width: 100%;
	max-width: remsize( 13rem );
	max-height: remsize( 4.6rem );
}

// Larger mobile devices
@media (min-width: 400px) {
    body.woocommerce-checkout .fc-checkout-header .fc-checkout__branding img {
        max-width: remsize( 18rem );
    }
}

// Tablets and desktop devices
@media (min-width: 750px) { 
    body.woocommerce-checkout .fc-checkout-header .fc-checkout__branding img {
        max-width: remsize( 20rem ); 
    }
}

    I hope that helps already ??

    Best,
    Diego

    Thread Starter arjunlajpal

    (@arjunlajpal)

    Hi,

    I am sorry, I was away for a week.
    Thank you so much for your reply.

    For the country party, yes I have selected only India as the shipping location and thus the country is shown as text field as you have mentioned which looks a bit odd like this:
    https://nimb.ws/sUy9mn

    I have tried using css class
    visibility:hidden, display:none
    in checkout field editor for the country field but I am it doesn’t work. Not sure where is it actually that we need to apply the hidden css class.

    *******************************

    Thank you so much for the help with the css for the logo.

    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @arjunlajpal,

    The way the country field looks depends on the theme.

    visibility:hidden, display:none

    This is actually CSS code, not CSS classes.

    Using the plugin Checkout Field Editor, you can probably add the CSS class hidden to hide the field. For details on how to add the CSS class, please check their documentation or contact their support directly.

    I’m closing this topic for now. If you need further assistance, please reply to this topic.

    Best,
    Diego

    NF

    (@nanasflowers)

    This snippet might be useful, I use it, sets the country by users IP:

    add_action( 'default_checkout_country' , 'set_user_geoip_country_as_default_checkout_country', 900 );
function set_user_geoip_country_as_default_checkout_country( $default_country ) {
    $geolocation     = new WC_Geolocation();
    $user_ip_address = $geolocation->get_ip_address();
    $user_geoip_data = $geolocation->geolocate_ip( $user_ip_address );

    if ( isset($user_geoip_data['country']) && ! empty($user_geoip_data['country']) ) {
        $default_country = $user_geoip_data['country'];
    }

    return $default_country;
}

    Then just hide the field using CSS and it is still pulled through onto the order details.

    • This reply was modified 2 years, 5 months ago by NF.
    • This reply was modified 2 years, 5 months ago by NF.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Default country at checkout and logo size on mobile on checkout page’ is closed to new replies.