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.
Related
I have a problem that i try to change somthing in my site and no matter whhat i try its still there
Rule :
.woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { clear: both; }
Change:
.woocommerce form .form-row-wide, .woocommerce-page form .form-row-wide { clear: inherit!important; }
Don't work :
i tried from the customize
through the the actual path of the css
try to delete the all section
tried in min.css and regular.css
Path:
https://obeyyourbody.com/wp-content/themes/astra/assets/css/minified/compatibility/woocommerce/woocommerce-grid.min.css?ver=3.9.2
Checkout Page for the issue:
https://obeyyourbody.com/checkout/
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;
}
I am currently trying to change the text color of product variation drop down menu. Currently, when I use the drop down menu, the font shows up light gray on a white background and is hard to read. enter See snippet from siteIn addition, I want to change the font color for "Description" and "additional information". I am using wordpress and Catch Responsive theme.
While the actual CSS of the site would be nice to have, the main woocommerce.css file has the following selector:
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a
So, either in your child theme file or your Appearance > Customizer > Additional CSS you can add:
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: #333; /* Pick Color Here */
}
Inactive tabs have the selector: .woocommerce div.product .woocommerce-tabs ul.tabs li a
While those selectors are relatively overcomplicated, they're in the base CSS so you'll need a selector at least as specific to get them to work.
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 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)