Mobile cart screenshots have irregular borders

Mobile cart screenshots have irregular borders

How do I show product images on the checkout screen, the code I used after the last update no longer works consistently. Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

I added

[Elise Noromit]

Hello,

Please add this code to the Theme Settings > Custom CSS > Global to fix the border radius for products on the checkout:

@media (max-width: 768.98px) {
:is(.woocommerce-cart-form__contents,.group_table) td.product-thumbnail {
	border-radius: calc(var(--wd-brd-radius) / 1.5);
	}	
}

The order table in checkout never had product images on our theme. If you switch to any other theme or Storefront they would not appear either.

We have not modified the checkout template in the recent version.

If you have any questions please feel free to contact us.

Best Regards

• This reply was modified 2 years, 1 month ago by Elise Noromit.

I managed to put a product image on the payment screen, only the css code is required for the product information to appear next to the images. If you help with this, we can share it with friends in the group, thank you.

Show product picture at checkout

add_filter( 'woocommerce_cart_item_name', 'db_product_image_on_checkout', 10, 3 );
 
function db_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
     
    /* Return if not checkout page */
    if ( ! is_checkout() ) {
        return $name;
    }
     
    /* Get product object */
    $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
 
    /* Get product thumbnail */
    $thumbnail = $_product->get_image( array( 1200, 600 ) );
 
    /* Add wrapper to image and add some css */
    $image = '<span class="db-product-image">'
                . $thumbnail .
            '</span>'; 
    $name = '<span class="db-product-name">' . $name . '</span>';
    /* Prepend image to name and return it */
    return $image . $name;
}

css

/*checkout screen product image and border location  */
.db-product-image img {
    min-width: 80px;
    max-width: 80px;
    border-radius: calc(var(--wd-brd-radius) / 1.5);
 
}

link: https://www.exgeer.com/odeme/

Attachments:

You must be logged in to view attached files.

Hello,

We are glad you have found the solution. Please note we do not guarantee the performance of any custom code.

In case, you have any issues, first of all disable the custom you have added.

If you have any questions please feel free to contact us.

Best Regards

You can close the topic.

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts