Sticky Add to Cart Change Background Color

This topic has 16 replies, 2 voices, and was last updated 10 months, 2 weeks ago by Hung Pham.

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
December 29, 2023 at 4:59 am #525378

peckmorrisom
Participant

my product page background color is black, and the default color for sticky add to cart is white, then my title color is also white, which makes the product title invisible on sticky add to cart. I’ve tried this custom css code, but it only changes the background color of a small area, please help me to change the whole background color of the sticky add to cart to black:
.wd-sticky-btn form.cart {
background-color: black;
}

Attachments:
You must be logged in to view attached files.

December 29, 2023 at 7:08 am #525388

peckmorrisom
Participant

That’s not the only issue, it seems the checkout page is having similar issue, is there a way to customize the style of the checkout page in woodmart theme?

Attachments:
You must be logged in to view attached files.

December 29, 2023 at 1:31 pm #525464

Hung Pham
Keymaster

Hi peckmorrisom,

Thanks for reaching to us.

I see the Sticky add to cart and checkout page are looking well https://prnt.sc/A8sdwfWP7S4O https://prnt.sc/Lc5QDgfsy8PD

Did you resolve background-color issue?

Regards,

January 3, 2024 at 1:47 pm #526390

peckmorrisom
Participant

Hi, you are checking the wrong website… I have several websites using your theme. the one I have an issue with is ceenr.com, however, it’s not published yet if you can give me your email, I’ll give you authority to enter the control panel, and you will see the issue from there. thanks

January 4, 2024 at 8:56 am #526623

Hung Pham
Keymaster

Hi peckmorrisom,

You can use any email, it doesn’t matter. Then send it to Private Content area, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

January 8, 2024 at 5:50 am #527668

peckmorrisom
Participant

Here you go

January 8, 2024 at 7:04 am #527676

Hung Pham
Keymaster

Hi peckmorrisom,

Thanks for details.

Admin credential is incorrect, please check again.

https://prnt.sc/weHe9vH1nDaI https://prnt.sc/pfhAwiYUmFOP

Regards,

January 9, 2024 at 5:31 am #528124

peckmorrisom
Participant

Ahh, please try this one then

January 9, 2024 at 7:09 am #528130

Hung Pham
Keymaster

Hi peckmorrisom,

It still doesn’t working, please check again.

https://prnt.sc/JKwvc409i67J

Regards,

January 10, 2024 at 4:33 am #528478

peckmorrisom
Participant

I see… Please try this one then, hope it works.

January 10, 2024 at 7:26 am #528489
Hung Pham
Keymaster
Hi peckmorrisom,

Thanks for reaching to us.

Please add the following code in Theme Settings > Custom CSS > Global Custom CSS
```
.woocommerce-checkout .checkout-order-review,
.woocommerce-checkout .woocommerce-order-pay #order_review,
.woocommerce-checkout .wd-table-wrapper,
.woocommerce-checkout .payment_methods .payment_box{
    background-color: #000;
}

.woocommerce-checkout .checkout-order-review .amount {
    color: var(--color-gray-500);
}
```
Regards,
January 10, 2024 at 11:03 am #528564

peckmorrisom
Participant

Hi, thanks for writing back, however, there are a few issues that stand, I’ve listed below:
1. The sidebar on collection pages is displaying the price color to be black(#000), I haven’t been able to find a place to alter that color individually without affecting other parts of the page.
2. The sticky add to cart bar at the button of the product page is not functioning properly, I hope the whole sticky add to cart area can be black, with white text colors, at the moment, people can’t see the product title because color issue.
3. On the checkout page, the price and the “UPDATE CART” button are in dark color… almost impossible to see, can I change their color to white without affecting the rest of the page? Thanks

Attachments:
You must be logged in to view attached files.

January 10, 2024 at 12:48 pm #528606

peckmorrisom
Participant

Meanwhile, I have found a empty space at every header section, I’ve checked header setting, element margin etc, but no luck. The only way for me to fix it is to give a -40 px margin to the section below, but I don’t think that’s the right way to do it, please help with this case as well. thanks

Attachments:
You must be logged in to view attached files.

January 10, 2024 at 12:51 pm #528617

Hung Pham
Keymaster

Hi peckmorrisom,

It seems you want to use Dark theme for your site, if so you can enable Dark theme option in Theme Settings > Styles and colors > Styles https://prnt.sc/uhHyWLC9AGFo

Then, you can change Primary color https://prnt.sc/E-tKrCP-jQmJ

Regards,

January 11, 2024 at 4:28 am #528870

peckmorrisom
Participant

Thank you, the sticky add-to-cart is fixed.
One problem that remains is the white space on my product pages, please refer to this page as an example.

https://ceenr.com/product/for-bosch-18v-power-tools-replacement-model-bat610g/

Please let me know how to remove the white space between the header and the product page body. Thanks

Attachments:
You must be logged in to view attached files.

January 11, 2024 at 4:49 am #528872

peckmorrisom
Participant

Hi the empty space is fixed, but the price text color on product page and collection page is too dark, I want to set it as white, do you know where to change it?

Attachments:
You must be logged in to view attached files.

January 11, 2024 at 8:32 am #528895

Hung Pham
Keymaster

Hi peckmorrisom,

There are 2 ways to do that:

1. Change Primary Color that I answered earlier https://xtemos.com/forums/topic/sticky-add-to-cart-change-background-color/#post-528617

2. In case you want to change the price of sticky add to cart only, then go to Theme Settings > Typography > Advanced. In this area, you can use Custom Selector and assign elements like screenshot https://prnt.sc/vmSUdW4o4fHF

p.stock.wd-style-default.in-stock:before, .wd-sticky-btn-cart .amount

Please refer to our documentation https://xtemos.com/docs-topic/advanced-typography-settings/

Regards,
Author

Posts