Archived topic
Float Price over product image in catelog
6 replies · Started by Koda on October 21, 2021
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
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;
}That was perfect! Thank you.
Can you help me remove the text "quantity" from each listing box? Thank you!
Or if you can help me change it to something else, that would be great.
Try this CSS to hide the quantitytext:
html[lang="en-US"] .product .quantity:before {
display: none;
}Amazing! Thank you!
No problem :)
