Title: Style Woo – CSS code Last modified: April 23, 2020 --- # Style Woo – CSS code * Resolved [hebhansen](https://wordpress.org/support/users/hebhansen/) * (@hebhansen) * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/) * Hey guys * My theme does basic stuff to theme woo shop, widgets sidebar, product page etc. * I am desperate to theme woo better. Is anyone willing to share their CSS for woo and maybe a link to the site, to see it in action. * Basically what I want * A simple and great looking product page Simplify the display of images. Not all at once, but maybe carousel. Nice looking form fields. Fx the drop down on shop front * In general, just something cool Viewing 7 replies - 1 through 7 (of 7 total) * Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/) * (@hebhansen) * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12720976) * 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; } ``` * Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/) * (@hebhansen) * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12724606) * I managed to change my filter dropdown in CSS above. “select.orderby” * How can I get to the rating dropdown at your rating… * I tried after checking code source (none of them work): select.comment-form- rating select.rating select.rate * Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/) * (@hebhansen) * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12724758) * Testing the “Advanced WooCommerce Product Gallery Slider” plugin. A number of issues there…. * Double image main image… Variations Broke * Any ideas? * [Austin M – a11n](https://wordpress.org/support/users/apmwebdev/) * (@apmwebdev) * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12727176) * Hi there! I would recommend looking at the styling in the [Storefront](https://woocommerce.com/storefront/) theme. That is our flagship theme and is designed to be simple and unobtrusive. You can view a demo of it [here](https://themes.woocommerce.com/storefront/). * I’m a big fan of the [Outlet](https://themes.woocommerce.com/outlet/) child theme as well. It is a bit more stylish than Storefront IMO, but, as a child theme of Storefront, it has the same clean aesthetic. * You can see all of our Storefront child themes [here](https://woocommerce.com/product-category/themes/storefront-child-theme-themes/). * Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/) * (@hebhansen) * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12732415) * Austin * I’m not looking for a new theme. I’m looking for code to style woo under my existing theme thx * [dougaitken](https://wordpress.org/support/users/dougaitken/) * (@dougaitken) * Automattic Happiness Engineer * [6 years, 1 month ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12782146) * Hey [@hebhansen](https://wordpress.org/support/users/hebhansen/) * Sounds like you’re looking for the WooCommerce Theme Developer Handbook – [https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/](https://docs.woocommerce.com/document/woocommerce-theme-developer-handbook/) * > Testing the “Advanced WooCommerce Product Gallery Slider” plugin. A number > of issues there…. > Double image main image… > Variations Broke > Any ideas? * For plugin specific queries, please post in the support forums for that particular plugin. * I hope this helps, have a great day! * Thanks, * [Austin M – a11n](https://wordpress.org/support/users/apmwebdev/) * (@apmwebdev) * [6 years ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12871954) * We haven’t heard back from you in a while, so I’m going to mark this as resolved. Feel free to start a new thread if you have any further questions! Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Style Woo – CSS code’ is closed to new replies. * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504) * [WooCommerce](https://wordpress.org/plugins/woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/) ## Tags * [code](https://wordpress.org/support/topic-tag/code/) * [css](https://wordpress.org/support/topic-tag/css/) * [woo](https://wordpress.org/support/topic-tag/woo/) * 7 replies * 3 participants * Last reply from: [Austin M – a11n](https://wordpress.org/support/users/apmwebdev/) * Last activity: [6 years ago](https://wordpress.org/support/topic/style-woo-css-code/#post-12871954) * Status: resolved