WooCommerce

WooCom­merce just got even sim­pler with Gen­er­atePress Pre­mi­um 1.8 . It would­n’t be a Flint Skin site of course if there was­n’t a lit­tle CSS and some Cus­tom func­tions. But the vast major­i­ty of what you see is styled through the Customizer. 

Woo Shop Page

New GP Premium 1.8 Features

• Dis­play mini cart sub-menu
  No more need for a plu­g­in with this beau­ti­ful min cart shown when hov­er­ing the nav cart icon
• Menu Item Con­tent
  Choice between Amount and Num­ber of Items. I have cho­sen the latter
• Dis­play cart pan­el on add to cart
  Replac­ing the stan­dard WooCom­merce add to cart noti­fi­ca­tion with a great slide out panel.

Shop Page Product — add to cart ( desktop )

Using a lit­tle CSS to cre­ate a show / hide on hov­er effect. This uses some CSS which you can find in the Cus­tomiz­er > Addi­tion­al 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 radius cor­ners have been added using the But­ton CSS which is cov­ered in the Styling Guide.

Sale Badge

To com­pli­ment the posi­tion­ing and round­ed cor­ners of the add to cart I used this CSS:

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

WooCommerce Sidebars — Common

The Site uses the stan­dard right hand side­bar, packed full of WooCom­merce wid­gets. There is of course some CSS to add the bor­ders, adjust padding & 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;
    }
}

Please see the sep­a­rate notes on the Sin­gle Prod­uct Sidebar

WooCommerce Single Product

The Sin­gle Prod­uct page has had some seri­ousl love applied with GP Pre­mi­um 1.8. Aside of the Hook Ele­ments at play and the lit­tle round­ed cor­ners on but­tons all of the styling is con­trolled from with­in the Cus­tomiz­er. Freak­ing awe­some. It is by virtue of these new fea­tures that means there is very lit­tle Woo CSS being used at all. So first off check out all the new fea­tures in Cus­tomiz­er > Lay­out > WooCommerce. 

New GP features

• Prod­uct Image area width
  Set to 65% as this site should be all about the image.
• Display add to cart pan­el on scroll
  Slid­ing into view when the on page add to cart is scrolled past keep­ing this impor­tant func­tion always in view
• Dis­play quan­ti­ty but­tons
  The new new + / — qty fields real­ly do add a touch of finesse

Then take a look at the few cus­tomiza­tions made using Hooks and the lit­tle extra CSS

Jump Link — Full Description

Using a Hook Ele­ment: Sin­gle Prod­uct Jump to Descrip­tion we have added a sim­ple jump link to take us from the sum­ma­ry to the Full Descrip­tion. Here is the HTML for that. It uses the cus­tom loud-link class on its con­tain­er to pro­vide the hov­er and arrow. It also uses the GP smooth-scroll class, with this option active in the Cus­tomiz­er > General

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

Variations background styling

Adding a lit­tle back­ground col­or and some padding to make prod­uct vari­a­tions stand out required this CSS:

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

Social Share

Using Jon Math­ers GP Social Shar­ing plu­g­in to dis­play social share links on Woo was easy. With­in the GP Social Share set­tings we have dis­abled the built in Hooks. Then cre­at­ing a Hook Ele­ment: Woo Social Shar­ing I sim­ply added the short­code and select­ed the ded­i­cat­ed woocommerce_share hook from the exten­sive list of hooks.

Single Product Sidebar

Big images and sharp sum­ma­ry is an impor­tant part of the design. This meant I had to sac­ri­fice some space with­out los­ing that impor­tant side­bar. So instead I moved the Side­bar below the sum­ma­ry. It took a few steps but all achiev­able with­in GP and the Cus­tomiz­er. Here’s how its done:

• Remove side­bar from default posi­tion
  Cus­tomiz­er > Lay­out > WooCom­merce –> Sin­gle Prod­uct > Side­bar Lay­out: Con­tent / No Sidebar
• Add the side­bar in a new posi­tion
  Hook Ele­ment: Woo Sin­gle Prod­uct Side­bar a sim­ple func­tion to hook the side­bar back in where I want­ed it.
• Then some cus­tom CSS to make sure it posi­tions cor­rect­ly on Desktop

Single Product Sidebar 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;
    }
}

Woocommerce Product Images

In the lat­est ver­sion of Woo they changed the way you size the images. In Cus­tomiz­er > WooCom­merce > Prod­uct Images you now have only two choices. 

• Main Image Width
  This is the image used on the Sin­gle Prod­uct. It has been set to 800px to match the sin­gle prod­uct image area width.
• Thumb­nail Width
  Set to 400px which is just right for the 2 col­umn lay­out. You may be inclined to reduce this if using more columns. But as there is no mobile option i leave this at 400px so it fits nice­ly on those plus size mobile devices.

The great part about the new Woo Prod­uct Images is that they auto gen­er­ate the sizes. No need to renegerate thumb­nails and they don’t inter­fere with your nor­mal WP thumb­nail sizes.

Image advice

Mak­ing your images look great in Woo takes a lot of upfront work. If you’re expect­ing Woo to do the mag­ic for you then you’re gonna get in trou­ble. Start off with this handy checklist:

• Aspect Ratio
  Con­sis­tent aspect ratio will erad­i­cate mis-align­ment of images in your grid or unsight­ly move­ment in your prod­uct gallery. Prefer­ably i would stick with square images. If that means edit­ing them in your favourite 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 divis­i­ble into your orig­i­nal image e.g
  Orig­i­nal: 1600px , Main: 800px , Thumb­nail: 400px.
  What you don’t want is odd sized images where they become blur­ry on resiz­ing due to stray frac­tions of a pixel.
• Set­ting your image sizes
  Load some over­sized images in your dum­my prod­ucts. Set the Cus­tomiz­er > WooCom­merce > Prod­uct Image sizes so they fill the con­tain­er. Now use the brows­er inspec­tor to see the size they are being dis­played in your Shop and Sin­gle Prod­uct. Make sure you done this after you have fin­ished your lay­out design.
• Mobile First
  Con­sid­er that your prob­a­bly gonna use a sin­gle col­umn for mobile. Which could mean it needs a wider image than those in the desk­top columns. Use this for your Thumb­nail size. Its no big issue that their larg­er then you need on desktop.
• Zoom
  The Prod­uct Gallery Zoom and Light­box will use the largest image it can get it hands on. So make sure your orig­i­nal image is larg­er then the Main Image width you have set.