[Resolved] Float Price over product image in catelog

[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

[Ying]

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

[Koda]

That was perfect! Thank you.

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

[Koda]

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

[Ying]

Try this CSS to hide the quantitytext:

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

[Koda]

Amazing! Thank you!

[Ying]

No problem 🙂

[Author]

Posts