Merch Styling

Woo­Com­mer­ce

Creating compelling Woocommerce Sites just got even easier with GeneratePress Premium 1.8.

Woo­Com­mer­ce just got even simp­ler with Gene­rate­Press Pre­mi­um 1.8 . It wouldn't be a Flint Skin site of cour­se if the­re wasn't a litt­le CSS and some Custom func­tions. But the vast majo­ri­ty of what you see is sty­led through the Cus­to­mi­zer.

Woo Shop Page

New GP Pre­mi­um 1.8 Fea­tures

  • Dis­play mini cart sub-menu
    No more need for a plugin with this beau­ti­ful min cart shown when hovering the nav cart icon
  • Menu Item Con­tent
    Choice bet­ween Amount and Num­ber of Items. I have cho­sen the lat­ter
  • Dis­play cart panel on add to cart
    Repla­cing the stan­dard Woo­Com­mer­ce add to cart noti­fi­ca­ti­on with a gre­at sli­de out panel.

Shop Page Pro­duct — add to cart ( desk­top )

Using a litt­le CSS to crea­te a show / hide on hover effect. This uses some CSS which you can find in the Cus­to­mi­zer > Addi­tio­nal CSS. It looks like this:

.woocommerce ul.products li.product {
    overflow: hidden;
}

.woocommerce ul.products li.product:hover .button {
    -webkit-transform: translatey(0) !important;
    transform: translatey(0) !important;
}

.woocommerce ul.products li.product .button {
    font-size: 12px;
    line-height: 15px;
    padding: 8px 12px;
    min-height: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .woocommerce ul.products li.product .button {
        position: absolute;
        top: 0;
        -webkit-transform: translatey(-150%);
        transform: translatey(-150%);
        -webkit-transition: 0.35s;
        transition: 0.35s;
        margin-top: 10px;
        margin-left: 10px !important;
    }
}

The radi­us cor­ners have been added using the But­ton CSS which is cove­r­ed in the Sty­ling Gui­de.

Sale Badge

To com­pli­ment the posi­tio­ning and roun­ded cor­ners of the add to cart I used this CSS:

.woocommerce span.onsale {
    position: absolute;
    margin: 10px !important;
    border-radius: 4px !important;
}

Woo­Com­mer­ce Side­bars — Com­mon

The Site uses the stan­dard right hand side­bar, packed full of Woo­Com­mer­ce wid­gets. The­re is of cour­se some CSS to add the bor­ders, adjust pad­ding & mar­gins. It looks like this:

@media (min-width: 768px) {
    #right-sidebar {
        border-left: 1px solid #d6d7d8;
    }

    #right-sidebar .widget {
        margin-bottom: 0;
    }

    #right-sidebar aside:first-child {
        padding-top: 0;
    }

    #right-sidebar aside:not(:first-child) {
        border-top: 1px solid #d6d7d8;
    }
}

Plea­se see the sepa­ra­te notes on the Sin­gle Pro­duct Side­bar

Woo­Com­mer­ce Sin­gle Pro­duct

The Sin­gle Pro­duct page has had some seriousl love app­lied with GP Pre­mi­um 1.8. Asi­de of the Hook Ele­ments at play and the litt­le roun­ded cor­ners on but­tons all of the sty­ling is con­trol­led from wit­hin the Cus­to­mi­zer. Frea­king awe­so­me. It is by vir­tue of the­se new fea­tures that means the­re is very litt­le Woo CSS being used at all. So first off check out all the new fea­tures in Cus­to­mi­zer > Lay­out > Woo­Com­mer­ce.

New GP fea­tures

  • Pro­duct Image area width
    Set to 65% as this site should be all about the image.
  • Display add to cart panel on scroll
    Sli­ding into view when the on page add to cart is scrol­led past kee­ping this important func­tion always in view
  • Dis­play quan­ti­ty but­tons
    The new new + / — qty fields real­ly do add a touch of fines­se

Then take a look at the few cus­to­mi­za­ti­ons made using Hooks and the litt­le extra CSS

Jump Link — Full Descrip­ti­on

Using a Hook Ele­ment: Sin­gle Pro­duct Jump to Descrip­ti­on we have added a simp­le jump link to take us from the sum­ma­ry to the Full Descrip­ti­on. Here is the HTML for that. It uses the custom loud-link class on its con­tai­ner to pro­vi­de the hover and arrow. It also uses the GP smooth-scroll class, with this opti­on active in the Cus­to­mi­zer > Gene­ral

<p class="loud-link">
	<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>

Varia­ti­ons back­ground sty­ling

Adding a litt­le back­ground color and some pad­ding to make pro­duct varia­ti­ons stand out requi­red this CSS:

.woocommerce.single-product div.product form.cart .variations {
    background-color: #f2f3f4;
    padding: 30px 40px;
}

Soci­al Sha­re

Using Jon Mathers GP Soci­al Sharing plugin to dis­play soci­al sha­re links on Woo was easy. Wit­hin the GP Soci­al Sha­re set­tings we have dis­ab­led the built in Hooks. Then crea­ting a Hook Ele­ment: Woo Soci­al Sharing I sim­ply added the short­code and selec­ted the dedi­ca­ted woocommerce_share hook from the exten­si­ve list of hooks.

Sin­gle Pro­duct Side­bar

Big images and sharp sum­ma­ry is an important part of the design. This meant I had to sacri­fice some space wit­hout losing that important side­bar. So ins­tead I moved the Side­bar below the sum­ma­ry. It took a few steps but all achiev­a­ble wit­hin GP and the Cus­to­mi­zer. Here's how its done:

  • Remo­ve side­bar from default posi­ti­on
    Cus­to­mi­zer > Lay­out > Woo­Com­mer­ce –> Sin­gle Pro­duct > Side­bar Lay­out: Con­tent / No Side­bar
  • Add the side­bar in a new posi­ti­on
    Hook Ele­ment: Woo Sin­gle Pro­duct Side­bar a simp­le func­tion to hook the side­bar back in whe­re I wan­ted it.
  • Then some custom CSS to make sure it posi­ti­ons cor­rec­t­ly on Desk­top

Sin­gle Pro­duct Side­bar CSS

@media (min-width: 768px) {
    .single-product #right-sidebar {
        float: right;
    }

    .single-product div.product .woocommerce-tabs,
    .single-product div.product .related.products,
    .single-product div.product .upsells.products {
        width: 66%;
        display: inline-block;
    }
}

Woo­com­mer­ce Pro­duct Images

In the latest ver­si­on of Woo they chan­ged the way you size the images. In Cus­to­mi­zer > Woo­Com­mer­ce > Pro­duct Images you now have only two choices.

  • Main Image Width
    This is the image used on the Sin­gle Pro­duct. It has been set to 800px to match the sin­gle pro­duct image area width.
  • Thumb­nail Width
    Set to 400px which is just right for the 2 column lay­out. You may be incli­ned to redu­ce this if using more columns. But as the­re is no mobi­le opti­on i lea­ve this at 400px so it fits nice­ly on tho­se plus size mobi­le devices.

The gre­at part about the new Woo Pro­duct Images is that they auto gene­ra­te the sizes. No need to rene­gera­te thumb­nails and they don't inter­fe­re with your nor­mal WP thumb­nail sizes.

Image advice

Making your images look gre­at in Woo takes a lot of upfront work. If you're expec­ting Woo to do the magic for you then you're gon­na get in trou­ble. Start off with this han­dy check­list:

  • Aspect Ratio
    Con­sis­tent aspect ratio will era­di­ca­te mis-align­ment of images in your grid or unsight­ly move­ment in your pro­duct gal­le­ry. Pre­fer­a­b­ly i would stick with squa­re images. If that means edi­t­ing them in your favou­rite pho­to edi­tor and adding some white space than do so.
  • Image sizes
    Woo allows you to set the Thumb­nail and the Main Image. Ide­al­ly they should be equal­ly divi­si­ble into your ori­gi­nal image e.g
    Ori­gi­nal: 1600px , Main: 800px , Thumb­nail: 400px.
    What you don't want is odd sized images whe­re they beco­me blur­ry on resi­zing due to stray frac­tions of a pixel.
  • Set­ting your image sizes
    Load some over­si­zed images in your dum­my pro­duc­ts. Set the Cus­to­mi­zer > Woo­Com­mer­ce > Pro­duct Image sizes so they fill the con­tai­ner. Now use the brow­ser inspec­tor to see the size they are being dis­play­ed in your Shop and Sin­gle Pro­duct. Make sure you done this after you have finis­hed your lay­out design.
  • Mobi­le First
    Con­si­der that your pro­bab­ly gon­na use a sin­gle column for mobi­le. Which could mean it needs a wider image than tho­se in the desk­top columns. Use this for your Thumb­nail size. Its no big issue that their lar­ger then you need on desk­top.
  • Zoom
    The Pro­duct Gal­le­ry Zoom and Light­box will use the lar­gest image it can get it hands on. So make sure your ori­gi­nal image is lar­ger then the Main Image width you have set.
    Item added to cart.
    0 items - CHF 0.00