title: How to style in checkout shipping in Woocommerce
body: <p>I'm stuck on modifying shipping style in checkout. The goal is to redo the &quot;Doprava&quot; heading into a single column and shipping metods below. The shipping price should be on the  right and the shipping name on the left.</p>
  <p>I cant remove tag &lt;.th&gt; because then it stop works whole shipping metods.</p>
  <p>Cart-shipping.php</p>
  <pre><code>&lt;tr class=&quot;woocommerce-shipping-totals shipping&quot;&gt;
      &lt;tr style=&quot;width:100%&quot;&gt;&lt;?php echo wp_kses_post( $package_name ); ?&gt;&lt;/tr&gt;
      &lt;th data-title=&quot;&lt;?php echo esc_attr( $package_name ); ?&gt;&quot; style=&quot;width:100%&quot;&gt;
          &lt;?php if ( $available_methods ) : ?&gt;
              &lt;ul id=&quot;shipping_method&quot; class=&quot;woocommerce-shipping-methods&quot;&gt;
                  &lt;?php foreach ( $available_methods as $method ) : ?&gt;
                      &lt;li&gt;
                          &lt;?php
                          if ( 1 &lt; count( $available_methods ) ) {
                              printf( '&lt;input type=&quot;radio&quot; name=&quot;shipping_method[%1$d]&quot; data-index=&quot;%1$d&quot; id=&quot;shipping_method_%1$d_%2$s&quot; value=&quot;%3$s&quot; class=&quot;shipping_method&quot; %4$s /&gt;', $index, esc_attr( sanitize_title( $method-&gt;id ) ), esc_attr( $method-&gt;id ), checked( $method-&gt;id, $chosen_method, false ) ); // WPCS: XSS ok.
                          } else {
                              printf( '&lt;input type=&quot;hidden&quot; name=&quot;shipping_method[%1$d]&quot; data-index=&quot;%1$d&quot; id=&quot;shipping_method_%1$d_%2$s&quot; value=&quot;%3$s&quot; class=&quot;shipping_method&quot; /&gt;', $index, esc_attr( sanitize_title( $method-&gt;id ) ), esc_attr( $method-&gt;id ) ); // WPCS: XSS ok.
                          }
                          printf( '&lt;label for=&quot;shipping_method_%1$s_%2$s&quot;&gt;%3$s&lt;/label&gt;', $index, esc_attr( sanitize_title( $method-&gt;id ) ), wc_cart_totals_shipping_method_label( $method ) ); // WPCS: XSS ok.
                          do_action( 'woocommerce_after_shipping_rate', $method, $index );
                          ?&gt;
                      &lt;/li&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;/ul&gt;
              &lt;?php if ( is_cart() ) : ?&gt;
                  &lt;p class=&quot;woocommerce-shipping-destination&quot;&gt;
                      &lt;?php
                      if ( $formatted_destination ) {
                          // Translators: $s shipping destination.
                          printf( esc_html__( 'Shipping to %s.', 'woocommerce' ) . ' ', '&lt;strong&gt;' . esc_html( $formatted_destination ) . '&lt;/strong&gt;' );
                          $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' ) ) );
                      }
                      ?&gt;
                  &lt;/p&gt;
              &lt;?php endif; ?&gt;
              &lt;?php
          elseif ( ! $has_calculated_shipping || ! $formatted_destination ) :
              if ( is_cart() &amp;&amp; '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' ) . ' ', '&lt;strong&gt;' . esc_html( $formatted_destination ) . '&lt;/strong&gt;' ) ) );
              $calculator_text = esc_html__( 'Enter a different address', 'woocommerce' );
          endif;
          ?&gt;
  
          &lt;?php if ( $show_package_details ) : ?&gt;
              &lt;?php echo '&lt;p class=&quot;woocommerce-shipping-contents&quot;&gt;&lt;small&gt;' . esc_html( $package_details ) . '&lt;/small&gt;&lt;/p&gt;'; ?&gt;
          &lt;?php endif; ?&gt;
  
          &lt;?php if ( $show_shipping_calculator ) : ?&gt;
              &lt;?php woocommerce_shipping_calculator( $calculator_text ); ?&gt;
          &lt;?php endif; ?&gt;
          &lt;/th&gt;
  &lt;/tr&gt;
  
  
  </code></pre>
  <p>frontend HTML</p>
  <pre><code>&lt;tr class=&quot;woocommerce-shipping-totals shipping&quot;&gt;
      &lt;th&gt;Doprava&lt;/th&gt;
      &lt;td data-title=&quot;Doprava&quot;&gt;
                      &lt;ul id=&quot;shipping_method&quot; class=&quot;woocommerce-shipping-methods&quot;&gt;
                                      &lt;li&gt;
                          &lt;input type=&quot;radio&quot; name=&quot;shipping_method[0]&quot; data-index=&quot;0&quot; id=&quot;shipping_method_0_flat_rate1&quot; value=&quot;flat_rate:1&quot; class=&quot;shipping_method&quot;&gt;&lt;label for=&quot;shipping_method_0_flat_rate1&quot;&gt;Zásilkovna: &lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;49&amp;nbsp;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;Kč&lt;/span&gt;&lt;/bdi&gt;&lt;/span&gt;&lt;/label&gt;                   &lt;/li&gt;
                                      &lt;li&gt;
                          &lt;input type=&quot;radio&quot; name=&quot;shipping_method[0]&quot; data-index=&quot;0&quot; id=&quot;shipping_method_0_flat_rate3&quot; value=&quot;flat_rate:3&quot; class=&quot;shipping_method&quot;&gt;&lt;label for=&quot;shipping_method_0_flat_rate3&quot;&gt;Kurýr PPL: &lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;69&amp;nbsp;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;Kč&lt;/span&gt;&lt;/bdi&gt;&lt;/span&gt;&lt;/label&gt;                    &lt;/li&gt;
                                      &lt;li&gt;
                          &lt;input type=&quot;radio&quot; name=&quot;shipping_method[0]&quot; data-index=&quot;0&quot; id=&quot;shipping_method_0_flat_rate4&quot; value=&quot;flat_rate:4&quot; class=&quot;shipping_method&quot; checked=&quot;checked&quot;&gt;&lt;label for=&quot;shipping_method_0_flat_rate4&quot;&gt;Česká pošta - balík do ruky: &lt;span class=&quot;woocommerce-Price-amount amount&quot;&gt;&lt;bdi&gt;89&amp;nbsp;&lt;span class=&quot;woocommerce-Price-currencySymbol&quot;&gt;Kč&lt;/span&gt;&lt;/bdi&gt;&lt;/span&gt;&lt;/label&gt;                    &lt;/li&gt;
                              &lt;/ul&gt;
                          
          
              &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/repum.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/repum.png" alt="enter image description here" /></a></p>