The Shop

The advanced Woocommerce features in GeneratePress Premium 1.8 has allowed my to divulge in some new custom functions and styling. Upon visiting the Shop page you will see several custom elements and styles.

  • Category Navigation below entry title
  • Off Canvas Filter Toggle
  • Repositioned Breadcrumb
  • Minimal styled shop grid with hover add to cart effect

Hook Elements

Niche uses two GeneratePress Hook Elements. You can read the documents for hooks here. The shop uses two hook Elements.

  • Woocommerce Shop Category Menu
  • Woo Shop Filter and Breadcrumb

Both of these elements display rules are set to our Product Archive ( The Shop ) and Product Category Archives.

Hook #1 – Woocommerce Shop Category Menu

To aid with navigation across categories our first hook adds a simple category menu to the woocommerce_archive_description.

<?php
$orderby = 'name';
$order = 'asc';
$hide_empty = true ;
$cat_args = array(
    'orderby'    => $orderby,
    'order'      => $order,
    'hide_empty' => $hide_empty,
);
 
$product_categories = get_terms( 'product_cat', $cat_args );
 
if( !empty($product_categories) ){
    echo '
 
<ul class="woo-cat-nav">';
    foreach ($product_categories as $key => $category) {
        echo '
 
<li>';
        echo '<a href="'.get_term_link($category).'" >';
        echo $category->name;
        echo '</a>';
        echo '</li>';
    }
    echo '</ul>
 
';
}
?>

It simply outputs a list of all categories that contain a product. We then use some CSS to style the list:

.woo-cat-nav {
    list-style-type: none;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 80px;
}

.woo-cat-nav li {
    padding: 5px 0;
    margin: 0 10px;
    border-bottom: 1px solid #ccc;
    font-size: 0.95em;
}

As each of the list items are a link they get their colors from the link colors we set in the customizer. Apart from the border color which is within the CSS above.

Hook #2 – Woo Shop Filter and Breadcrumb

Then we add two functions to woocommerce_before_shop_loop hook. First is a custom Off Canvas Panel toggle and second is the Woocommerce Breadcrumb.

Woo Shop Filter

The first function in our hook is some simple HTML:

<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">FILTER</a></span>

The <span> tag contains three classes. The slideout-toggle is what GeneratePress requires to trigger the opening of the off canvas panel. The woo-filter-toggle is our own custom class we use to style and position the toggle. And lastly hide-on-mobile, i am sure you can figure out what this does.

For our woo filter toggle to appear we have set Customizer > Layout > Off Canvas Panel to display on Desktop and Mobile.

We now need to remove the toggle from the Primary Navigation on Desktop ( it’s default location ) we have to hide it using some CSS:

.main-navigation ul li.slideout-toggle {
    display: none !important;
}

Breadcrumb

Here is our second function to add our breadcrumb inline with our filter toggle:

<span class="hide-on-mobile"><?php woocommerce_breadcrumb(); ?></span>

It uses the default woocommerce function. So as it doesn’t display twice on the page we disabled the themes breadcrumb position in Customizer > Layout > Woocommerce.

Positioning and styling the filter and breadcrumb

Positioning and styling our toggle and breadcrumb requires this CSS:

.woo-filter-toggle,
.woocommerce.archive .woocommerce-breadcrumb {
    padding: 10px 0;
    margin-right: 20px;
    float: left;
    font-size: 14px;
    line-height: 20px;
}

To make room for our filter toggle and breacrumb and to keep the styles in line we need a little more CSS. First to shift over the product count and then style the sorting selector.

.woocommerce .woocommerce-result-count {
    float: right;
    margin-right: 20px;
}

.woocommerce-ordering select {
    text-transform: uppercase;
    max-width: 200px;
    border: 0;
}

Custom Post Grid

Most of our shop styling has been set using the Theme customizer, from typograpghy and colors to the layout of our shop and single product page. But to add a little something more unique the obligatory Flint Skin CSS magic has bee applied.

Custom CSS

Lets step through each of the changes:

Reduced grid Gap

No GeneratePress uses CSS Grid for the shop its super simple to reduce ( or increase ) our grid gap. This is being applied to all responsive sizes.

.wc-columns-container .products,
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products {
    grid-gap: 20px;
}

Remove Add to Cart button styling

I wanted a normal looking link for our add to cart by removing the padding and background color. and inheriting the body text color.

.woocommerce ul.products li.product a.button {
    padding: 5px 0;
    color: inherit;
    background-color: transparent;
}

Show Add to Cart / Hide Price on Hover

For our desktop view we can afford to hide our add to cart. I think it looks better then a page full of buttons.

@media (min-width: 768px) {

    .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover a.button,
    .woocommerce ul.products li.product:hover .price {
        transform: translateY(calc(-100% - 10px));
        opacity: 1;
    }

    .woocommerce ul.products li.product .price {
        opacity: 1;
        transition: all 0.4s;
    }

    .woocommerce ul.products li.product:hover .price {
        opacity: 0;
        transform: translateY(calc(-100% - 10px));
    }
}

5 bình luận về “The Shop”

  1. Needed to write you this very small word to help thank you very much yet again with the unique tricks you have shown on this website. This is so wonderfully open-handed with you to supply without restraint what exactly some people would have supplied for an electronic book to make some profit on their own, specifically since you might well have tried it in the event you wanted. Those tips likewise acted like a fantastic way to be sure that other individuals have similar dreams like my own to grasp a whole lot more in terms of this issue. I’m sure there are many more fun occasions ahead for individuals that go through your blog post. https://nujemznuedi.online/

    Trả lời
  2. I am commenting to let you know of the fantastic encounter my cousin’s daughter experienced reading your site. She even learned many issues, not to mention what it’s like to have a wonderful giving mindset to have many people just grasp chosen grueling subject areas. You really exceeded our expectations. Many thanks for distributing the informative, healthy, educational and as well as easy thoughts on the topic to Jane. https://lexaproescitalopram.com/

    Trả lời
  3. I simply wished to thank you very much yet again. I do not know what I would have worked on without those ways shown by you relating to this topic. This was the troublesome situation in my view, nevertheless witnessing your well-written way you treated the issue took me to weep with joy. Now i am thankful for your work as well as wish you recognize what an amazing job your are undertaking training the rest with the aid of your websites. Probably you haven’t met any of us. https://pamelornortriptyline.com/

    Trả lời
  4. I enjoy you because of all of your effort on this blog. Debby enjoys conducting internet research and it’s easy to see why. A number of us hear all about the compelling manner you create efficient guides by means of the blog and boost contribution from other ones about this article and my child has been being taught a great deal. Enjoy the remaining portion of the new year. You’re carrying out a fantastic job. https://venlorz.com/#

    Trả lời
  5. My wife and i have been so peaceful when Michael managed to finish up his researching via the precious recommendations he obtained using your web site. It is now and again perplexing to simply happen to be making a gift of techniques which often some others might have been trying to sell. We recognize we need you to give thanks to for that. The most important illustrations you have made, the simple web site navigation, the relationships you will help to instill – it’s got most overwhelming, and it’s really leading our son in addition to the family reason why the situation is exciting, which is rather mandatory. Thank you for the whole lot! https://tofranilimipramine.com/#

    Trả lời

Viết một bình luận