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; }
Related
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
I've searched around for a good while now trying to find a solution for this issue, but haven't seen anyone else experiencing it so far.
I have a WooCommerce store I'm working on developing, and recently noticed that the select field for the billing state is displaying list-style type bullets in front of the options when expanded.
I've messed around in the CSS including removing any background image and making sure there was no list-style attribute applied to the options, but I'm stuck on as to what's happening here.
The issue can be viewed live at this link: http://grahams.staging.wpengine.com/donate/
Does anyone have any ideas on what could be causing this? My guess is it's somewhere in the woocommerce files but I'm unsure as to where I would start looking.
List of Woo Extensions:
One Page Checkout
Name Your Price
WooCommerce Subscriptions
WooCommerce Variation
Swatches and Photos
Other than the above, no customizations have been made. Theme being used is Hybrid.
EDIT: adding an image for those who can't load it/are looking after it's been resolved.
Inspecting your CSS, there is a background image being applied to all ul li elements. See _elements.scss, line 96.
ul li { background: url(images/build/bullet.png) no-repeat 0 6px; }
Adding the following style fixes the issue.
.select2-results__option { background-image: none; }
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've inherited management of an existing Wordpress site that uses a custom Genesis child theme. I have attempted to set a full screen background image using the "Full Screen BG Image" plugin. However, the Home 2 area, used for a widget displaying latest posts, seems to have an irreversibly opaque background and the background image hides behind it. When I pull that section of the page down, I see the background image peek out from behind at the top. See It Here.
I am not a Wordpress expert, and I'm learning as I go. It would be amazing if there were a simple solution that would get our background image to display on our front page.
Thanks in advance, with apologies for my lack of knowledge!
The solid white background is set by your child theme's style.css file like so
.home-widgets-2 {
background-color: #fff;
...
}
You can just change that background-color statement to background-color: transparent; or background-color: rgba(255,255,255,.5); where .5 can be anywhere from 0 - 1 and controls the opacity.
You can either edit that in your style.css file itself (recommended if it's a child theme you manage/made) or you can add it in the Appearance > Customizer > Custom CSS section like so:
.home-widgets-2 {
background-color: transparent;
}
Using transparent makes it hard to read, so I'd suggest using the transparency options like rgba(255,255,255,.65)
I've recently started a new website with Wordpress through blue host.
I'm completely new to this and had never even heard of either of these programs up until last week.
I downloaded a theme from Mojo marketplace linked to blue host called Solstice. I've managed to make some customer changes and get some pictures and pages and post headers on there.
The only trouble I'm having right now is that I've wrote text in the About us section but it doesn't show up on the website. I haven't downloaded any plugins yet and the template it still set to default.
I have tried googling the answer but not had much luck.
Any help would be greatly appreciated.
www.2lostbuffaloes.com
As Naveed mentioned, the text color is white, over white background, that's why you can't see it. If you add to your css this rule:
body {
color #000000;
}
The text should appear.
You will probably also want to add white to the text color of the footer:
.footer-top, .footer-top a {
color: #ffffff;
}
In style sheet, you need to do
body{
color : #000000;
}
Right now its white color for text, if you do control A on about us page you will see all text.