[Resolved] Float Price over product image in catelog

Home Forums Support [Resolved] Float Price over product image in catelog

Home Forums Support Float Price over product image in catelog

  • This topic has 6 replies, 2 voices, and was last updated 3 months ago by Ying.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1971078
    Koda

    Hi there,

    I love this design, however, I want to simplify the catelog like I had in my previous theme. See here how I used to have it: https://defythegrid.com/wp-content/uploads/2021/10/defythegrid-screenshot.jpg

    How do I float the price over the image?
    How do I remove the “quantity” text above the “add to cart” button? Idealy I would like the number input to the left of the “add to cart” button if possible. See my product page here: https://defythegrid.com/goldbacks/

    Thanks for your help

    #1971099
    Ying
    Staff
    Customer Support

    Hi Koda,

    The quantity text is not added by the theme, can you check if there’s a setting to remove the text within the plugin (quantity field on shop page for Woocommerce)?

    For the floating price, try this CSS:

    body:not(.single).woocommerce ul.products li.product .price {
        position: absolute;
        top: 0;
        right: -10px;
        background-color: grey;
        color: white;
        padding: 10px;
    }
    
    body:not(.single).woocommerce ul.products li.product .price:after {
        content:'';
        position:absolute;
        bottom: -5px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 10px 0 0;
        border-color: black transparent transparent transparent;
    }
    #1971197
    Koda

    That was perfect! Thank you.

    Can you help me remove the text “quantity” from each listing box? Thank you!

    #1971198
    Koda

    Or if you can help me change it to something else, that would be great.

    #1971213
    Ying
    Staff
    Customer Support

    Try this CSS to hide the quantitytext:

    html[lang="en-US"] .product .quantity:before {
        display: none;
    }
    #1971220
    Koda

    Amazing! Thank you!

    #1971225
    Ying
    Staff
    Customer Support

    No problem 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.