Is it possible to make the “Address Line 2” visible by default when “Shipping” is selected? I cannot seem to find where or how the address 2 line appears. I already have it as optional, but even making it required does not make it visible.
This topic has 15 replies, 2 voices, and was last updated 2 weeks, 5 days ago ago by Andrew Mitchell
Is it possible to make the “Address Line 2” visible by default when “Shipping” is selected? I cannot seem to find where or how the address 2 line appears. I already have it as optional, but even making it required does not make it visible.
Hello, HUSSTLE,
Yes, this can be done. It will require a small amount of custom CSS. To add it, we will need access to your admin panel.
Best regards,
8Theme’s Team
Admin access provided.
Thank you for providing access. We have added the following custom CSS to always display “Ship to a different address.”
#ship-to-different-address~.shipping_address{
display: block !important;
}
#ship-to-different-address{
display:none;
}
Best regards,
8Theme’s Team
Andrew – thanks for adding the CSS. Can you share a screenshot of it enabled? I cannot see where it displays line 2 as an active and visible field.
Thanks,
Brad
Andrew – also; I only want to make the address line 2 visible; not required.
Hello, HUSSTLE,
In this case, you can uncheck the mandatory option for the Address Line 2 Field in the settings of the respective element.
Best regards,
8Theme’s Team
Andrew – I understand the directions and instructions to not make it required – but I still don’t see the Address Line 2 showing using the provided CSS.
Hello, HUSSTLE,
We have noticed a conflict between the customizer settings and the checkout page based on Elementor. The issue arises because you are using a checkout page built with Elementor, and the element used does not have the capability to display the Address Line 2 Field. There are two possible solutions: either use the default checkout or provide us with FTP access so we can add compatibility between these elements.
Best Regards,
8Theme’s Team
Andrew – I was just using the “default” – I have since switched to “separated”.
I now see “address line 2”; however it is below Postcode / ZIP *. I would expect this to be under “address line 1” – yes?
Hello, HUSSTLE,
To change the fields “address line 2” and “ZIP,” please add the following custom code to the functions.php file of your child theme:
add_filter( 'woocommerce_default_address_fields', 'custom_reorder_checkout_fields' );
function custom_reorder_checkout_fields( $fields ) {
$fields['postcode']['priority'] = 65;
return $fields;
}
Best Regards,
8Theme’s Team
The PHP code was added; but still not doing what I would expect. I notice on browser refresh, the address line 1 and 2 are “paired” .. but then it reverts back to under ZIP.
I am using the WPCode plugin and added the snippet there.
Thank you for the clarification. We have added the following custom CSS to address this issue
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0 15px;
}
.woocommerce-billing-fields__field-wrapper > p,
.woocommerce-shipping-fields__field-wrapper > p {
grid-column: span 2;
}
#billing_first_name_field,
#shipping_first_name_field {
grid-column: span 1 !important;
order: 1 !important;
}
#billing_last_name_field,
#shipping_last_name_field {
grid-column: span 1 !important;
order: 2 !important;
}
#billing_company_field, #shipping_company_field { order: 3 !important; }
#billing_country_field, #shipping_country_field { order: 4 !important; }
#billing_address_1_field, #shipping_address_1_field { order: 5 !important; }
#billing_address_2_field, #shipping_address_2_field { order: 6 !important; }
#billing_postcode_field, #shipping_postcode_field { order: 7 !important; }
#billing_city_field, #shipping_city_field { order: 8 !important; }
#billing_state_field, #shipping_state_field { order: 9 !important; }
#billing_phone_field { order: 10 !important; }
#billing_email_field { order: 11 !important; }
#billing_first_name_field,
#billing_last_name_field,
#shipping_first_name_field,
#shipping_last_name_field{
width: 100%;
}
Best regards,
8Theme’s Team
Andrew – thanks. This HELPS !
You’re most welcome! Wishing you a wonderful day ahead.
We hope our theme is elevating your experience. If you could take a moment to leave us a glowing 5-star review on ThemeForest, it would mean the world to us. Your feedback is incredibly important and helps us continue to improve.
You can rate us here: https://themeforest.net/downloads
Should you have any other questions or require assistance, please don’t hesitate to contact us. Our dedicated support team is always here to help.
You must be logged in to reply to this topic.Log in/Sign up