How to style in checkout shipping in Woocommerce

Viewed 216

I'm stuck on modifying shipping style in checkout. The goal is to redo the "Doprava" heading into a single column and shipping metods below. The shipping price should be on the right and the shipping name on the left.

I cant remove tag <.th> because then it stop works whole shipping metods.

Cart-shipping.php

<tr class="woocommerce-shipping-totals shipping">
    <tr style="width:100%"><?php echo wp_kses_post( $package_name ); ?></tr>
    <th data-title="<?php echo esc_attr( $package_name ); ?>" style="width:100%">
        <?php if ( $available_methods ) : ?>
            <ul id="shipping_method" class="woocommerce-shipping-methods">
                <?php foreach ( $available_methods as $method ) : ?>
                    <li>
                        <?php
                        if ( 1 < count( $available_methods ) ) {
                            printf( '<input type="radio" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" %4$s />', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ), checked( $method->id, $chosen_method, false ) ); // WPCS: XSS ok.
                        } else {
                            printf( '<input type="hidden" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" />', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ) ); // WPCS: XSS ok.
                        }
                        printf( '<label for="shipping_method_%1$s_%2$s">%3$s</label>', $index, esc_attr( sanitize_title( $method->id ) ), wc_cart_totals_shipping_method_label( $method ) ); // WPCS: XSS ok.
                        do_action( 'woocommerce_after_shipping_rate', $method, $index );
                        ?>
                    </li>
                <?php endforeach; ?>
            </ul>
            <?php if ( is_cart() ) : ?>
                <p class="woocommerce-shipping-destination">
                    <?php
                    if ( $formatted_destination ) {
                        // Translators: $s shipping destination.
                        printf( esc_html__( 'Shipping to %s.', 'woocommerce' ) . ' ', '<strong>' . esc_html( $formatted_destination ) . '</strong>' );
                        $calculator_text = esc_html__( 'Change address', 'woocommerce' );
                    } else {
                        echo wp_kses_post( apply_filters( 'woocommerce_shipping_estimate_html', __( 'Shipping options will be updated during checkout.', 'woocommerce' ) ) );
                    }
                    ?>
                </p>
            <?php endif; ?>
            <?php
        elseif ( ! $has_calculated_shipping || ! $formatted_destination ) :
            if ( is_cart() && 'no' === get_option( 'woocommerce_enable_shipping_calc' ) ) {
                echo wp_kses_post( apply_filters( 'woocommerce_shipping_not_enabled_on_cart_html', __( 'Shipping costs are calculated during checkout.', 'woocommerce' ) ) );
            } else {
                echo wp_kses_post( apply_filters( 'woocommerce_shipping_may_be_available_html', __( 'Enter your address to view shipping options.', 'woocommerce' ) ) );
            }
        elseif ( ! is_cart() ) :
            echo wp_kses_post( apply_filters( 'woocommerce_no_shipping_available_html', __( 'There are no shipping options available. Please ensure that your address has been entered correctly, or contact us if you need any help.', 'woocommerce' ) ) );
        else :
            // Translators: $s shipping destination.
            echo wp_kses_post( apply_filters( 'woocommerce_cart_no_shipping_available_html', sprintf( esc_html__( 'No shipping options were found for %s.', 'woocommerce' ) . ' ', '<strong>' . esc_html( $formatted_destination ) . '</strong>' ) ) );
            $calculator_text = esc_html__( 'Enter a different address', 'woocommerce' );
        endif;
        ?>

        <?php if ( $show_package_details ) : ?>
            <?php echo '<p class="woocommerce-shipping-contents"><small>' . esc_html( $package_details ) . '</small></p>'; ?>
        <?php endif; ?>

        <?php if ( $show_shipping_calculator ) : ?>
            <?php woocommerce_shipping_calculator( $calculator_text ); ?>
        <?php endif; ?>
        </th>
</tr>


frontend HTML

<tr class="woocommerce-shipping-totals shipping">
    <th>Doprava</th>
    <td data-title="Doprava">
                    <ul id="shipping_method" class="woocommerce-shipping-methods">
                                    <li>
                        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method"><label for="shipping_method_0_flat_rate1">Zásilkovna: <span class="woocommerce-Price-amount amount"><bdi>49&nbsp;<span class="woocommerce-Price-currencySymbol">Kč</span></bdi></span></label>                   </li>
                                    <li>
                        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate3" value="flat_rate:3" class="shipping_method"><label for="shipping_method_0_flat_rate3">Kurýr PPL: <span class="woocommerce-Price-amount amount"><bdi>69&nbsp;<span class="woocommerce-Price-currencySymbol">Kč</span></bdi></span></label>                    </li>
                                    <li>
                        <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate4" value="flat_rate:4" class="shipping_method" checked="checked"><label for="shipping_method_0_flat_rate4">Česká pošta - balík do ruky: <span class="woocommerce-Price-amount amount"><bdi>89&nbsp;<span class="woocommerce-Price-currencySymbol">Kč</span></bdi></span></label>                    </li>
                            </ul>
                        
        
            </td>
</tr>

enter image description here

0 Answers
Related