Modifying expire notice appearance

  • Resolved ljackl

    (@ljackl)


    5 years, 4 months ago

    I’ve been wanting to change the look of the notices (remove 3px blue bar, change background color and text color) and I’ve been trying to modify the plugin CSS to do so.

    However, despite now having tried completely commenting out the default CSS (assets/css/woocommerce-cart-stock-reducer.css) and uploading to my website, no changes are being reflected.

    How would you go about making these changes?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author James Golovich

    (@jamesgol)

    5 years, 4 months ago

    In most cases I’m just using the existing WooCommerce notices, it’s only the ‘Please checkout within…’ notice that changing that css will affect.

    Are you trying to only style these notices or everything from WooCommerce?

    Thread Starter ljackl

    (@ljackl)

    5 years, 4 months ago

    I realized that the reason my changes weren’t being reflected were Chrome cache related. Sorry about that!

    All of the changes I wanted could be made via your wc-csr-info class.

    I’ve noticed something else which is odd. The notification interferes with the filtering and result count in certain resolutions:
    http://tinypic.com/r/jafn0g/9

    I’ve added a display: block; rule, but the notice remains in this awkward position. Is there anything I can do to ensure that the notice will be displayed on its own line?

    Plugin Author James Golovich

    (@jamesgol)

    5 years, 4 months ago

    That is odd, what resolution does that happen at and is it only with changes you made or with the default markup?

    Thread Starter ljackl

    (@ljackl)

    5 years, 4 months ago

    I believe it happens at any resolution, as the notice is appearing on the same line as the filtering options. It only becomes noticeable as the viewport becomes smaller (roughly 1720×1440).

    I tried making all of these elements block, however this doesn’t seem to change anything (whereas a change of color for example is reflected instantly).

    Plugin Author James Golovich

    (@jamesgol)

    5 years, 4 months ago

    I can’t seem to reproduce this at all.

    * What are you using to add the filtering options?
    * Can you share you’re exact changes?

    Thread Starter ljackl

    (@ljackl)

    5 years, 4 months ago

    Hey James!

    I managed to figure out the issue! I believe that my theme’s developer is using flexboxes as a way to make the page responsive.

    wc-csr-info is being placed inside of woo-top-page, which is a flexbox. All the filtering items and the notice is its own flexitem and all you have to do is make the class behave like a normal block element with this css:
    .wc-csr-info {
    flex: 0 0 100%;
    }

    Credit to this post over on SO for the css.

    Thanks for your help in any case!

    • This reply was modified 5 years, 4 months ago by ljackl.
    • This reply was modified 5 years, 4 months ago by ljackl. Reason: grammar
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Modifying expire notice appearance’ is closed to new replies.