Image Thumbnail in new checkout and page blocks - WooCommerce : FPD

V

V.I.

said 7 months ago

in my case, the customized product is displayed correctly on the cart page. But I would like it to be displayed on the checkout page as well

O

Olivia

said 6 months ago

Hi MichiK85 & V.I.

Here's a PHP snippet to add the product thumbnail to the checkout page in WooCommerce, specifically for the blocks-based checkout:

add_filter( 'woocommerce_cart_item_name', 'add_product_image_to_checkout', 10, 3 );
function add_product_image_to_checkout( $name, $cart_item, $cart_item_key ) {
    if ( ! is_checkout() ) {
        return $name;
    }
    $product = $cart_item['data'];
    $thumbnail = $product->get_image( array( 50, 50 ), array( 'class' => 'checkout-product-image' ) );
    
return $thumbnail . '<span class="product-name">' . $name . '</span>';
}

It uses the woocommerce_cart_item_name filter to modify the product name display.

The function add_product_image_to_checkout checks if we're on the checkout page using is_checkout().

If we are on the checkout page, it gets the product data and generates a thumbnail image with dimensions of 50x50 pixels.

You can adjust the dimensions by setting new values (i.e. array(150,150) )

The thumbnail is then prepended to the product name, and both are wrapped in appropriate HTML for styling.

To use this snippet: Add it to your theme's functions.php file or use a code snippets plugin.

You may need to add some CSS to style the image and name properly. For example:

.checkout-product-image {
    float: left;
    margin-right: 10px;
}
.product-name {
    display: inline-block;
    vertical-align: middle;
}

This CSS will align the image to the left of the product name.

Remember to test this on a staging site first to ensure it works well with your theme and doesn't conflict with any other customizations you might have

V

V.I.

said 6 months ago

Hi Olivia, your code adds another standard image of the product to the left of the image. But because you showed me that there is a way, this inspired me to look for solutions, so I used the information from the code written 8 years ago by Rafael here: https://support.fancyproductdesigner.com/support/ discussions/topics/13000000428

and with the help of chatgpt I managed to replace the standard image of the product on the checkout page with the image customized by the customer.

FPD has options in the settings to replace the cart image with the personalized one, but not in the checkout page, I hope this code is helpful, for me it works perfectly.

PHP code:

add_filter( 'woocommerce_cart_item_name', 'add_product_image_to_checkout', 10, 3 );

function add_product_image_to_checkout( $name, $cart_item, $cart_item_key ) {
    // Check if we are on the checkout page
    if ( ! is_checkout() ) {
        return $name;
    }

    // Get the product from the cart
    $product = $cart_item['data'];

    // Check if the product has data from Fancy Product Designer
    if ( isset( $cart_item['fpd_data'] ) ) {
        $fpd_data = $cart_item['fpd_data'];

        // Check if there is a custom thumbnail
        if ( isset( $fpd_data['fpd_product_thumbnail'] ) && ! empty( $fpd_data['fpd_product_thumbnail'] ) ) {
            // Use the custom thumbnail instead of the default one
            $thumbnail = '<img src="' . esc_url( $fpd_data['fpd_product_thumbnail'] ) . '" class="checkout-product-image" alt="Product Thumbnail" />';
        } else {
            // If there is no custom thumbnail, use the product's default thumbnail
            $thumbnail = $product->get_image( array( 50, 50 ), array( 'class' => 'checkout-product-image' ) );
        }
    } else {
        // If there is no FPD data, use the product's default thumbnail
        $thumbnail = $product->get_image( array( 50, 50 ), array( 'class' => 'checkout-product-image' ) );
    }

    // Return the thumbnail and the product name
    return $thumbnail . '<span class="product-name">' . $name . '</span>';
}

and here is the css code that hides the standard product thumbnail if the product is customized and aligns the image to the left of the text (this can be modified according to everyone's preferences) :

/* Hide the standard product thumbnail */
.woocommerce-checkout-review-order-table .product-name .product-item-thumbnail {
    display: none;
}
/* Align the custom thumbnail to the left of the title and set the dimensions */
.woocommerce-checkout-review-order-table .product-name .checkout-product-image {
    float: left; /* Align to the left */
    margin-right: 5px; /* Small space between image and text */
    width: 40px; /* Width */
    height: auto; /* Height */
}

Thank you Olivia for the inspiration, in one day you gave me two solutions that I had been looking for a long time to solve. :)

O

Olivia

said 6 months ago

@V.I. Awesome !
I'm glad you found a snippet meeting your needs !
My Woo theme doesn't show any pictures in the checkout and my FDP plugin is also well modified to suit my needs ... so my snippet works well for me ^^

Thanks for sharing your solution, I'm sure this will be useful to others.

Rafael D

said about 2 months ago

Currently the block API is still under development and not officially released by WooCommerce. We will wait for the stable version: https://woocommerce.com/document/woocommerce-store-editing/customizing-cart-and-checkout/