Style Woo – CSS code

Found this for a start. Still looking for styling of product gallery though 🙂

/********************************/
/*** WOO AND TWENTY SEVENTEEN ***/
/********************************/

/*** BREADCRUMBS ***/
.woocommerce .woocommerce-breadcrumb {
	font-size: 16px;
	font-weight: bold;
	color: #222;
}
/*** BREADCRUMB LINKS ***/
.woocommerce .woocommerce-breadcrumb a {
	color: #00707a;
}
/*** CHANGE COLORS ON THE FILTER DROPDOWN ***/
select.orderby { /* woocommerce class is purposely left off so other dropdowns can match but you can add it if you prefer */
	background: #00707a;
	color: #fff;
	font-weight: bold;
	padding-left: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/*** SINGLE GRID ITEM STYLING ***/
.woocommerce ul.products li.product {
	text-align: center; /* centers titles and prices */
	background: #f5f5f5; /* changes background color */
	padding: 1.5em 1em; /* adds space around entire product */
	transition: all 0.2s;
	-moz-transition: all 0.2s; 
	-webkit-transition: all 0.2s; 
}
.woocommerce ul.products li.product:hover {
	background: #fff; /* changes background color on hover */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* adds shadow on hover */
	-webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
/*** CHANGE COLOR ON SINGLE GRID AND RELATED PRODUCTS (THIS IS WHERE YOU CAN CHANGE THE FONT SIZE TOO IF YOU WANT) ***/
h2.woocommerce-loop-product__title,
.product .related h2 {
	color: #000; /* change color of product titles */
}
/*** ADD TO CART BUTTON ***/
.woocommerce ul.products li.product .button {
	display: inline-block;
	box-shadow: none;
	background: #333;
	color: #fff;
	font-size: 16px;
	padding: 8px 12px;
	margin-bottom: 0.5em;
	border-radius: 4px; /* makes rounded edges */
}
/*** CENTER STAR RATING AND MAKE STARS BIGGER ***/
.woocommerce ul.products li.product .star-rating {
	font-size: 18px;
	margin-left: auto;
	margin-right: auto;
}
/*** CHANGE STAR COLOR FROM THEME COLOR ***/
.woocommerce .star-rating span::before {
	color: #ffa500;
}
/*** CHANGE PRICE SIZE ON GRID AND RELATED PRODUCTS ***/
.woocommerce ul.products li.product .price, 
.woocommerce ul.products li.product .price del, 
.woocommerce-page ul.products li.product .price, 
.woocommerce-page ul.products li.product .price del {
	font-size: 18px;
}
/*** CENTER SALE BADGE AND CHANGE COLORS ***/
.woocommerce span.onsale, 
.woocommerce-page span.onsale {
	background: #FFA500;
	color: #fff;
	letter-spacing: 2px;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
/*** GET RID OF BLACK LINE UNDER IMAGE ***/
.woocommerce ul.products li.product img {
	border: 3px solid #fff; /* adds border around image and is optional */
	box-shadow: none;
	text-decoration: none;
}
a.woocommerce-LoopProduct-link, a.woocommerce-loop-product__link,
a.woocommerce-LoopProduct-link:hover, a.woocommerce-loop-product__link:hover,
a.woocommerce-LoopProduct-link:focus, a.woocommerce-loop-product__link:focus {
	box-shadow: none;
	outline: 0;
}
/*** REMOVE/CHANGE COLOR BEHIND PRICE ***/
.woocommerce ul.products li.product span.price ins {
	background: transparent; 
}

Testing the “Advanced WooCommerce Product Gallery Slider” plugin. A number of issues there….

Double image main image…
Variations Broke

Any ideas?

Austin

I’m not looking for a new theme. I’m looking for code to style woo under my existing theme thx