These instructions assume you have either the JetPack plugin active with the Custom CSS module option turned on or our Themedy Toolbox plugin active (version 1.0.3 or higher).

Read more about adding the custom css feature here.


You can these CSS blocks to your Appearance -> Edit CSS screen (see steps above if you don't have this option)

Make sure to start adding your CSS code after the intro text as explained here.

1. Remove "New" from product images on shop page

.newproduct {display: none;}

2. Hide Cart Contents button in header area & mobile header

.site-header .cart-contents {display: none;}
.menu-mobile .mobile-cart {display: none;}

3. Adjust product width on product listing pages

If you want to have more then 3 products per row then you'll also have to adjust the product width so they can all fit (adjust width % as necessary)

.woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product {width: 20.75%}

4. Disable image link on product pages main photo

a.woocommerce-main-image, a[woocommerce-main-image] {
    pointer-events: none;
    cursor: default;

5. Remove line to left and right of price on product single view

.woocommerce .summary p.price:before {background: none;}

6. Change the header color

.site-header {background-color: #fff;}

7. Change the top right header cart / login button colors

/* Login button */
.shop-menu .button {
    background: #000; 
    color: #DDD;
.shop-menu .button:hover {
    background: #fff; 
    color: #000;

/* Cart button */
.button.btn-primary {
    background: #000000;
    color: #dddddd;
.button.btn-primary:hover {
    background: #fff; 
    color: #000;

8. Change the main product image size

In version 1.0.3 of Patron or lower first add this CSS:

.woocommerce .images img {width: auto !important;}

Then see this tutorial for more info on how to change WordPress crop sizes, to adjust the actual size of the image. The image you are changing the crop size for is labeled "shop_single size"

9. Center the header image

.site-title {
    width: 100%; 
    text-align: center;

10. Change the height of the nav bar and/or spacing between menu items

 /* Change 34px to change the height and 26px to change the spacing between items. */
.genesis-nav-menu a {padding: 34px 26px;}

11. Show full menu in floating menu on desktop devices

/* You can change the 975px depending on what size screen you want it to switch back over to showing the mobile menu instead of the full menu. */

@media only screen and (min-width: 975px) {
  .fixed .toggle-menu, .fixed .toggle-account {
       display: none;

  .fixed .menu-primary {
       display: inline;

12. Change the slide out mobile menu colors

/* Overall background color */
.mm-menu {background: #fff !important;}

/* Menu links and hover links color / size */
.mm-list > li > a, .mm-list > li > span {color: #000 !important; font-size: 18px;}
.mm-list > li > a:hover {color: #CCC !important;}

/* Social Icons color */
.mm-list .fa {color: #000;}

/* Search Background / typed in text color */
#mobile-menu .menu-search .search-input {background: #CCC; color: #000;}

13. Change the height of the slider

/* Default unless screen sizes matches one of the below @media queries */
.featured-slider, .featured-slider .slide, .featured-slider .slide-wrap {height: 600px;}

@media only screen and (max-width: 1215px) {
    .featured-slider, .featured-slider .slide, .featured-slider .slide-wrap {height: 500px;}

@media only screen and (max-width: 975px) {
    .featured-slider, .featured-slider .slide, .featured-slider .slide-wrap {height: 400px;}

@media only screen and (max-width: 600px) {
    .featured-slider, .featured-slider .slide, .featured-slider .slide-wrap {height: 300px;}