Question 3522 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to change Z-index for the price in Woocommerce?

I am using Woocmmerce with Astra theme and Elementor. I am already used to use CSS here and there to avoid using expensive plugins to adjust my Woocommerce shop. I decided to use price over the thumbnail and I made negative bottom padding for thumbnails to drag the price and "Add to cart" higher. I can see that button is definitely higher in z-index than a thumbnail. The problem is the price is completely hidden by the thumbnail, even though in Elementor it’s over the thumbnail. I tried to use z-index in CSS but to no avail. Am I missing something?
Here is an example of my CSS code for the price.

.woocommerce div.product p.price, .woocommerce div.product span.price{
    background-color: #fff;
    z-index: 99;
}
Tags:

2

Answers


  1. 0

    Maybe using !important, if z-index is already set somewhere else in .woocommerce:

    .woocommerce div.product p.price, .woocommerce div.product span.price {
    background-color: #fff;
    z-index: 99 !important;
}
    Login or Signup to reply.
  2. 0

    For an item to have a z-index, you have to set a position attribute other than static. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    .woocommerce div.product p.price, .woocommerce div.product span.price{
    background-color: #fff;
    z-index: 99;
    position: relative;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search