Obchod - TheSilverRings

Pokročilé funkcie Woocommerce v GeneratePress Premium 1.8 mi umožnili prezradiť niektoré nové vlastné funkcie a štýly. Pri návšteve stránky obchodu uvidíte niekoľko vlastných prvkov a štýlov.

Navigácia v kategórii pod názvom položky
Vypnutie prepínača filtra plátna
Premiestnená omrvinka
Minimálna štýlová mriežka obchodu s efektom pridania do košíka

Obsah

Prvky háčika

Niche používa dva prvky GeneratePress Hook. Môžete si prečítať dokumenty pre háčiky tu. Obchod používa dva háčiky Elements.

Woocommerce Shop Category Menu
Woo Shop Filter a Breadcrumb

Pravidlá zobrazovania oboch týchto prvkov sú nastavené na náš Archív produktov ( Obchod ) a Archív kategórií produktov.

Háčik #1 - Woocommerce Shop Category Menu

Na pomoc pri navigácii v kategóriách náš prvý háčik pridáva do menu jednoduchú ponuku kategórií. 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>
 
';
}
?>

Jednoducho vypíše zoznam všetkých kategórií, ktoré obsahujú produkt. Potom použijeme niektoré CSS na naštýlenie zoznamu:

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

Keďže každá z položiek zoznamu je odkazom, dostanú svoje farby z farieb odkazov, ktoré sme nastavili v nástroji na prispôsobenie. Okrem farby okrajov, ktorá je v rámci vyššie uvedeného CSS.

Háčik #2 - Woo Shop Filter a omrvinka

Potom pridáme dve funkcie woocommerce_before_shop_loop háčik. Prvým je vlastný Panel mimo plátna prepínač a druhým je Woocommerce Breadcrumb.

Filter obchodu Woo

Prvou funkciou v našom háčiku je jednoduché HTML:

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

Stránka <span> tag obsahuje tri triedy. . Výsuvný prepínač je to, čo GeneratePress vyžaduje na spustenie otvorenia panelu mimo plátna. Stránka woo-filter-toggle je naša vlastná trieda, ktorú používame na štylizáciu a umiestnenie prepínača. A nakoniec skrývanie na mobilnom telefóneSom si istý, že môžete zistiť, čo to robí.

Pre zobrazenie nášho prepínača filtrov woo sme nastavili položku Prispôsobiť > Rozloženie > Vypnúť panel plátna tak, aby sa zobrazoval na ploche a na mobilnom zariadení.

Teraz potrebujeme odstrániť prepínač z primárnej navigácie na ploche ( je to predvolené umiestnenie ), musíme ho skryť pomocou CSS:

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

Drobky

Tu je naša druhá funkcia, ktorá pridá náš breadcrumb inline s naším prepínačom filtra:

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

Používa predvolenú funkciu woocommerce. Aby sa na stránke nezobrazovala dvakrát, zakázali sme v Customizer > Layout > Woocommerce pozíciu breadcrumb.

Umiestnenie a štylizácia filtra a omrvinky

Umiestnenie a štylizácia nášho prepínača a omrvinky si vyžaduje toto CSS:

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

Aby sme vytvorili priestor pre prepínač filtrov a lámanie a udržali štýly v súlade, potrebujeme trochu viac CSS. Najprv posunúť počet produktov a potom naštýlovať selektor triedenia.

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

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

Vlastná mriežka príspevkov

Väčšina štýlov nášho obchodu bola nastavená pomocou nástroja Theme customizer, od typografie a farieb až po rozloženie nášho obchodu a stránky s jednotlivými produktmi. Aby sme však pridali niečo jedinečnejšie, použili sme povinné kúzlo Flint Skin CSS.

Vlastné CSS

Prejdime si jednotlivé zmeny:

Znížená medzera v sieti

Nie GeneratePress používa CSS Grid pre obchod jeho super jednoduché znížiť ( alebo zvýšiť ) naše mriežky medzery. Toto sa aplikuje na všetky responzívne veľkosti.

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

Odstránenie štýlu tlačidla Pridať do košíka

Chcel som normálne vyzerajúci odkaz pre náš pridať do košíka odstránením výplne a farby pozadia a zdedením farby textu tela.

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

Zobraziť Pridať do košíka / Skryť cenu pri zobrazení kurzorom

Pre naše zobrazenie na ploche si môžeme dovoliť skryť pridanie do košíka. Myslím, že to vyzerá lepšie ako stránka plná tlačidiel.

@media (min-width: 768px) {

    .woocommerce ul.products li.product a.button {
        transform: translateY(0);
        width: 100%;
        opacity: 0;
        prechod: všetko 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;
        prechod: všetko 0,4s;
    }

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