Important! Official Thesis Skins from DIYthemes already include full WooCommerce compatibility. This guide is for developers who wish to extend compatibility to their custom Skins.
Extending Thesis’ WooCommerce compatibility to Skins is a relatively simple process consisting of two parts: functional compatibility within templates (which happens in skin.php) and stylistic compatibility with CSS. We’ll look at both pieces below.
Templates
The Thesis Skin API includes a special method—woocommerce()—that makes it easy for you to add hooks, filters, or other actions necessary to refine WooCommerce template compatibility.
At a minimum, you’ll want to check the following WooCommerce page types and specialty pages for proper output with your Skin’s templates:
- Shop
- Single Product
- Product Archive
- Cart
- Checkout
- My Account (and associated sub-pages)
After you’ve done this, you’ll want to move on to CSS compatibility to ensure your templates display properly in the WooCommerce environment.
CSS
To enhance WooCommerce compatibility, Thesis automatically adds <body> classes to two types of WooCommerce pages:
- Shop —
woocommerce-shop - Product Archives —
woocommerce-archive
Depending on the way your Skin is constructed, you will likely need to use at least these two classes in some of your CSS declarations.
If your Skin uses an unorthodox WordPress Loop or Post Box construction, you may need to make other significant adjustments.
For example, some Skins wrap the entire layout in a WordPress Loop and/or Post Box in order to serve headlines or featured images in a “featured area.” These Skins will likely require more in-depth treatments for perfect WooCommerce compatibility.
For more “traditional” Skins, the following CSS—which comes from the Classic Responsive Skin—should cover nearly all the WooCommerce elements that call for special treatment:
I’ve tried to be clear here, but I need to reiterate: The following CSS is from the Classic Responsive Skin. The precise CSS you’ll need for your Skin will certainly be different, but the basic element targeting will be quite similar.
/*---:[ basic WooCommerce styles ]:---*/
.woocommerce-shop .content {
padding: $x_single;
}
.woocommerce-archive .content {
padding: 0 $x_single;
}
.woocommerce-archive .post_box {
margin: 0 -$x_single $x_single -$x_single;
}
.woocommerce-archive .term-description {
margin-bottom: $x_single;
}
.woocommerce-result-count {
font-size: $f_aux;
line-height: $h_aux;
color: $text2;
}
.woocommerce .content > .product {
margin: $x_single $x_single 0 $x_single;
}
.woocommerce-shop .page-title, .woocommerce .product_title {
$headline
}
.woocommerce .page-title {
padding: 0 $x_single $x_single;
border-bottom: 1px solid $color1;
margin: 0 -$x_single $x_single -$x_single;
}
.woocommerce .product_title {
margin-bottom: $x_half;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers {
margin: -($x_half / 2) 0 $x_half 0;
}
.woocommerce .products a.button, .woocommerce .cart button.button, .grt .woocommerce input.button, .woocommerce .grt input.button, .woocommerce .grt #respond input#submit {
font-family: inherit;
line-height: 1em;
padding: 0.5em 0.75em;
}
.woocommerce #comments {
margin-top: $x_single;
}
.woocommerce #reviews h2 {
margin-top: 0;
}
.woocommerce #commentform {
padding: 0;
margin-top: $x_single;
}
/*---:[ Checkout and Account Details ]:---*/
fieldset legend {
font-weight: bold;
}
.grt fieldset {
margin-top: $x_single;
margin-bottom: $x_single;
}
.grt fieldset legend {
margin-bottom: $x_half;
}
In addition, you’ll want to make sure you accommodate a wide range of input types and button elements in your CSS. This is what that looks like in the Classic Responsive Skin:
/*---:[ inputs ]:---*/
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], select, textarea, .input_text {
font-family: inherit;
font-size: inherit;
line-height: 1em;
font-weight: inherit;
color: $text1;
border: 1px solid $color1;
background-color: $color2;
padding: 0.35em;
box-sizing: border-box;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, .input_text:focus {
border-color: $color2;
background-color: $color3;
}
textarea, textarea.input_text {
line-height: inherit;
}
/*---:[ buttons ]:---*/
button, input[type="submit"], .input_submit {
font-family: inherit;
line-height: 1em;
font-weight: bold;
border: 3px double $color1;
background-color: $color3;
padding: 0.5em;
}
button:hover, input[type="submit"]:hover, .input_submit:hover, button:active, input[type="submit"]:active, .input_submit:active {
background-color: $color2;
transition: background-color 0.3s;
}