Skip to content

Instantly share code, notes, and snippets.

@diogenesjup
Created September 15, 2016 02:55
Show Gist options
  • Select an option

  • Save diogenesjup/bf87514122dc777f1b6836bcf5bb272e to your computer and use it in GitHub Desktop.

Select an option

Save diogenesjup/bf87514122dc777f1b6836bcf5bb272e to your computer and use it in GitHub Desktop.
WooCommerce custom CSS example
/* WOOCOMMERCE */
span.onsale{
display: none;
}
h1.product_title.entry-title{
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
margin-bottom: 12px;
font-size: 1.95em;
}
.woocommerce-Tabs-panel h2{
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
margin-bottom: 27px;
font-size: 1.60em;
}
h1.page-title{
display: none !important;
}
ul.products{
margin-top: 68px !important;
}
.cart_totals.calculated_shipping h2,.related.products h2{
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
margin-bottom: 27px;
font-size: 1.60em;
}
.woocommerce-billing-fields h3,.woocommerce-shipping-fields h3,h3#order_review_heading{
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
margin-bottom: 27px;
font-size: 1.60em;
}
.woocommerce-billing-fields label,.woocommerce-shipping-fields label{
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
font-weight: 400;
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
background: #fff !important;
border-radius: 5px;
}
/* GERENCIA NET */
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 1em;
margin: 1em 0;
font-size: .92em;
border-radius: 2px;
line-height: 1.5;
background-color: #efefef !important;
color: #515151;
}
#add_payment_method #payment div.payment_box:before, .woocommerce-cart #payment div.payment_box:before, .woocommerce-checkout #payment div.payment_box:before {
content: "";
display: none !important;
border: 1em solid #efefef !important;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
position: absolute;
top: -.75em;
left: 0;
margin: -1em 0 0 2em;
}
/* GERENCIA NET */
.woocommerce table.shop_table th {
font-weight: 700;
padding: 9px 12px;
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
font-weight: 400 !important;
}
.woocommerce-Tabs-panel h3,.woocommerce-Tabs-panel h4,.woocommerce-Tabs-panel h5,.woocommerce-Tabs-panel h6{
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
margin-bottom: 27px;
}
.woocommerce ul.products li.product h3 {
font-weight: 400 !important;
font-family: 'Open Sans', sans-serif;
color:#a1a1a1;
text-transform: uppercase;
font-size: 1.15em !important;
}
.woocommerce ul.products li.product span.price{
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size: 1.12em !important;
font-weight: 400 !important;
}
.woocommerce ul.products li.product .price ins {
background: 0 0;
font-weight: 400 !important;
}
.woocommerce ul.products li.product .price del {
color: inherit;
opacity: .5;
display: inline !important;
padding-right: 5px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background-color: #efefef !important;
display: inline-block;
position: relative;
z-index: 0;
border-radius: 4px 4px 0 0;
margin: 0 -5px;
padding: 0 1em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background: #fff !important;
z-index: 2;
border-bottom-color: #fff !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: inherit;
text-shadow: inherit;
font-family: 'Open Sans', sans-serif !important;
color:#a1a1a1 !important;
font-weight: 400 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: inherit;
text-shadow: inherit;
font-family: 'Open Sans', sans-serif;
color:#ff5f5f !important;
font-weight: 400;
}
p.price{
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size: 1.55em !important;
font-weight: 400 !important;
}
span.woocommerce-Price-amount.amount{
color:#fb605e !important;
}
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins {
background: inherit;
font-weight: 400 !important;
text-decoration: none !important;
}
table.variations .label,table.variations * .label {
display: inline;
padding: .2em .6em .3em;
font-size: 90%;
font-weight: bold;
line-height: 1;
color:#212121;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 400 !important;
}
.input-text.qty.text{
height: 31px;
}
.woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover {
background-color: #53d9ff !important;
color: #fff;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover {
background-color: #53d9ff !important;
color: #fff;
}
.woocommerce ul.products li.product .button,.woocommerce ul.products li.product .button:hover {
margin-top: 1em;
background-color: #53d9ff !important;
color: #fff !important;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
text-align: center !important;
}
.woocommerce-MyAccount-navigation{
margin-bottom: 45px;
text-align: center;
}
.woocommerce-MyAccount-navigation ul{
padding-left: 0px;
margin-left: 0px;
}
.woocommerce-MyAccount-navigation ul,.woocommerce-MyAccount-navigation ul li{
display: inline;
list-style: none;
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 400 !important;
padding-left: 15px;
padding-right: 15px;
}
.woocommerce-MyAccount-navigation ul li a{
color:#ff5f5f;
}
li.is-active a{
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 700 !important;
}
/* WOOCOMMERCE */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment