Customizing WooCommerce mini cart-ajax.php template

Question

My PHP code is:

<ul class="minicart-content">
<?php foreach($woocommerce->cart->cart_contents as $cart_item_key => $cart_item): ?>
    <li>
        <a href="<?php echo get_permalink($cart_item['product_id']); ?>" class="product-image">
            <?php $thumbnail_id = ($cart_item['variation_id']) ? $cart_item['variation_id'] : $cart_item['product_id']; ?>
            <?php echo get_the_post_thumbnail($thumbnail_id, 'shop_thumbnail'); ?>
        </a>

        <div class="detail-item">
            <div class="product-details"> 
            <?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf( '<a href="%s" class="btn-remove" title="%s"><span></span></a>', esc_url( $woocommerce->cart->get_remove_url( $cart_item_key ) ), __( 'Remove this item', 'shoppystore' ) ), $cart_item_key ); ?>           
                <a class="btn-edit" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php esc_attr_e('View your shopping cart', 'shoppystore'); ?>"><span></span></a>    
                <p class="product-name">
                    <a href="<?php echo get_permalink($cart_item['product_id']); ?>"><?php echo esc_html( $cart_item['data']->post->post_title ); ?></a>
                </p>
                <div class="qty-number"><span><?php esc_html_e('Quantity: ', 'shoppystore'); ?> </span><?php echo esc_html( $cart_item['quantity'] ); ?></div>

            </div>

            <div class="product-details-bottom">
                <span class="price"><?php echo $woocommerce->cart->get_product_subtotal($cart_item['data'], 1); ?></span>
            </div>
        </div>
    </li>

<?php endforeach; ?>

</ul>

I am getting img with that code:

<img height="50px" width="50px" src="<?php  
echo $cart_item['product_id']; $feat_image = wp_get_attachment_url( get_post_thumbnail_id($cart_item['product_id']) );
echo $feat_image;
?>">

I also try to hard code img for testing

<img height="50px" width="50px" src="http://www.toys4all.pk/wp-content/uploads/2016/07/ttoys498_01_1600x1200QecQ.jpg" alt="message">

But it not showing the img or alt string.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You could try this. I have changed a little bit your code (see below for details):

<ul class="minicart-content">
<?php 
    foreach( WC()->cart->cart_contents as $cart_item_key => $cart_item ):
        $item = $cart_item['data']; 
        $item_id = $item->id;
        $qty = $cart_item['quantity'];

        /* // Optional (uncomment if needed, see below)
        if(!empty($item)){
            $product = new WC_product($item->id);
        } */
?>
    <li>
        <div class="detail-item">
            <div class="product-details"> 
            <?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf( '<a href="%s" class="btn-remove" title="%s"><span></span></a>', esc_url( WC()->cart->get_remove_url( $cart_item_key ) ), __( 'Remove this item', 'shoppystore' ) ), $cart_item_key ); ?>           
                <a class="btn-edit" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php esc_attr_e('View your shopping cart', 'shoppystore'); ?>"><span></span></a>    
                <p class="product-name">

                    <a href="<?php echo get_permalink($item_id); ?>">
                        <span class="product-image">
                        <?php 
                        if ( has_post_thumbnail( $item_id ) ) {
                            echo get_the_post_thumbnail($item_id, 'shop_thumbnail');

                            // OR you could try optionally (uncommenting here and above)
                            // echo $product->get_image();
                        } else {

                            // set correct dimensions for placeholder
                            echo '<img src="' . woocommerce_placeholder_img_src() . '" alt="Placeholder" width="25px" height="25px" />';
                        }
                        ?>
                        </span>
                        <span class="product-title"><?php echo esc_html( $item->post->post_title ); ?></span>
                    </a>
                </p>
                <div class="qty-number"><span><?php esc_html_e('Quantity: ', 'shoppystore'); ?> </span><?php echo esc_html( $qty ); ?></div>

            </div>

            <div class="product-details-bottom">
                <span class="price"><?php echo WC()->cart->get_product_subtotal($item, 1); ?></span>
            </div>
        </div>
    </li>

<?php endforeach; ?>

</ul>

Important:
• I have moved the product thumbnail just before the title.
• I prefer to use $item = $cart_item['data']; $item_id = $item->id; to get the product ID

Embeded product thumbnail & the product title in <span> tags inside a unique <a> tag:
I have embed the product thumbnail and the product title in <span> tags with a different class for each, for styling purpose.

Thumbnail after the title:
You can also move the thumbnail block just after the title, inside <p class="product-name"><a> tags.

I prefer using WC()->cart syntax instead of $woocommerce->cart (this is optional).

I have also shorten some repetitive arguments with variables at the beginning (this is optional).

Alternative: You have (just in case) is an alternative uncommenting this code:

   if(!empty($item)){
        $product = new WC_product($item->id);
    }

Then using $product with get_image() function instead:

echo $product->get_image();

References:

Customizing WooCommerce mini cart-ajax.php template

1 Answers1