Sklep - TheSilverRings

Zaawansowane funkcje Woocommerce w GeneratePress Premium 1.8 pozwoliły mi ujawnić kilka nowych niestandardowych funkcji i stylów. Po odwiedzeniu strony sklepu zobaczysz kilka niestandardowych elementów i stylów.

Nawigacja kategorii poniżej tytułu wpisu
Przełączanie filtra poza kanwą
Zmieniony pasek nawigacyjny
Minimalistyczna siatka sklepu z efektem dodania do koszyka po najechaniu kursorem

Spis treści

Elementy haka

Niche używa dwóch GeneratePress Hook Elements. Możesz przeczytać dokumenty do haków tutaj. Sklep korzysta z dwóch haków Elements.

Menu kategorii sklepu Woocommerce
Woo Shop Filter i Breadcrumb

Reguły wyświetlania obu tych elementów są ustawione na Archiwum produktów ( Sklep ) i Archiwum kategorii produktów.

Hook #1 - Menu kategorii sklepu Woocommerce

Aby ułatwić nawigację między kategoriami, nasz pierwszy hak dodaje proste menu kategorii do 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>
 
';
}
?>

Po prostu wyświetla listę wszystkich kategorii, które zawierają produkt. Następnie używamy CSS do stylizacji listy:

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

Ponieważ każdy z elementów listy jest linkiem, otrzymują one swoje kolory z kolorów linków, które ustawiliśmy w konfiguratorze. Oprócz koloru obramowania, który znajduje się w powyższym CSS.

Hook #2 - Filtr sklepu Woo i pasek strony

Następnie dodajemy dwie funkcje do woocommerce_before_shop_loop hak. Pierwszy to niestandardowy Panel poza płótnem a drugi to Breadcrumb Woocommerce.

Filtr Woo Shop

Pierwszą funkcją w naszym haku jest prosty HTML:

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

The <span> zawiera trzy klasy. Klasa suwak-przełącznik jest tym, czego wymaga GeneratePress, aby wywołać otwarcie panelu off canvas. The woo-filter-toggle to nasza własna klasa, której używamy do stylizacji i pozycjonowania przełącznika. I na koniec ukrycie na telefonie komórkowymJestem pewien, że możesz dowiedzieć się, co to robi.

Aby pojawił się nasz przełącznik filtra woo, ustawiliśmy Customizer > Layout > Off Canvas Panel, aby wyświetlał się na komputerach stacjonarnych i urządzeniach mobilnych.

Teraz musimy usunąć przełącznik z głównej nawigacji na pulpicie (jest to domyślna lokalizacja), musimy go ukryć za pomocą CSS:

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

Breadcrumb

Oto nasza druga funkcja, która dodaje nasz pasek nawigacyjny w linii z naszym przełącznikiem filtra:

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

Używa domyślnej funkcji woocommerce. Aby nie wyświetlał się dwa razy na stronie, wyłączyliśmy pozycję okruszka motywu w Customizer > Layout > Woocommerce.

Pozycjonowanie i stylizacja filtra i paska nawigacyjnego

Pozycjonowanie i stylizacja naszego toggle i breadcrumb wymaga tego CSS:

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

Aby zrobić miejsce dla naszego przełącznika filtra i breacrumb oraz aby zachować zgodność stylów, potrzebujemy trochę więcej CSS. Najpierw przesuniemy liczbę produktów, a następnie nadamy styl selektorowi sortowania.

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

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

Niestandardowa siatka postów

Większość stylizacji naszego sklepu została ustawiona za pomocą narzędzia Theme Customizer, od typografii i kolorów po układ naszego sklepu i strony pojedynczego produktu. Ale aby dodać coś bardziej wyjątkowego, zastosowano obowiązkową magię CSS Flint Skin.

Niestandardowy CSS

Przejdźmy przez każdą ze zmian:

Zmniejszona luka sieciowa

Nie, GeneratePress używa CSS Grid dla sklepu, który jest bardzo prosty do zmniejszenia (lub zwiększenia) odstępu między siatkami. Jest to stosowane do wszystkich responsywnych rozmiarów.

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

Usuń stylizację przycisku Dodaj do koszyka

Chciałem, aby nasz link dodawania do koszyka wyglądał normalnie, usuwając wypełnienie i kolor tła oraz dziedzicząc kolor tekstu głównego.

.woocommerce ul.products li.product a.button {
    padding: 5px 0;
    color: inherit;
    kolor tła: przezroczysty;
}

Pokaż Dodaj do koszyka / Ukryj cenę po najechaniu kursorem

W widoku desktopowym możemy sobie pozwolić na ukrycie opcji dodawania do koszyka. Myślę, że wygląda to lepiej niż strona pełna przycisków.

@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));
    }
}