How do I remove these sections on woocommerce "shopping cart" page? Preferably with CSS (I'm using Site Origin CSS plugin to edit my CSS).
I found CSS code to remove "has been added to your cart" text but it did not work...
.woocommerce-checkout .woocommerce .woocommerce-message {
display:none !important;}
And while we are at it, how do I replace quantity and add to cart button with custom button (my image) for it to look like this? This is how it looks now.
Thank you.
Unless .woocommerce and .woocommerce-message are children of .woocommerce-checkout, this will not work. If these are classes styling separate elements, put a comma between them, like .woocommerce-checkout, .woocommerce, .woocommerce-message{...}
Also, make sure that these are the classes you really want to disable. Often times in WP sites, there are 10+ classes on a single element and it can be difficult to make sure you're targeting the right one. .woocommerce, for example, seems like a generic class, so hiding it could break other things throughout the site.
Related
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.
How to change the background and text color of every read more button on my website?
The site has "swift" theme.
There should be a option in Wordpress admin panel to edit website's appearance, including font size, color and stuff like that. I have not worked on the Swift theme but from the little experience I have, theme's options have such features to modify color/size/font without having to write CSS for it.
OR you can add custom CSS to your website, but for that you will need to write CSS which may overlap with other settings on the website if not done carefully.
The 'Read More' element has 'moretext' class, so you need to work on CSS to customize it. Something like this:
.moretext { background: #ffffff; color: 000000; }
Here's the documentation https://codex.wordpress.org/Customizing_the_Read_More
I use Chrome development tools to inspect a header color I want to change:
I have located it, and I can change it in the inspector view, but I want to change it for real, so I need to know where the CSS is … but it says that it is a index file (index) 573.
What does this mean?
It is a wordpress theme and more specifically it is the woocommerce plugin
You can try overriding in style sheet using more descriptors in CSS.
Maybe something like:
html body .woocommerce-page form table.shop_table thead {
background-color: #333333 !important;
}
You could click where it's indexed in the Element inspector to bring up the CSS file. It's probably min'd so I'd recommend using PrettyPrint. That should show you, unless I misunderstood.
Here's a screen shot album I put together. I have Devtools Author so ignore the silly UI http://imgur.com/a/4JrKA
I have installed a plugin in wordpress that creates image thumbnails and displays links for all the subpages of a particular page. It is being displayed on the front page of this website.
The plugin is called AutoNav. More info here.
The plugin FAQ says the following about what classes are created to create the table:
table elements: subpages-table
tr elements: subpages-row
td elements: subpages-cell
p elements inside each td: subpages-text
Thumbnail images: subpages-image
Excerpt text: subpages-excerpt
My question is how I should go about formatting my CSS to change these settings. Should I just create classes with those names?
Lastly, the links that the plugin generates work on initial page load, but once the page completely loads, the links seem to stop working and just become text. Not sure what the issue is.
My question is how I should go about formatting my CSS to change these
settings. Should I just create classes with those names?
Yes. These are the classes the plugin generates and applies to the elements in the html.
For example if you wanted to add a border to the thumbnail images you would apply the styles to .subpage-image class.
.subpage-image {
border:1px solid #000;
}
Lastly, the links that the plugin generates work on initial page load,
but once the page completely loads, the links seem to stop working and
just become text. Not sure what the issue is.
This is being caused by your slider. Once it is fully loaded the div #slider overlays your content making the links unclickable.
To fix this give #slider height:280px;
Is there a simple way to create a customer menu in WordPress that does not output a list? Basically I want a menu with pipes between the links. Every solution I've found says to style them with a right border or background image, but I'm not crazy about this solution and what if I wanted something like a "/" or "»" between each link? I think live type would look better too. I already know I can remove the container div and ul tags using "items_wrap" and "container". Any ideas on how to ditch the li's too and add separators? A filter or hook?
I'm looking to do this with WordPress functionality. I know I can resort to CSS and jQuery if needed and in fact am doing that, but I'm still curious as to how to override the menu system.
Just style the list propperly
li { list-style-type:none; }
li:before { content:"/ "; }
http://jsfiddle.net/sVvs8/