I'm working with WooCommerce, and I'm trying to style a table that lists all the products on the shopping cart page, so that it becomes responsive. However, I keep running into problems, and now I've been stuck for several hours trying to figure out what's wrong. I can't set a width for anything there. It's like all the tds have magic padding around them, and as a result I can't set a max-width: 100%; for the table.
Here's a link to the problem (might be you have to add a product to the basket to see the issue)
Appreciate any help :)
For anyone having the same issue with Woocommerce where the cart page tables not being responsive, this is how I fixed it:
.woocommerce table.cart th,
.woocommerce table.cart td,
.woocommerce #content table.cart th,
.woocommerce #content table.cart td,
.woocommerce-page table.cart th,
.woocommerce-page table.cart td,
.woocommerce-page #content table.cart th,
.woocommerce-page #content table.cart td,
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
min-width: 30px;
}
For some reason which I don't really understand, all the table heading and table data needed to have a min-width.
That works for viewport with 384px and above, but doesn't seem to work below that. I added max-width: 49px; for down to 360px and then max-width: 39px; for 320px viewport. Hope that helps someone.
Thanks for the work on that!
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.
How can I turn our product list into landscape orientation? It doesn't seem to look good when our product list is on portrait. There's a lot of white space. Would really like to fix this. Here's a link to the site: http://aom.sg/product-category/air/airdisinfect/ Thank you for your help! TT
This is only a CSS matter. There's a style on your page that just needs an !important tag to override the width of the product item. Change it to this:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 100% !important;
}
Here's how it'll look like:
To make sure it doesn't affect the other pages, you might want to wrap the whole content of this page in a div and add that to the CSS selector like this:
<div class="products-wrapper">
<ul class="products">
<!-- product list -->
</ul>
</div>
Then on your CSS:
.woocommerce .products-wrapper ul.products li.product,
.woocommerce-page products-wrapper ul.products li.product {
width: 100px !important;
}
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)