The Shop - TheSilverRings

Die erweiterten Woocommerce-Funktionen in GeneratePress Premium 1.8 haben es mir ermöglicht, einige neue benutzerdefinierte Funktionen und Designs zu veröffentlichen. Auf der Shop-Seite sehen Sie mehrere benutzerdefinierte Elemente und Stile.

Category Navigation unterhalb des Eintragstitels
Off Canvas Filter Toggle
Repositioned Breadcrumb
Minimal gestaltetes Shop-Grid mit Hover-Add zum Kartoneffekt

Table of Contents

Hook Elements

Niche verwendet zwei GeneratePress Hook Elements. Sie können die dokumente für hooks hier. Der Shop verwendet zwei Hook Elements.

Woocommerce Shop Category Menu
Woo Shop Filter und Breadcrumb

Beide dieser Elemente Display-Regeln sind auf unser Produktarchiv ( The Shop ) und das Produktkategorie-Archiv eingestellt.

Hook #1 - Woocommerce Shop Category Menu

Um die Navigation über Kategorien hinweg zu erleichtern, fügt unser erster Haken ein einfaches Kategorienmenü zum 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>
 
';
}
?>

Es gibt einfach eine Liste aller Kategorien aus, die ein Produkt enthalten. Wir verwenden dann etwas CSS, um die Liste zu stilisieren:

.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;
}

Da jeder der Listeneinträge ein Link ist, erhalten sie ihre Farben aus den Linkfarben, die wir im Customizer einstellen. Abgesehen von der Randfarbe, die innerhalb des obigen CSS liegt.

Hook #2 - Woo Shop Filter and Breadcrumb

Dann fügen wir zwei Funktionen zu woocommerce_before_shop_loop hook. Zunächst ist eine maßgeschneiderte Off Canvas Panel toggle und zweitens ist die Woocommerce Breadcrumb.

Woo Shop Filter

Die erste Funktion in unserem Hook ist etwas einfaches HTML:

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

The <span> tag enthält drei Klassen. Die slideout-toggle ist das, was GeneratePress benötigt, um das Öffnen des Off-Canvas-Panels auszulösen. Die woo-filter-toggle ist unsere eigene Custom Class, die wir zum Stylen und Positionieren des Toggles verwenden. Und schließlich hide-on-mobileIch bin mir sicher, dass Sie herausfinden können, was dies bewirkt.

Für unseren woo filter toggle zum Erscheinen haben wir Customizer > Layout > Off Canvas Panel eingestellt, um auf dem Desktop und auf dem Handy anzuzeigen.

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

Hier ist unsere zweite Funktion, mit der wir unsere Breadcrumb inline zu unserem Filtertoggle hinzufügen:

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

Sie verwendet die Standardfunktion von Woocommerce. Da sie also nicht zweimal auf der Seite angezeigt wird, haben wir die Breadcrumb-Position von Themen in Customizer > Layout > Woocommerce deaktiviert.

Positionierung und Styling des Filters und des Breadcrumbs

Die Positionierung und Gestaltung unserer Toggle und Breadcrumb erfordert dieses CSS:

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

Um Platz für unsere Filtertoggle und Breacrumb zu schaffen und die Stile auf Linie zu halten, brauchen wir ein wenig mehr CSS. Zunächst sollen Sie den Produktzähler überschreiben und dann den Sortierselektor stilisieren.

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

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

Custom Post Grid

Der Großteil unseres Shopdesigns wurde mit dem Theme Customizer erstellt, von der Typografie und den Farben bis hin zum Layout unseres Shops und der einzelnen Produktseite. Um dem Ganzen aber noch etwas Einzigartiges zu verleihen, wurde der obligatorische Flint Skin CSS-Zauber angewendet.

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. Dies wird auf alle responsiven Größen angewendet.

.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

Für unsere Desktop-Ansicht können wir es uns leisten, unser Add to Cart zu verbergen. Ich denke, das sieht besser aus als eine Seite voller Buttons.

@media (min-width: 768px) {

    .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        Übergang: 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 {
        Deckkraft: 1;
        Übergang: all 0.4s;
    }

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