Adding some CSS using wp_footer hook doesn't work

To make the WooCommerce product image "display" the right way, I'm using CSS by usig the wp_footer hook. This way, the product thumbnail is displayed correctly on the checkout with margin, etc.

Code:

add_action( 'wp_footer', 'ls_product_image_css_checkout', 900 );
function ls_product_image_css_checkout() {

    // run only on checkout
    if ( is_checkout() ) { ?>

        <style>
        .product-item-thumbnail{ float:left; padding-right:20px; }
        .product-item-thumbnail img{ margin:0!important; }
        </style>

    <?php
    }
}

Now, here is my REAL problem and YES, I have tried various CSS solutions since the product removal has a <a class="" and yet, no matter what I do - the X for removing the product from checkout is displayed on the right of the thumbnail, directly next to the Product Name.

I need the X for removal to be placed on the LEFT of the thumbnail.

This is the code I am using:

add_filter( 'woocommerce_cart_item_name', 'ls_product_removal_on_the_left_of_product_image_on_checkout', 20, 3 );
function ls_product_removal_on_the_left_of_product_image_on_checkout( $product_name, $cart_item, $cart_item_key ) {

    // only on checkout, of course
    if ( is_checkout() ) {

    // get cart
    $cart = WC()->cart->get_cart();

        // loop through cart
        foreach ( $cart as $cart_key => $cart_value ) {

            if ( $cart_key == $cart_item_key ) {

                $product_id = $cart_item[ 'product_id' ];
                $_product = $cart_item[ 'data' ];

                // this is part of what I cannot figure out
                $remove_product = sprintf(
                '<a class="rpfc" href="%s" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">✕</a>',
                esc_url(wc_get_cart_remove_url( $cart_key)), __( 'Delete this product from my order', 'woocommerce' ),
                esc_attr( $product_id ),
                esc_attr( $_product->get_sku()),
                esc_attr( $cart_item_key ));
            }
        }

        // get product data
        $product = $cart_item[ 'data' ];

        // display the iamge on checkout, 40*40 px
        $thumbnail = $product->get_image( array( 40, 40 ) );

        // the HTML
        $image_html = '<div class="product-item-thumbnail">' . $thumbnail . '</div>';

        // get the product name and link it. If clicked, re-directed to the product page
        $product_name_link = '<a href="' . $product->get_permalink() . '">' . $product_name . '</a>';

        // the removal of the product BEFORE the image
        // REMOVAL (on the left of the image) IMAGE PRODUCT NAME
        $product_name = $remove_product . $image_html . $product_name_link;
    }

    return $product_name;
}

For styles (CSS) never use the footer as the CSS will never be applied, always use the head. So you need to replace 'wp_footer' hook by 'wp_head' instead. It should solve the problem.

The hook 'wp_footer' is used sometimes to add some JavaScript (jQuery) code.

To run this code only in checkout page, replace:

if ( is_checkout() ) {

with:

if ( is_checkout() && ! is_wc_endpoint_url() ) {

This way the code will be only effective in checkout page, but not in "order received" (thankyou) and not in "Order pay" pages.

If some CSS rules doesn't work, you may need (or try) to:

• increase the hook priority like:

  add_action( 'wp_head', 'ls_product_image_css_checkout', 999999 );
  

• add !important on each rule that doesn't work, like: float:none !important;