WooCommerce

WooCommerce just got even simpler with GeneratePress Premium 1.8 . It wouldn’t be a Flint Skin site of course if there wasn’t a little CSS and some Custom functions. But the vast majority of what you see is styled through the Customizer.

Woo Shop Page

New GP Premium 1.8 Features

Shop Page Product – add to cart ( desktop )

Using a little CSS to create a show / hide on hover effect. This uses some CSS which you can find in the Customizer > Additional 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 corners have been added using the Button CSS which is covered in the Styling Guide.

Sale Badge

To compliment the positioning and rounded corners 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 standard right hand sidebar, packed full of WooCommerce widgets. There is of course some CSS to add the borders, adjust padding & margins. 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 separate notes on the Single Product Sidebar

WooCommerce Single Product

The Single Product page has had some seriousl love applied with GP Premium 1.8. Aside of the Hook Elements at play and the little rounded corners on buttons all of the styling is controlled from within the Customizer. Freaking awesome. It is by virtue of these new features that means there is very little Woo CSS being used at all. So first off check out all the new features in Customizer > Layout > WooCommerce.

New GP features

Then take a look at the few customizations made using Hooks and the little extra CSS

Jump Link – Full Description

Using a Hook Element: Single Product Jump to Description we have added a simple jump link to take us from the summary to the Full Description. Here is the HTML for that. It uses the custom loud-link class on its container to provide the hover and arrow. It also uses the GP smooth-scroll class, with this option active in the Customizer > General

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

Variations background styling

Adding a little background color and some padding to make product variations stand out required this CSS:

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

Social Share

Using Jon Mathers GP Social Sharing plugin to display social share links on Woo was easy. Within the GP Social Share settings we have disabled the built in Hooks. Then creating a Hook Element: Woo Social Sharing I simply added the shortcode and selected the dedicated woocommerce_share hook from the extensive list of hooks.

Single Product Sidebar

Big images and sharp summary is an important part of the design. This meant I had to sacrifice some space without losing that important sidebar. So instead I moved the Sidebar below the summary. It took a few steps but all achievable within GP and the Customizer. Here’s how its done:

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 latest version of Woo they changed the way you size the images. In Customizer > WooCommerce > Product Images you now have only two choices.

The great part about the new Woo Product Images is that they auto generate the sizes. No need to renegerate thumbnails and they don’t interfere with your normal WP thumbnail sizes.

Image advice

Making your images look great in Woo takes a lot of upfront work. If you’re expecting Woo to do the magic for you then you’re gonna get in trouble. Start off with this handy checklist: