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;
}
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;
}
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;
}
Related
I'm tryin to make the product image transparent on archive pages when hovering the list item. I've been able to get the title and price to hide, but have yet to figure out the image while hovering the list item. I'm doing this to show the short description which is behind the image.
This is what I have so far.
.woocommerce ul.products li.product:hover .price, .woocommerce ul.products li.product:hover
.woocommerce-loop-product__title {
opacity: 0;
}
I can get the image to go transparent when hovering the image itself, but not when hovering the list item.
.woocommerce ul.products li.product a img:hover {
opacity: 0;
}
You can do so by hovering to li, and it's child goes transparent.
.woocommerce ul.products li.product:hover a img {
opacity: 0;
}
i have one little but very weird CSS issue with my personal site. I found one CSS glitch on one button into my account page from Woocommerce.
when check CSS for that button, i found this class that use that settings:
.woocommerce a.button, .woocommerce-page a.button, .woocommerce button.button, .woocommerce-page button.button, .woocommerce input.button, .woocommerce-page input.button, .woocommerce #respond input#submit, .woocommerce-page #respond input#submit, .woocommerce #content input.button, .woocommerce-page #content input.button {
border: 1px solid #ddd;
background: #fff !important;
box-shadow: none;
}
if i untick background: #fff !important; then button is back to normal look. I searched everywhere to find that CSS class, but looks like that class dont exist.. How to find where is posted that CSS and modify the class. This is test logins if someone want to check , because issue is not visible without login.
User = test
Pass = test5
URL
Any help?
The style that you have identified is the one that causes the trouble. It is not present in an external stylesheet. Instead, it has been added inline. You may view it by Right click -> View Source.
To modify the style, either look in the custom styles added from the Appearance > Customize > Additional Styles or in the theme's header.php file and make the necessary changes.
I have a product page here: http://www.noliftpalletmover.com/order/
I would like to always show Add to Cart rather than having it appear on hover. I have tried some CSS fixes but to no avail. Any suggestions?
In your stylesheet http://www.noliftpalletmover.com/wp-content/themes/konstruct/assets/css/style.css?ver=1.1.1 at line number 6421, position of add to cart button (class name .woocommerce .products li .add_to_cart_button, .woocommerce-page .products li .add_to_cart_button) is set to "absolute". Remove "position", "left", "right" and "z-index" from that class declaration. And comment out class declaration at line number 6165 which as transform: translateY. That should do the trick for you.
Hope this helps.
You can use a plugin like Simple Custom CSS to add the following CSS to your site:
.woocommerce .products li .add_to_cart_button, .woocommerce-page .products li .add_to_cart_button {
position: inherit !important;
bottom: 0 !important;
margin-top: 15px !important;
}
If this answers your question please mark it as the answer :)
I'm trying to change the font size and color of product's price in the products page. I added this to my custom css to try to override the original css, but no matter what, it does not work.
.woocommerce ul.products li.product .price {color:#ec7f91;font-size:16px;}
or
.woocommerce ul.products li.product .price {color:#ec7f91;font-size:16px;!important}
Any ideas?
First of all, it's probably because all the other styles are overwriting it.
Second, the !important needs to be on both, not just one, and it needs to be inside the semicolon.
Fixed up code:
.woocommerce ul.products li.product .price {
color:#ec7f91 !important;
font-size:16px !important;
}
I am using Woocommerce plugin for my shopping cart and I have trouble with links and it is only for Woocommerce pages. When I click on a.button div it moves for 4px to the top. I cant find source of this issue. Try to click on thumb or on black button down there.
http://valeka.net/higher/?post_type=product
Can you help me to see what am I missing?
It's likely a border-top: 4px in normal state vs a border-top: 0px when :active possibly from an inherited reset style sheet for the :active state.
For example when disabling the following:
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
...
{
// margin: 0px;
The movement seems to not affect the add-to-cart button anymore (but it still affects the product image).
For button.button you have:
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce #content input.button:active,
.woocommerce-page a.button:active,
.woocommerce-page button.button:active,
.woocommerce-page input.button:active,
.woocommerce-page #respond input#submit:active,
.woocommerce-page #content input.button:active
{
top: 1px;
}
Once removed this will stop the filter button from moving 1px when active.
Found it:
this here is causing the image & button to go up:
.woocommerce ul.products li.product:active,
.woocommerce-page ul.products li.product:active {
margin-top: -1px !important;
}
layout-1200.css => line° 2992, disable it, or remove it.
When seeing the name off the CSS file, i guess, you have to do it in an override, or in all CSS (i think there will be mobile CSS's to)