How to remove "Hello Member" in Woocommerce Checkout page? - css

i want to remove this area, in checkout page, but every my try was not working. I tryed to insert this CSS:
.avada-myaccount-user-column .username {
display:none;
}
This is product that trying to insert into cart, for testing purposes. Someone to help me ?

.avada-myaccount-user-column.username {
display:none;
}
Use that ^. When you have two classes in a DIV you want to target, you don't have spaces between them to target. If it doesn't work, it's possible to override with custom templates. See https://docs.woocommerce.com/document/template-structure/ for theme overrides. Since you're using a premium theme, their support should be able to help you. If you do theme overrides, you should do them in a child theme so you can update the parent theme gracefully as updates come out.

.avada-myaccount-user-column .username will not work because .username is not a child of .avada-myaccount-user-column.
Change your CSS to:
.avada-myaccount-user-column.username {
display: none;
}
This example means the first class requires the second class for it to be affected.

Related

How to hide this .wpnotif_admin_conf .wpnotif_sts_logo (class) from WordPress Admin Area

I have tried this CSS, But not working, still showing.
.wpnotif_admin_conf .wpnotif_sts_logo {
display: none !important;
}
Now what I can use to hide this Class from the Admin Area?
Use a comma if these are 2 classes.
.wpnotif_admin_conf, .wpnotif_sts_logo {
display: none !important;
}
It depends on where you are adding the CSS. As this is a backend page, adding the CSS on style.css or additional CSS in Customizer won't work.
You need to add a custom CSS for the admin and mention the CSS there. Check admin_enqueue_scripts.

How to hide breadcrumbs from all pages in WordPress

I have been trying to remove this breadcrumb feature from my WordPress site but don't know how to do. Please help. It shows in every page.
I want to remove from all pages.
You can use this CSS:
nav.woocommerce-breadcrumb {
display: none;
}
This can be added via a child theme or within your WordPress Customizer
.
In your child-theme or custom CSS box, add the following code:
.woocommerce-breadcrumb {
display: none;
}
If that doesn't work, use !important like so:
.woocommerce-breadcrumb {
display: none !important;
}
Do not use !important unless necessary and only edit your child-theme or you will lose this modification on next theme update.
It's best to put the above code in the CSS box if your theme has one. It can usually be found under 'Theme Options' in wp-admin.
The code I gave will simply hide the concerned CSS class.
Hope this helps.

Cant find Wordpress Minimalist stylesheeet to change Span showing taxes

I Dont want this Span saying Taxes are included in the sale of this product, because this is an un-taxable product. My plan is just to change the color of text to hide it, but I cant seem to find the right area to change it.
Im using WordPress minimalist
Please follow the steps below to achieve what you want:
If you do not already have a child theme, create one with the name
YourThemeName-child in wp-content/themes. Replace YourThemeName
with the name of your theme.
Copy the CSS style from your main theme to your child theme.
Find the class of the element you want to hide by:
In Chrome: Right click on the element you want to hide and click on Inspect Element. From the console on the right, copy the CSS class of the element.
In your child theme CSS (the one that you copied from the main theme) add this code:
.element-class {
color: #ffffff;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
Or if you want to not display it completely:
.element-class {
display: none;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
To answer your question in the comments, yes, creating a new CSS file in child theme will override the main theme CSS.
Hope this helps.

Align these elements side by side in wordpress

i downloaded a plugin in wordpress called WP Hotel Booking using Divi Theme Builder.
This is his actual design in my site:
How can i align these elements side by side like this?
I guess the problem is since its a wordpress theme and i didnt created that one, i can only use css to try do these changes.
This is the actual website if needed to try with console: http://198.199.66.183/ (yep, no domain yet)
These are the css class:
.hb_input_date_check {
/* arrival/departure date*/
}
.entry-content .hotel-booking-search select {
/* adults/children */
}
.entry-content .hotel-booking-search form button {
/* the button */
}
Can someone please help me? Thanks!
Give this a shot:
Inside your custom styles for this respective website, add these styles to the parent wrapper of the form. I've tested this with your current code & theme, and it appears to work:
.hb-form-table {
display: flex;
justify-content: space-between;
}
What this will do is ensure that the items are in a flexible container, not allowing them to go to the next row. Some additional CSS will be required to ensure that the input fields all have the same padding, and height(s). If you're new to flex-box, here's a full guide on how to use it, along with all of it's attributes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Wordpress styling extra margin

I'm working on a Wordpress site and I'm quite new to this framework. There's some CSS on my page that's causing each "row of content" to have a 35px margin between it. This appears to be in a css class called wpb_row in a js_composer.css file. I'm not sure if this is some standard CSS class for Wordpress or if there's a global "have margin between each layer of content" setting.
Unfortunately I don't have 10 rep so I can't post an image of the page that's causing the issue but I can link to an image of where the issue is http://i.imgur.com/vEyznRn.png?1 and the url for the site is http://am12.siteground.biz/~youbambu/ecorecycling/
What's the best way to override a CSS class within Wordpress from a standard point of view? I've tried adding custom css to override this and remove the margin-bottom: 35px; in Appearence->Editor->Stylesheet.
Is it possible to either override this CSS in one global area? I'm using a theme called Picasso in wordpress if that's any help, but I don't see how to override this CSS.
To overrride the css use !important. So adding the following to your stylesheet should remove the margin bottom:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
}
Is it possible to either override this CSS in one global area? I'm using a theme called >>Picasso in wordpress if that's any help, but I don't see how to override this CSS.
I would be careful editing/modifying there because I suspect you will lose these changes/modifications on theme updates (which Picasso auto updates).
The theme has a designated place located at Theme Options > Tools > Custom CSS. The adjustments you add here are loaded on every page, just like the stylesheet in editor. Furthermore, these changes are not cleared upon update.
Just my two cents, hope it helps.
You can easily achieve this goal. This is not a WordPress standard or something.
you can edit js_composer.css and change what you want. OR
you can override this css rule adding a new role after js_composer.css loads. Something like:
<style>
.wpb_row { margin-bottom: 0px!important }
</style>

Resources