产品照片显示在Checkout（Wordpress / WooCommerce）产品列表上方

Question

在我的Wordpress网站上，使用WooCommerce，在Checkout页面上，我看到照片显示在Checkout的产品列表上方。如何让它们出现在产品列表中，如图所示？

这就是我现在所拥有的：

add_action('woocommerce_checkout_before_order_review', 'displays_cart_products_feature_image');
function displays_cart_products_feature_image() {
    foreach ( WC()->cart->get_cart() as $cart_item ) {
        $item = $cart_item['data'];
        if(!empty($item)){
            $product = new WC_product($item->id);
            // $image = wp_get_attachment_image_src( get_post_thumbnail_id( $product->ID ), 'single-post-thumbnail' );
            echo $product->get_image();

            // to display only the first product image uncomment the line bellow
            // break;
        }
    }
}

这与Get Cart products id on checkout WooCommerce page, to display product images。

有关

谢谢！

Answer 1

我们可以使用woocommerce_checkout_before_order_review过滤器而不是woocommerce_cart_item_name，而不是add_action('woocommerce_cart_item_name', 'displays_cart_products_feature_image', 10, 2 ); function displays_cart_products_feature_image( $cart_item_name, $cart_item ) { return ( is_checkout() ) ? $cart_item['data']->get_image() . $cart_item_name : $cart_item_name; } 。

.woocommerce-checkout-review-order-table .cart_item .product-name img {
    float: right;
}

这样做会将图像放在产品名称之前。如下图所示：

还不是我们需要的吗？是的，但它是我们能得到的最接近的东西。而只是一些CSS将解决问题。

priceData

如下所示：