How to drop sale flash over images in category view? (5 posts)

  1. sleepymonk
    Posted 2 years ago #

    I am trying to get the sale flash to overlay the images in category view. Right now, it's pushing the images down, so any item which is not on sale is out of line with the others. I'm sure there must be a fix for this but I just couldn't figure it out (I can get it to display behind the image, but it still takes up space on the page so affects row horizontal alignment)

    This is part of the code I am trying to edit.

    .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale {
    top: 0;
    right: 0;
    left: auto;
    margin: -6px -6px 0 0;


  2. Roy Ho
    Posted 2 years ago #

    li.product has to have the CSS of position:relative and as for your code, you're missing position:absolute;

  3. sleepymonk
    Posted 2 years ago #

    Hi splashingpixels, thanks for the suggestion.

    I made a brave attempt, but everything ended up on top of each other at the right side of the page! Not quite what I had in mind. I will try to experiment some more.

  4. Roy Ho
    Posted 2 years ago #

    If it ended up in top right of page it means you didn't do exactly what I told you to do.

    To summarize, the container of the element you want on top of must be of relative position and the element that you want at the corner must be absolute position and it has to come after the element you want on top in the dom.

  5. sleepymonk
    Posted 2 years ago #

    Your summary sounds great, easy to understand in that respect, but I just don't understand how to do it. I'm kind of slow in that respect.

    I figured out how to hide the sales flash in the category page [without it taking up space] and still have it show up on the product detail page, so that works ok for me for now, I can go on to other things.

    The most important thing was that I wanted my category images and text lined up horizontally without misalignments due to the sale flash. It would have been a bonus to have the sales flash overlay the image, but I guess I have to give up on that for now.

    Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic