Divi gives the user a number of tools for development of nice looking websites. One of these is the “Custom CSS” field on the Theme Options page. (Other themes will have a different place for doing this. Know your theme.) The CSS that you enter here will cascade down to your plugins. If you use Woocommerce, because plugins exist as children to their (logical) parent themes, you gain a single source for a good amount of customization. Of course not everything you may need can be done here and the concept of a child theme has its place. But there is a lot of room to work in that one little box.
This post is just a few little CSS tidbits that I’ve done recently. Some are original with me and others have been gleaned from a variety of web searches.
#1 First, you may not wish to display an image with the categories. They take up space and bandwidth. This turns them off.
.woocommerce-page ul.products li.product a img
{
display: none;
}
#2 You can add style to your category titles.
.woocommerce-loop-category__title
{
font-size: 44px;
font-weight: bold;
font-style: italic;
}
#3 If you don’t like that highlighted counter, get rid of it.
.woocommerce-loop-category__title mark
{
display: none;
}
#4 As with the category title, add an alternate style to the product title.
.woocommerce-loop-product__title
{
font-size: 22px;
font-weight: bold;
font-style: italic;
}
#5 When you don’t need a post author and date displayed (as in e-commerce search results) just eliminate them.
/* hide author & date in search results */
.search-results .post-meta { display: none !important; }
#6 Your page header may have a border at the bottom. Sometimes it’s a nice touch but at other times you might want to part with it.
/* border removed from header */
#main-header{
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
#7 Give your site a fixed transparent footer.
/* transparent fixed footer */
#main-footer { background-color: rgba(0,0,0,0.5) !important; bottom: 0; position: fixed; width: 100%; z-index: 999; }
#8 You may not want to display related products. With some sites they do clutter the screen.
/* hide related products */
.related.products {
display: none;
}
#9 You may not want to show the author and date in the search results. Hide it this way:
/* hide author & date in search results */
.search-results .post-meta { display: none; }
#10 Perhaps your design makes use of the footer. But the footer may not work well on a mobile device. Sometimes there’s just too much stuff on that smaller screen. You’d like to turn it off, but only for mobile devices. This code verifies that the screen is small — any screen less than 995 pixels wide will not show the footer.
/* hide footer on mobile */
@media (max-width: 995px) {
#footer-bottom {
display:none;
}
}
#11 Finally, when you want to look at the CSS for a specific item use Inspect Element. I use Firefox for this. It works better than IE. On the right is the css that accompanies the highlighted image HTML line. You can quickly observe the classes assigned and so deal with a class of images (or other items) without having to dig through source code. One should, of course, practice proper development procedure and do one’s testing on a development system — never test in production!
