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;
}