receipt background in desktop checkout

Hi,

I see that the receipt background is not displayed anymore in the desktop checkout.

We only see on mobile checkout.

Kind regards

Attachments:

You must be logged in to view attached files.

Hello,

The style has not been changed. Please deactivate all the plugins not related to the theme, and check again.

Best Regards

HI,

The problem persist after deactivaing all plugins.

Please test on admin access (private content) for http://staging.esthetis.ch

Hello,

Please clarify the problem. Which background do you mean? I check and see the background http://prntscr.com/n249ij

Best Regards

There was a grey background at ‘Your Order’ and ‘cart totals’

it was a grey background in a shape like the attached receipt/invoice

Attachments:

You must be logged in to view attached files.

Hello,

Here is the grey background in the cart http://staging.esthetis.ch/admin

Here is the grey background on the checkout http://prntscr.com/n2ky6e

Still is not clear what you mean.

Best Regards

Hi,

Please take your smartphone and go to checkout on http://www.dermastore.ch

You will see that there is a background at YOUR ORDER.

Hello,

Please find attached screens from the phone.

Best Regards

Attachments:

You must be logged in to view attached files.

Yes I know but it’s strange because it show the grey background if you see on the screen.

Please take a look on the display on smartphone and you see this background in a shape of invoice/bill.

Please check this background: images/checkout-border.jpg

the problem is with the background color that you changed in the last updates

Attachments:

You must be logged in to view attached files.

Hello,

Do you mean this background? https://gyazo.com/483282a94606bd6a8d3e5950c286c98e

We have not changed anything recently and long ago.

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 480px) {

body .woocommerce .cart-collaterals .cart_totals .responsive-table {
		background-color: #fff;
}
}

Best Regards

.woocommerce-checkout .checkout-order-review {
background-color: #f8f8f8;
background-image: url(images/checkout-border.jpg);
background-position: left top;
background-repeat: no-repeat;
padding: 40px 30px;
margin-top: 8px;
}

Hello,

Have you solved the issue?

Best Regards

No, the background color background-color: #f8f8f8; is too transparent on desktop and similar to white.

Please use another grey color, in order to see the background like in the smartphone.

Hello,

Use this or equivalent service to determine the color you want https://imagecolorpicker.com/

Then insert the color into the code

Best Regard

You should insert a right color in your theme by default.

I can see the backgorund only at night when the monitor switch to night mode.

The backgorund is not visible on normal monitor, only on smartphone

Hello,

We have not changed anything. I can not guess what grey do you prefer. Please chose the grey type and insert. Please note such kind of issue is out of our support. We just want to help you

Best Regards

Please let me know if you also don’t see the background on the LCD of your desktop

The screenshot you sent doesn’t show the background too

Hello,

We do not see this background.

We have provided the CSS code to set this background.

Please apply the code and insert the necessary color.

Best Regards

exact CSS code to add in custom CSS global please

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 480px) {

body .woocommerce .cart-collaterals .cart_totals .responsive-table {
		background-color: grey;
}
}

Best Regards

It seems that you still doesn’t undertand what I meant.. I sent you CSS for the right background and you answered with another CSS background

Hello,

If you want these styles:

.woocommerce-checkout .checkout-order-review {
background-color: #f8f8f8;
background-image: url(images/checkout-border.jpg);
background-position: left top;
background-repeat: no-repeat;
padding: 40px 30px;
margin-top: 8px;
}

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 480px) {

body .woocommerce .cart-collaterals .cart_totals .responsive-table {
background-color: #f8f8f8;
background-image: url(images/checkout-border.jpg);
background-position: left top;
background-repeat: no-repeat;
padding: 40px 30px;
margin-top: 8px;
}
}

If it is still not what you want, please find a developer who would do it for you. Such kind of issues is not covered by our support.

Best Regards

Why max-width 480px????

It should work also on desktop

Hello,

Take this code:

body .woocommerce .cart-collaterals .cart_totals .responsive-table {
background-color: #f8f8f8;
background-image: url(images/checkout-border.jpg);
background-position: left top;
background-repeat: no-repeat;
padding: 40px 30px;
margin-top: 8px;
}

Best Regards

[Author]

Posts