You can alter the size and position of the notice, relative to the browser window, with some custom css, for example:
p.demo_store {top: 50px; left: 50px; width: 20%}
If you want to put it in a different place within the markup, you will need to alter the code and this is likely to be a lot of work.
If you want to put it in a different place within the markup, you will need to alter the code and this is likely to be a lot of work.
That’s exactly what i wanna do, but I can’t find the place for it within the markup.
@raimorrison
Make a child theme and put your new code in the child theme’s functions.php.
The store notice markup is in the footer. It only displays at the top due to css. wc-template-hooks.php contains the footer hook:
add_action( 'wp_footer', 'woocommerce_demo_store' );
You don’t want to be editing WC core files because your customisations will be overwritten at next update. To remove the above hook, see this page for the function you will need to use.
Next, make a new hook to insert the woocommerce_demo_store function where you want it to go. A list of hooks is here.
In css, alter the p.demo-store position property from fixed to static, otherwise it will still show at the top.
Try the following code:
nav.col-full {
margin-top: 125px !important;
}
/*
DESKTOP STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (min-width: 1028px) {
/* Desktop styles go here */
nav.col-full {
margin-top: 50px !important;
}
}
@media only screen and (min-width: 541px) and (max-width: 1028px) {
nav.col-full {
margin-top: 75px !important;
}
}
@media only screen and (min-width: 295px) and (max-width: 541px) {
nav.col-full {
margin-top: 125px !important;
}
}
I need to still try and find a way that this code can automatically be injected once you enable the store-wide text but at the moment at least it is working and not covering the cart button
Bear in mind also, that is only for the amount of text that I have in there.
I also haven’t worked out how to make it change based on the amount of text, and when it will shift from one line, to two lines, to three lines etc of text as you shrink the screen width
Try:
Mystile
Settings > Layout Options
Enable boxed layout
Woocommerce Site-Wide Store Notice occupies a section on top and stays there even as you scroll down. Basically an overlay. Enabling boxed layout puts more space on top.
I had the same problem (using the Canvas theme from WooThemes). My code to solve:
.woocommerce-demo-store #top, .wocommerce-demo-store .nav-toggle {
margin-top: 4em !important;
}
p.demo_store {
z-index: 8999;
}
@media screen and (max-width: 767px) {
p.demo_store {
top: 70px;
}
}
@media screen and (max-width: 500px) {
p.demo_store {
top: 60px;
padding: 5px;
}
}
@media screen and (max-width: 400px) {
p.demo_store {
top: 50px;
padding: 2px;
}
}
