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 :)
Related
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 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 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 want to remove(hide) bullets (dots) with css code, but I can`t
Please tell me what I do wrong:
1) I give class name in my case: .no-bullets
2) I use this css code:
.no-bullets {
list-style-type: none;
}
this is not working for me...
Then I use this css in theme stylesheet:
ul
{
list-style-type: none !important;
}
again nothing...
Please help me with this, thank you in advance
here is my suggestion:
ul {
list-style: none;}
the list-style properties apply to elements with display: list-item only ,make sure your list elements doesnt have any other display style.UPDATE
seeing your link your style.css file is overriding your custom style with list-style-type: disc; you have to get rid of this line.
UPDATE 2use this code in your custom css .entry-content ul > li {
list-style-type: none !important;
}
this will do the job quickly.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
This is probably a really simple fix but I've looked all over and I cannot get this to work. The issue is with WooCommerce in wordpress, I believe my overall CSS is overiding that of WC and causing me some colour issues.
Here is the page - http://www.chaotopia.com/product/connect-your-breath-bklt-cd/
I am trying to change the background of the product description from white to #272727 and the text to #ffffff. Also as you can also see the selected tab is white as is the text which is not ideal.
I'm assuming this is a CSS issue I've tried various things but cannot get it to work.
Can someone please guide me as to where and what I need to edit to fix this?
Many thanks!
Use following css in your active theme's stylesheet
.woocommerce div.product .woocommerce-tabs .panel{
background-color: #272727;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
background-color: #d3ced2;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
color:#272727;
}
This should fix the problem. You can change the color values to what ever desired.
EDIT:
.single-product.woocommerce #primary div.product .woocommerce-tabs .panel{
background-color: #272727;
}
.single-product.woocommerce #primary div.product .woocommerce-tabs ul.tabs li{
background-color: #d3ced2;
}
.single-product.woocommerce #primary div.product .woocommerce-tabs ul.tabs li.active a{
color:#272727;
}