WooCommerce SiteWide Notice location

Hello Support,

I’m hoping you can provide some guidance on this issue. I’ve reached out to Woo, but didn’t receive anything very helpful.
I have US and CDN currencies enabled via WooCommerce ‘s core multi-currency functionality, no plugins are involved.
When visiting the site from a US-based IP address, the following notice is displayed:

“We noticed you’re visiting from the US. We’ve updated our prices to US dollars for your shopping convenience. Use Canadian dollar instead. Dismiss.”

This is expected behaviour, but in the Woodmart theme, it’s displayed below the footer where it’s not very noticeable. In the Astra theme, it’s displayed in the header with a purple background.

I haven’t had much success finding the correct CSS for this. Could you tell me how I could change the location to the top in Woodmart?

Thanks very much.
AM

Attachments:

You must be logged in to view attached files.

Hi amasterytchan,

Thanks for reaching to us.

First of all, take my apologies for the delay in answering because of the weekend.

I can’t access your site, please double check https://prnt.sc/dv21q7XBZovu

Meanwhile, could you please check how it works with some default WordPress themes like TwentyTwenty or WooCommerce Storefront to understand is it our theme issue or not?

Regards,

Hello Hung,

Should be accessible now.

The bottom placement is the default, even in Storefront, so I’m trying to override that and make it appear at the top as it does in the Astra theme.

You’ll have to connect from a US IP address to get the notice to appear, as in the screenshot.

Thanks,
AM

Hi amasterytchan,

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Regards,

[Hung Pham]

Hello Hung

Let me know if you need anything else.
AM

• This reply was modified 1 week, 5 days ago by Hung Pham.

Hello Hung,

I’m still working on it, but I think I’ve found the correct CSS to move the store notice to the top.
Please go ahead and close this.

Thanks,
AM

Hello Hung,

I spoke too soon. I’ve almost got it but could use your expertise to get it completely right. Please have a look.

This the CSS:
.woocommerce-store-notice {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 9999; /* Ensures the notice stays on top of other content */
background-color: #4497a6; /* Change to your site’s background color */
color: #ffffff; /* Change to your site’s text color */
font-size: 16px; /* Adjust based on your preference */
padding: 10px 20px; /* Adjust padding to better fit the content */
border-bottom: 2px solid #004970; /* Optional: adds a bottom border for contrast, change the color as needed */
}

.woocommerce-store-notice a {
color: #ffcc00; /* Change this color to make links stand out, if necessary */
}

/* body {
padding-top: 50px; /* Adjust this value based on the height of the notice to prevent content from being hidden behind it */
}

This moves the notice to the top but leaves a white banner even when the store notice isn’t active.

AM

Hi amasterytchan,

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

body.page{
    padding-top: 0;
}

Regards,

Hi Hung,

That worked. Thank you!

AM

Hi amasterytchan,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts