Το κατάστημα - TheSilverRings

Τα προηγμένα χαρακτηριστικά του Woocommerce στο GeneratePress Premium 1.8 μου επέτρεψε να αποκαλύψω μερικές νέες προσαρμοσμένες λειτουργίες και στυλ. Κατά την επίσκεψη στη σελίδα του καταστήματος θα δείτε διάφορα προσαρμοσμένα στοιχεία και στυλ.

Πλοήγηση στην κατηγορία κάτω από τον τίτλο της καταχώρησης
Απενεργοποίηση φίλτρου καμβά Εναλλαγή
Επανατοποθετημένο Breadcrumb
Minimal στιλιζαρισμένο πλέγμα καταστημάτων με προσθήκη στο καλάθι από το hover

Πίνακας περιεχομένων

Στοιχεία γάντζου

Η Niche χρησιμοποιεί δύο στοιχεία GeneratePress Hook. Μπορείτε να διαβάσετε το έγγραφα για άγκιστρα εδώ. Το κατάστημα χρησιμοποιεί δύο στοιχεία γάντζου.

Μενού κατηγορίας καταστημάτων Woocommerce
Woo Shop Φίλτρο και Breadcrumb

Και οι δύο αυτοί κανόνες εμφάνισης στοιχείων έχουν οριστεί στο Αρχείο Προϊόντων ( Το κατάστημα ) και στα Αρχεία κατηγοριών προϊόντων.

Hook #1 - Μενού κατηγορίας καταστημάτων Woocommerce

Για να βοηθήσουμε την πλοήγηση στις κατηγορίες, το πρώτο μας άγκιστρο προσθέτει ένα απλό μενού κατηγοριών στο 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>
 
';
}
?>

Απλά παράγει μια λίστα όλων των κατηγοριών που περιέχουν ένα προϊόν. Στη συνέχεια χρησιμοποιούμε κάποια CSS για να διαμορφώσουμε τη λίστα:

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

Καθώς κάθε ένα από τα στοιχεία της λίστας είναι ένας σύνδεσμος, παίρνουν τα χρώματά τους από τα χρώματα του συνδέσμου που ορίσαμε στον παραμετροποιητή. Εκτός από το χρώμα των περιθωρίων που βρίσκεται μέσα στο CSS παραπάνω.

Hook #2 - Woo Shop Φίλτρο και Breadcrumb

Στη συνέχεια προσθέτουμε δύο συναρτήσεις στο woocommerce_before_shop_loop γάντζο. Το πρώτο είναι ένα προσαρμοσμένο Εκτός πάνελ καμβά toggle και το δεύτερο είναι το Woocommerce Breadcrumb.

Φίλτρο καταστήματος Woo

Η πρώτη συνάρτηση στο γάντζο μας είναι κάποια απλή HTML:

<span class="slideout-toggle woo-filter-toggle hide-on-mobile"><a href="#">ΦΊΛΤΡΟ</a></span>

Το <span> περιέχει τρεις κλάσεις. Η slideout-toggle είναι αυτό που απαιτεί το GeneratePress για να ενεργοποιήσει το άνοιγμα του πίνακα off canvas. Το woo-filter-toggle είναι η δική μας προσαρμοσμένη κλάση που χρησιμοποιούμε για το στυλ και την τοποθέτηση του toggle. Και τέλος hide-on-mobileείμαι σίγουρος ότι μπορείτε να καταλάβετε τι κάνει αυτό.

Για να εμφανιστεί η εναλλαγή του φίλτρου woo έχουμε ορίσει Customizer > Διάταξη > Off Canvas Panel για να εμφανίζεται σε Desktop και Mobile.

Τώρα πρέπει να αφαιρέσουμε την εναλλαγή από την κύρια πλοήγηση στην επιφάνεια εργασίας ( είναι η προεπιλεγμένη θέση ) πρέπει να την αποκρύψουμε χρησιμοποιώντας κάποια CSS:

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

Breadcrumb

Εδώ είναι η δεύτερη συνάρτησή μας για να προσθέσουμε το breadcrumb μας σε ευθεία γραμμή με την εναλλαγή του φίλτρου μας:

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

Χρησιμοποιεί την προεπιλεγμένη λειτουργία woocommerce. Έτσι, καθώς δεν εμφανίζεται δύο φορές στη σελίδα, απενεργοποιήσαμε τη θέση breadcrumb των θεμάτων στο Customizer > Διάταξη > Woocommerce.

Τοποθέτηση και μορφοποίηση του φίλτρου και του breadcrumb

Η τοποθέτηση και το styling του toggle και του breadcrumb απαιτεί αυτό το CSS:

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

Για να δημιουργήσουμε χώρο για την εναλλαγή φίλτρων και το breacrumb και για να διατηρήσουμε τα στυλ σε ευθυγράμμιση χρειαζόμαστε λίγο περισσότερο CSS. Πρώτα για να μετατοπίσουμε τον αριθμό των προϊόντων και στη συνέχεια να διαμορφώσουμε τον επιλογέα ταξινόμησης.

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

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

Προσαρμοσμένο πλέγμα δημοσιεύσεων

Το μεγαλύτερο μέρος της διαμόρφωσης του καταστήματός μας έχει ρυθμιστεί χρησιμοποιώντας τον παραμετροποιητή του θέματος, από την τυπογραφία και τα χρώματα μέχρι τη διάταξη του καταστήματος και της σελίδας του προϊόντος. Αλλά για να προσθέσουμε κάτι πιο μοναδικό έχει εφαρμοστεί η υποχρεωτική μαγεία CSS του Flint Skin.

Προσαρμοσμένη CSS

Ας δούμε βήμα προς βήμα κάθε μία από τις αλλαγές:

Μειωμένο χάσμα πλέγματος

Όχι GeneratePress χρησιμοποιεί CSS Grid για το κατάστημα του σούπερ απλό να μειώσει ( ή να αυξήσει ) μας χάσμα πλέγμα. Αυτό εφαρμόζεται σε όλα τα ανταποκρινόμενα μεγέθη.

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

Αφαίρεση του στυλ του κουμπιού Προσθήκη στο καλάθι

Ήθελα ένα κανονικό σύνδεσμο για την προσθήκη στο καλάθι μας, αφαιρώντας το χρώμα του μαξιλαριού και του φόντου και κληρονομώντας το χρώμα του κειμένου του σώματος.

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

Εμφάνιση Προσθήκη στο καλάθι / Απόκρυψη τιμής σε αιώρηση

Για την προβολή μας στην επιφάνεια εργασίας μπορούμε να αποκρύψουμε την προσθήκη στο καλάθι. Νομίζω ότι φαίνεται καλύτερα από μια σελίδα γεμάτη κουμπιά.

@media (ελάχιστο πλάτος: 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)),
    }
}