Im having trouble customizing the background of the tables that show in the cart and the checkout page of my site. I am using Woocommerce, Elementor and the basic elementor theme Hello.
I am in the CSS folder and I've been able to change the color of one row, but weirdly it has like a color intercalation, ones being lightly grey and the other ones white.
How can I change all products containing rows in both the cart and the checkout?
Here you can see what im talking about, you have to add at least two products to the cart...
https://comercialplazalareina.cl/?page_id=14
Here, try adding this code to your theme's custom CSS
body .woocommerce table.shop_table td {
background-color: blue;
}
Change the color from blue to whatever you need.
Put the below Code End of style.css
For See Cart
.elementor-51 .elementor-element.elementor-element-5b22abc4 .elementor-button--view-cart {
background-color: #9fa0a0 !important;
}
For Finish Purchased
.elementor-51 .elementor-element.elementor-element-5b22abc4 .elementor-button--checkout {
background-color: #fff !important;
}
Save It
Then Refresh Hard Refresh using ctrl+f5 button in fontend
Related
I'm using WooCommerce with the Avada Fusion Theme, here is the demo store of the theme I'm using: https://avada.theme-fusion.com/bakery/shop/#start-shopping.
What I'm trying to achieve is, that the "Quick View" button on product thumbnail hovering is always displayed, even if a product is added to cart. I've added following CSS
.cart-loading {
display: none !important;
}
..which works just fine and hides "View Cart" on product hover. Now I'd like to display the Quick View Button when hovering (as if the product has not been added to cart) and tried to add:
.fusion-quick-view {
display: inline !important;
}
however this doesn't work.
Tried this and also failed:
.cart-loading:after {
display:.fusion-quick-view !important
;
}
Any suggestions as to how I can remove the "condition" that Quick View is not displayed when product has been added to cart?
I appreciate any pointers, thanks!
total beginner here, so apologies if this is not the place to post.
my site has a white background throughout but woocomerce has an annoying gray background around the edges of its pages (cart, checkout, product pages), and i was able to figure out that by adding the following code to Customize CSS section of my site fixed the problem
.woocommerce-cart, .single-product { background: white; }
BUT I cannot find the value to use for "checkout page" to change its background to white. i tried .woocomerce-checkout and woocomerce_checkout and .checkout. no luck :( any advice?
The body class of the woo-commerce checkout page is correct what you have mentioned (.woocommerce-checkout).
Please try adding !important flag to CSS property.
.woocommerce-checkout { background: white !important; }
I need to remove the hover animation on the product listing, When I place the mouse over a product listing it display some buttons to add to cart or add to the wishlist, and a transparent background is appearing as well. I want to hide these elements and display the product as it is.
An example can be found here, http://test.techvoip.it/staging/categoria-prodotto/monopattini/
I'm using Woocommerce and I'll be glad if someone can find me some sort of a solution.
Just insert this CSS code into the custom CSS setting.
.vgwc-item .ma-box-content:hover .vgwc-image-block a:before, .vgwc-item .ma-box-content:hover .vgwc-image-block a:after {
height: 0!important;
}
.vgwc-item .ma-box-content:hover .vgwc-image-block .vgwc-button-group {
display: none!important;
}
Try it and let me know if it does the trick for you.
I am trying to change the background colour of a menu in Wordpress.
The background is transparent for all other pages which is good, but for the homepage where the first element on the page below is a slider the menu remains grey and I cannot seem to change it without making it opaque for the whole site?
The page/site in question is http://nudda.com/new/home-2
I think you are using Wordpress for development, so you can add a specific ID to your home page, then you can use it to change the menu background just for home page,, you should do something like this:
#Your_ID #top-wrapper {
background-color: rgba(0,0,0,0.1);
background-image: none;
}
simple fix is
.page-id-2700 #top-wrapper{
// your background color here
}
page-id-2700 is the wordpress generated page class for home
First add custom CSS and JS plugin in case you don't have a place to add custom CSS.
Then, add this line of CSS code:
#top-wrapper {
background-color: #050505 !important;
}
I can see that you might have already have written that but without the !important.
What is happening is that the default style is overwriting the new style.
The !important will allow you to force overwrite it.
I'm having a problem with WooCommerce. I'm developing a website with Divi and WooCommerce. The buttons on the website have a specific style and I want that in the page products the buttons have the same style but I can't do it.
I installed the WooCommerce Color plugin but it doesn't work.
I have a child theme and on the developer console I looked for the specific class of this button and I found this class: ".single_add_to_cart_button button alt"
So in the CSS of the child theme I added:
.single_add_to_cart_button button alt {
color: #00000 !important;
}
But it doesn't work either.
This is the website: http://centromindfulnessmadrid.com/ and I want to change the buttons on these pages: http://centromindfulnessmadrid.com/producto/mindfulness-retiro-de-1-dia-sabado-24/ The button: "Añadir al carrito".
Thanks a lot!
I appreciate this is an old post, and it looks like you have resolved it, but the alt class would require a period as it is not an HTML element.
You will also have an inheritance issue as WooCommerce is very strict.
This would be closer to what you need, but you can probably narrow down the classes to one or two:
.woocommerce .single_add_to_cart_button button .alt {
color: #00000;
}