Home › Forums › Basel support forum › receipt background in desktop checkout

receipt background in desktop checkout

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • March 22, 2019 at 12:38 pm #114318

    esthetis
    Participant

    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.
    March 22, 2019 at 8:29 pm #114393

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    March 23, 2019 at 12:37 pm #114452

    esthetis
    Participant

    HI,

    The problem persist after deactivaing all plugins.

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

    March 24, 2019 at 6:18 am #114515

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    March 24, 2019 at 1:36 pm #114565

    esthetis
    Participant

    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.
    March 25, 2019 at 10:48 am #114689

    Elise Noromit
    Member

    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

    March 25, 2019 at 10:55 am #114692

    esthetis
    Participant

    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.

    March 25, 2019 at 2:05 pm #114728

    Elise Noromit
    Member

    Hello,

    Please find attached screens from the phone.

    Best Regards

    Attachments:
    You must be logged in to view attached files.
    March 25, 2019 at 2:12 pm #114731

    esthetis
    Participant

    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.

    March 25, 2019 at 4:00 pm #114761

    esthetis
    Participant

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

    March 25, 2019 at 4:35 pm #114773

    esthetis
    Participant

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

    Attachments:
    You must be logged in to view attached files.
    March 25, 2019 at 7:39 pm #114796

    Elise Noromit
    Member

    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

    March 25, 2019 at 8:24 pm #114803

    esthetis
    Participant

    .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;
    }

    March 26, 2019 at 8:15 am #114876

    Elise Noromit
    Member

    Hello,

    Have you solved the issue?

    Best Regards

    March 26, 2019 at 9:53 am #114914

    esthetis
    Participant

    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.

    March 26, 2019 at 2:04 pm #115021

    Elise Noromit
    Member

    Hello,

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

    Then insert the color into the code

    Best Regard

    March 26, 2019 at 2:41 pm #115031

    esthetis
    Participant

    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

    March 26, 2019 at 4:03 pm #115052

    Elise Noromit
    Member

    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

    March 26, 2019 at 4:06 pm #115054

    esthetis
    Participant

    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

    March 26, 2019 at 6:36 pm #115099

    Elise Noromit
    Member

    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

    March 26, 2019 at 6:48 pm #115102

    esthetis
    Participant

    exact CSS code to add in custom CSS global please

    March 26, 2019 at 9:43 pm #115129

    Elise Noromit
    Member

    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

    March 27, 2019 at 9:23 am #115201

    esthetis
    Participant

    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

    March 27, 2019 at 4:33 pm #115330

    Elise Noromit
    Member

    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

    March 27, 2019 at 4:41 pm #115336

    esthetis
    Participant

    Why max-width 480px????

    It should work also on desktop

    March 27, 2019 at 4:46 pm #115339

    Elise Noromit
    Member

    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
Viewing 26 posts - 1 through 26 (of 26 total)