I'm trying to change the default cart-shipping.php template to use a dropdown menu rather than radio buttons.

I have successfully managed to do this on the cart page by changing the printf function to an option and replacing checked() with selected().

<select id="shipping_method" class="woocommerce-shipping-methods">
                <?php foreach ( $available_methods as $method ) : ?>
                        <?php
                        printf( '<option name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" %4$s />%5$s</option>', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ), selected( $method->id, $chosen_method, false ), wc_cart_totals_shipping_method_label( $method ) ); // WPCS: XSS ok.
                        do_action( 'woocommerce_after_shipping_rate', $method, $index );
                        ?>
                <?php endforeach; ?>
            </select>

However, when viewing it on the checkout page in the 'Order Review' section, it's displaying the dropdown menu but the label is breaking out of the option tag.

 <select id="shipping_method" class="woocommerce-shipping-methods">
    <option name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup3" value="local_pickup:3" class="shipping_method" selected="selected">
</option>Collection     
</select>

The problem seems to exist in the DOM and not the source so I'm not sure if there's any javascript working behind the scenes which is causing this to happen.

Does anyone know why this is happening?

I'm trying to change the default cart-shipping.php template to use a dropdown menu rather than radio buttons.

I have successfully managed to do this on the cart page by changing the printf function to an option and replacing checked() with selected().

<select id="shipping_method" class="woocommerce-shipping-methods">
                <?php foreach ( $available_methods as $method ) : ?>
                        <?php
                        printf( '<option name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" %4$s />%5$s</option>', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ), selected( $method->id, $chosen_method, false ), wc_cart_totals_shipping_method_label( $method ) ); // WPCS: XSS ok.
                        do_action( 'woocommerce_after_shipping_rate', $method, $index );
                        ?>
                <?php endforeach; ?>
            </select>

However, when viewing it on the checkout page in the 'Order Review' section, it's displaying the dropdown menu but the label is breaking out of the option tag.

 <select id="shipping_method" class="woocommerce-shipping-methods">
    <option name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup3" value="local_pickup:3" class="shipping_method" selected="selected">
</option>Collection     
</select>

The problem seems to exist in the DOM and not the source so I'm not sure if there's any javascript working behind the scenes which is causing this to happen.

Does anyone know why this is happening?

• woocommerce-offtopic
• templates

Share Improve this question asked Jul 11, 2019 at 9:06 ShaunShaun 15411 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You seem to have an unexpected "/" character here .../>%5$s</option> so the "option" tag is:

<option ... />Collection</option>

instad of

<option ... >Collection</option>

I am not sure if this causes a problem but i think it is worth checking :).