Title: 2 different css styles for
Last modified: October 26, 2022

---

# 2 different css styles for

 *  [RobinAngelo](https://wordpress.org/support/users/robinangelo/)
 * (@robinangelo)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/2-different-css-styles-for/)
 * Hello,
 * I’m stuck on a design problem for the text in the <small class=”tax_label”>excl.
   VAT</small> on the cart page in our webshop.
 * Normally the text “excl. VAT.” on the cart page shows everywhere behind the price.
   But in some cases, for example when the product name is quite long or when the
   total amount is quite large, there is not enough space left for the price column
   to show the price + the text “excl. VAT.” on 1 line and moves below the price.
 * So for a uniform display on the shopping cart page, of the text “excl VAT.” I
   changed the style for this with “display: block;”. This moves the text “excl.
   tax.” everywere neatly to the next line, directly below the relevant price.
 * Now, however, in the shipping option, I DO want the text “excl. VAT.” to show
   behind the price instead of under it, sindse there is always enough space to 
   show it on one line.
 * Is there an option to realize this?
 * Maybe something like…
 *     ```
       add_filter( 'xxx
       function xxx
       if ...code here... {
             $xxx = '<small class="tax_label_custom">excl. VAT.</small>'
                  } else {
             $xxx = '<small class="tax_label">excl. VAT.</small>'
       }
       return $xxx;
       }
       ```
   
 * The above is just an indication, because I’m obviously not a programmer 😉
    Thanks
   in advance for thinking along!
    -  This topic was modified 3 years, 7 months ago by [Jan Dembowski](https://wordpress.org/support/users/jdembowski/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Moderator [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/)
 * (@sterndata)
 * Volunteer Forum Moderator
 * [3 years, 7 months ago](https://wordpress.org/support/topic/2-different-css-styles-for/#post-16135979)
 * Please provide a link to a page on your site where we can see this. Thanks. There
   may be other selectors one can use to do this all with CSS.
 *  Thread Starter [RobinAngelo](https://wordpress.org/support/users/robinangelo/)
 * (@robinangelo)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/2-different-css-styles-for/#post-16144597)
 * Hello Steven Stern,
 * Thanks for your reply.
    The modification I want is not only to my website related
   sinds the “<small class=”tax_label”>” is hard coded in to woocommerce.
 * I found it on:
 * wc-cart-functions.php – on line: 365 and 370
    abstract-wc-order.php – on line:
   1999, 2042 and 2050 class-wc-cart.php – on line: 1597, 1603, 1976, 1982, 2025
   and 2032
 * The file of my wordpress theme (Flatsome) that call’s this i think is:
    …/wp-
   content/themes/flatsome/woocommerce/cart/cart-shipping.php This file holds:
 *     ```
       <?php
       /**
        * Shipping Methods Display
        *
        * In 2.1 we show methods per package. This allows for multiple methods per order if so desired.
        *
        * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart-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/
        * @package          WooCommerce/Templates
        * @version          3.6.0
        * @flatsome-version 3.16.0
        */
   
       defined( 'ABSPATH' ) || exit;
   
       $formatted_destination    = isset( $formatted_destination ) ? $formatted_destination : WC()->countries->get_formatted_address( $package['destination'], ', ' );
       $has_calculated_shipping  = ! empty( $has_calculated_shipping );
       $show_shipping_calculator = ! empty( $show_shipping_calculator );
       $calculator_text          = '';
       ?>
       <tr class="woocommerce-shipping-totals shipping <?php if ( get_theme_mod( 'cart_boxed_shipping_labels', 0 ) && 1 < count( $available_methods ) ) echo 'shipping--boxed'; ?>">
       	<td class="shipping__inner" colspan="2">
       		<table class="shipping__table <?php if ( 1 < count( $available_methods ) ) : ?>shipping__table--multiple<?php endif; ?>">
       			<tbody>
       				<tr>
       					<th <?php if ( 1 < count( $available_methods ) ) : ?> colspan="2" <?php endif; ?>><?php echo wp_kses_post( $package_name ); ?></th>
       					<td data-title="<?php echo esc_attr( $package_name ); ?>">
       						<?php if ( $available_methods ) : ?>
       							<ul id="shipping_method" class="shipping__list woocommerce-shipping-methods">
       								<?php foreach ( $available_methods as $method ) : ?>
       									<li class="shipping__list_item">
       										<?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 class="shipping__list_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() && get_theme_mod( 'cart_estimate_text', 1 ) ) : ?>
       								<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; ?>
       					</td>
       				</tr>
       			</tbody>
       		</table>
       	</td>
       </tr>
       ```
   
 * I put a link to a screenshot to explain what I want.
    Link: [screenshot](https://ibb.co/kghNwyL)
 *  Moderator [threadi](https://wordpress.org/support/users/threadi/)
 * (@threadi)
 * [3 years, 7 months ago](https://wordpress.org/support/topic/2-different-css-styles-for/#post-16144770)
 * You could also force everything onto one line via CSS. Unfortunately you didn’t
   show a link where you can see the source code generated by your system. I just
   assume that the relevant code looks like this:
 * `<span class="price">33,00 € <span class="tax_label">excl. VAT</span></span>.`
 * Then you could force everything onto one line per:
 * `.price { white-space: nowrap; }`
 * Since you are using WooCommerce, I would rather recommend you to contact their
   support forum if you are looking for a solution through template customization(
   which imho would not be necessary): [https://wordpress.org/support/plugin/woocommerce/](https://wordpress.org/support/plugin/woocommerce/)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘2 different css styles for’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 3 participants
 * Last reply from: [threadi](https://wordpress.org/support/users/threadi/)
 * Last activity: [3 years, 7 months ago](https://wordpress.org/support/topic/2-different-css-styles-for/#post-16144770)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics