英文:

Adding some CSS using wp_footer hook doesn't work

问题 {#heading}

为了正确显示WooCommerce产品图片，我使用CSS，并使用wp_footer挂钩。这样，在结账时，产品缩略图会正确显示，包括margin等。

以下是代码部分：

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

    // 仅在结账页面运行
    if ( is_checkout() ) { ?>

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

    <?php
    }
}

现在，这是我的真正问题，是的，我已经尝试了各种CSS解决方案，因为产品删除具有<a class="">，但无论我做什么 - 从结账中删除产品的X显示在缩略图的右侧，直接在Product Name旁边。

我需要删除产品的X放置在缩略图的左侧。

以下是我正在使用的代码：

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 ) {

    // 仅在结账页面运行
    if ( is_checkout() ) {

    // 获取购物车
    $cart = WC()->cart->get_cart();

        // 循环遍历购物车
        foreach ( $cart as $cart_key => $cart_value ) {

            if ( $cart_key == $cart_item_key ) {

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

                // 这是我无法弄清楚的部分之一
                $remove_product = sprintf(
                '<a class="rpfc" href="%s" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&#10005;</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 ));
            }
        }

        // 获取产品数据
        $product = $cart_item[ 'data' ];

        // 在结账上显示图像，40*40像素
        $thumbnail = $product->get_image( array( 40, 40 ) );

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

        // 获取产品名称并将其链接起来。如果单击，将重定向到产品页面
        $product_name_link = '<a href="' . $product->get_permalink() . '">' . $product_name . '</a>';

        // 在图像之前删除产品
        // REMOVAL (on the left of the image) IMAGE PRODUCT NAME
        $product_name = $remove_product . $image_html . $product_name_link;
    }

    return $product_name;
}

英文:

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;



`}
`

答案1 {#1}

得分: 3

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" (thank you) 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;

英文:

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;