I was wondering, is it possible to remove product related information from the checkout page (this should only be visible in the shopping cart)
Thanks a lotenter image description here
You can hide with css:
Add css code to your child theme's stylesheet
Or via Customiser > Additional CSS
.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody { display: none; }
Related
I have a menu in WordPress site with 4 items
- Home
- Portfolio
- Team
- Connect
I want to highlight menu item of current page being visited but each page should have different color. For example if I visit home page the Home menu item should be green.
If I visit portfolio page then portfolio menu item should be green.
you can use like this
ul li.active:first-child {
color:blue;
}
ul li.active:nth-child(2) {
color: red;
}
ul li.active:nth-child(3) {
color: green;
}
I found a solution. Since theme is based on Twitter Bootstrap an .active class is added to the current page's menu item being visited. Therefore, I added a separate class like .home for home page, .portfolio to portfolio page, and then chain the classes to take effect like this.
.navbar-nav > .home.active > a {
color: green !important;
}
Notice the .home.active classes are chained.
Following threads on SO were helpful.
css select an element with 2 class
CSS Selector that applies to elements with two classes
My product names are very long and they need to stay long.
When the breadcrumb shows the product page, if the screen is small (for example mobile view) the breadcrumb overflows the layout and it causes the browser not to show the page correctly.
I tried to add <p class="overflow-ellipsis"> and also <p class="overflow-visible">to the DIV of the product page which did not work, I tried to add text-overflow: ellipsis; and also text-overflow: visible; to the css in breadcrumb section, which also did not work, I also changed the white-space: nowrap; in breadcrumb css to white-space: normal; and it still did not fix the issue.
Here is a link to one of my pages for example, please make the screen small or see in mobile to replicate the issue.
http://www.nativeamericanwholesale.com/$80-tag-authentic-made-by-charlene-little-navajo-kingman-turquoise-wrap-bracelet
I will need the product name to stay in layout (frame) and preferably goes to second line instead of overflowing the page.
Please note that I do not want to use hidden visibility or anything to cut it out due to SEO issues.
Set white-space for your breadcrumbs:
.breadcrumb > li {
white-space: normal!important;
}
I used !important to override any other code for .breadcrumb > li, but you should know this is not a good practice.
I confirm white-space: normal (and white-space: break-all) isn't enough for OpenCart's breadcrumb issue.
.breadcrumb>li:after{top:50%;transform:translateY(-50%) rotate( -45deg );}
.breadcrumb>li{white-space:normal;display:table-cell;vertical-align:middle;}
.breadcrumb>li:last-child::after{display:none;}
This will fix your issue.
Add this thing to your class.
.breadcrumb li > a {
white-space: normal;
}
Here you need to use .breadcrumb li > a because product name inside a tag in future if will add any other tag inside then li then it will affect to everywhere so better is to used .breadcrumb li > a.
I'm working on a WordPress site (using a child theme of Divi) & having an issue with the WooCommerce Shop. The individual Product pages are not displaying the Add to Cart button or the price. Those elements are there (I can highlight over them on the page & click the area where the button should display) but they're hidden for some reason. Anyone know how to make them display?
Here is an example page. Thanks!
I saw your product page, It just a CSS issue, put the following css snippet on your theme's style.css
.woocommerce button.button.alt {
background-color: #a46497 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: #77a464 !important;
}
Is there a way to change the font in my main navigation menu without changing the fonts on the drop downs under them? I'm using Wordpress with a Genesis child theme. This is my site. I just want to change the font on the gray navigation bar, not the links under them.
make CSS rules to this class
.genesis-nav-menu>li>a {
//some CSS
}
Just use the direct child selector example header > ul {font-family:Arial} this will select only the direct children of the header element but not anything deeper
In your style.css on line 948 you have this block of style:
.genesis-nav-menu .menu-item {
text-align: left;
}
Change it to have the font-family declaration in it e.g. if you have Verdana font to add for menu links:
.genesis-nav-menu .menu-item {
text-align: left;
font-family: Verdana;
}
It will change font for all menu links in Genesis theme, but will not effect any other links in the theme.
I want to hide a div on a specific WordPress page by overriding the original CSS. This is my code:
body.page-id-7 #thumbnails .controls { display: none !important; }
However this does not work. #thumbnails is the id of a Div which contains another div with the class "controls". Any idea why this does not work. The page I am looking at is http://who.designbond.co.uk/ and I want to hide the arrows at the bottom right of that specific page.
Thanks in advance for your help.
If it's the home page you want to hide this on, this should be enough:
.home .controls {display: none;}
The home page body element doesn't have a class of page-id-7, though, so I wonder if I'm looking at the right page?
This is the correct code:
body.home.fullsize-gallery #thumbnails .controls { display: none !important; }
I was referencing the page by its id, whereas I should have referenced the page by its post name, that is "home".
add to CSS .rel .controls {display: none;}