How can I move the checkbox that is currently to the left of “Shipping to a different address?” to directly underneath that title and have it show a value of “yes”?
Thanks.
Hi there,
Thanks for writing in.
Underneath of which title? Unfortunately, we don’t provide Woocommerce customization, especially we don’t recommend modifying the default functionality of it. I already tried that and it’s not working, moving an element removes the events attached to it.
Thanks!
It’s the standard woocommerce checkout page that is styled by the theme. It has a checkbox next to the title “Ship to a different address?” that when checked opens up an additional form for a customer to fill out their shipping address if it is different from their billing information. As it is currently styled it is not clear that the box needs to be checked in order to get to that additional form. That is why I would like to move it underneath "Ship to a different address? title and add a value to it that is “yes” or something else to make it more clear to the customer.
See attached screenshots. 
Hi there,
I see, then what’s need to move is the title, the checkbox should stay in its position or else, it will stop working since it has javascript attached to it.
Please add this code to your global custom javascript.
jQuery( '#ship-to-different-address span' ).insertBefore('#ship-to-different-address input');
jQuery( '#ship-to-different-address label' ).append('<span class="option_yes">Yes</span>');
Then add this CSS to your global custom CSS
#ship-to-different-address span {
display: block;
width: 100%;
}
.option_yes {
font-size: 14px;
display: inline-block;
margin-left: 10px;
position: relative;
top: -2px;
}
Please note that we don’t recommend changing the Woocommerce standard feature, but of course, styling has no problem.
Thanks!
Okay so I decided after testing that I dont like this way. Is it instead possible to just change “Ship to a different address?” to “Check here if Shipping to a different address” and make the check bigger and add a space between it and the title?
Hello @rlmills3rd,
Thanks for updating thread. 
Before proceeding I suggest you to setup child theme. I am sharing relevant resources that you can use to download and install child theme:
https://theme.co/apex/child-themes
After that please add following code in your child theme function.php file:
add_filter('gettext', 'custom_strings_translation', 20, 3);
function custom_strings_translation( $translated_text, $text, $domain ) {
switch ( $translated_text ) {
case 'Ship to a different address?' :
$translated_text = __( 'Custom Text', '__x__' );
break;
}
return $translated_text;
}
Please replace Custom Text from above code.
You can add following CSS under X > Theme Options > CSS to make necessary changes in checkbox:
input#ship-to-different-address-checkbox {
width: 40px;
height: 40px;
zoom: 0.8;
margin-right: 20px !important;
}
Thanks.
Had a child theme setup already and this worked great. Thanks!
We are delighted to assist you with this.
Cheers!
Is it possible to flip the functionality of the “ship to different address?” checkbox for woocommerce checkout page that is styled by X?
I’d like it towork where the form is open and unfilled with a checkbox that says “same as billing address”. When the box is checked, the form closes and the shipping address is the same as the billing. The way it currently works is just the opposite and I think from a UX standpoint it’s confusing.
Hi,
Regretfully, It could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.
Thanks for understanding. Take care!
How about adding a headline or title above the “Ship to a different address?” and checkbox that says “Shipping details”?
Then I can adjust the font size of “ship to a different address?” with css and the way it’s worded with the php you have already provided me.
Hello There,
If you want to add something above the “Ship to a different address?”, you will have to modify the template. Please create a new file in your computer using Notepad or any of your preferref text editor. You will need to insert this code into the 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">
<?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>
You can insert a custom title right above this line: <h3 id="ship-to-different-address">. You can even change the h3 to h4 or h5 to reduce the font size. Saved this file and named it as form-shipping.php. You will then need to upload this file into your child theme’s folder wp-content/themes/x-child/woocommerce/checkout/.
Hope this helps. Please let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.