e-Commerce Street sign

Woocommerce Tips and Tricks

These are a collection of tips and tricks I’ve found while tweaking sites. Some are from experimenting others where for a specific need.

Store Notice

The store notice has simple controls. The most common need is to change it’s appearance or location. The built-in customizer allow to schedule when the notice will display as well as turn it off or on but for anything else you need to tweak the CSS. The notice is controlled by the .demo-store class selector.

The default store notice location is at the top of the screen for most themes. It often interferes with the top menu area or other popup notifications. Easy way to move it to the bottom of the page. Try this.

.demo_store {
/* this sets it to hover at the bottom of the current screen */
    position: fixed;
/* how close to the bottom */
    bottom: 0;
/* controls the spacing */
    top: 95%;
/* force the notice to the top of any styling */
    z-index: 999;
}

To make it float at the bottom of the page add this to the above code.

.demo_store {
/* make it float */
    position: relative;
}

A more complicated example

.demo_store {
    background-color: #0f0f0f;
    bottom: 0px; 
    color: #ffffff;
    left: 0;
    right: 0;
    margin: 0;
    padding: 1em;
    text-align: center;
    position: fixed;
    z-index: 999;
}

Did you get a clue?

If you got a clue and want to thank me, then visit the thank me page. It’s the best way to keep me publishing articles and keeping this site operation.

This site uses affiliate links. When you go to another site from here the link typically will have an affiliate code attached to it. Your actions on that site may earn a small commission for me. Read our affiliate link policy for more details.

{fin}

Scroll to Top