• 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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    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

    (@robinangelo)

    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

    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://www.ads-software.com/support/plugin/woocommerce/

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘2 different css styles for’ is closed to new replies.