Sticky Add to Cart Change Background Color

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.

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.

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,

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

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,

Here you go

Hi peckmorrisom,

Thanks for details.

Admin credential is incorrect, please check again.

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

Regards,

Ahh, please try this one then

Hi peckmorrisom,

It still doesn’t working, please check again.

https://prnt.sc/JKwvc409i67J

Regards,

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

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,

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.

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.

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,

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.

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.

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