Εμφανίστε Κατηγορίες, Υποκατηγορίες και Προϊόντα του WooCommerce σε ξεχωριστές λίστες

Το WooCommerce σας δίνει μερικές επιλογές ως προς το τι μπορεί να εμφανίζετε στις σελίδες αρχείου σας:

• προϊόντα
• κατηγορίες (στη κεντρική σελίδα του καταστήματος) ή υποκατηγορίες (στις σελίδες κατηγοριών)
• τόσο τα προϊόντα όσο και τις κατηγορίες.

Συνήθως όταν αρχίζω τη δημιουργία ενός καταστήματος, επιλέγω την τρίτη επιλογή: προϊόντα και κατηγορίες/υποκατηγορίες. Αυτό σημαίνει ότι οι επισκέπτες στο κατάστημά μου είτε επιλέγουν προϊόντα απευθείας από την αρχική σελίδα ή κάνουν πιο συγκεκριμένη την αναζήτησή τους, κάνοντας κλικ μέσα από ένα αρχείο κατηγορίας προϊόντος.

Ωστόσο, υπάρχει μία αποτυχία με αυτή την προσέγγιση: εμφανίζει τις κατηγορίες/υποκατηγορίες μαζί, χωρίς διαχωρισμό μεταξύ των δύο. Αυτό σημαίνει ότι εάν οι εικόνες των κατηγοριών σας έχουν διαφορετικές διαστάσεις από τις εικόνες του προϊόντος σας, η διάταξη μπορεί να φανεί ακατάστατη. Ακόμη και αν οι εικόνες σας είναι το ίδιο μέγεθος, εάν μία από τις γραμμές στη σελίδα αρχείου περιλαμβάνει κατηγορίες και προϊόντα, η απουσία ενός κουμπιού «Προσθήκη στο καλάθι» για τις κατηγορίες κάνει αυτή τη γραμμή να μοιάζει ακατάστατη, αφού δεν έχουν όλα τα στοιχεία της τις ίδιες διαστάσεις.

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

Για να γίνει αυτό, θα ακολουθήσουμε τέσσερα βήματα:

1. Θα προσδιορίσουμε τον κώδικα που χρησιμοποιεί το WooCommerce για να εμφανίσει κατηγορίες και υποκατηγορίες στις σελίδες αρχείου.
2. Θα δημιουργήσουμε ένα plugin για τον κώδικά μας.
3. Θα γράψουμε μια συνάρτηση για να θέσουμε τις κατηγορίες ή υποκατηγορίες πριν τις καταχωρίσεις προϊόντων.
4. Θα μορφοποιήσουμε την έξοδο.

Αλλά προτού να αρχίσετε, θα χρειαστείτε μια εγκατάσταση WooCommerce με εισηγμένα κάποια προϊόντα, κατηγορίες προϊόντων και υποκατηγορίες.

Τί θα Χρειαστείτε

Για να ακολουθήσετε, θα χρειαστείτε:

• Μια εγκατάσταση ανάπτυξης του WordPress.
• Ένα πρόγραμμα επεξεργασίας κώδικα.
• Εγκατεστημένο και ενεργοποιημένο WooCommerce.
• Προϊόντα — εισήγαγα τα ψεύτικα στοιχεία προϊόντων που συνοδεύουν το WooCommerce. Για λεπτομέρειες σχετικά με το πώς να το κάνετε αυτό, δείτε αυτόν τον οδηγό.
• Ενεργοποιημένο ένα θέμα συμβατό με το WooCommerce - Εγώ χρησιμοποιώ το Storefront.

Πριν αρχίσουμε: Οι προεπιλεγμένες επιλογές

Ας ρίξουμε μια ματιά σε ό, τι μας δίνει το WooCommerce από προεπιλογή.

Άρχισα προσθέτοντας μερικές εικόνες κατηγορίες και υποκατηγορίες προϊόντων μου, αφού τα dummy δεδομένα του WooCommerce δεν περιλαμβάνουν εικόνες. Έχω χρησιμοποιήσει απλά μια εικόνα ενός από τα προϊόντα από κάθε κατηγορία ή υποκατηγορία, όπως μπορείτε να δείτε στο screenshot:

Τώρα ας ρίξουμε μια ματιά στο πώς το WooCommerce εμφανίζει τις κατηγορίες προϊόντων και τα προϊόντα στις σελίδες αρχείου.

Εάν δεν το έχετε κάνει ήδη, μεταβείτε στο WooCommerce > Settings, επιλέξτε την καρτέλα Products, και στη συνέχεια επιλέξτε την επιλογή Display. Για κάθε μία από τις επιλογές Shop Page Display και Default Category Display, επιλέξτε Show both:

Κάντε κλικ στο κουμπί Save Changes για να αποθηκεύσετε τις ρυθμίσεις σας και επισκεφθείτε τη σελίδα καταστήματος του ιστότοπού σας. Το δικό μου μοιάζει με αυτό:

Όπως συμβαίνει, επειδή έχω τρεις κατηγορίες προϊόντων και οι εικόνες της κατηγορία μου είναι το ίδιο μέγεθος με τις εικόνες των προϊόντων μου, φαίνεται αρκετά τακτοποιημένο. Αλλά εδώ είναι ένα από τα αρχεία της κατηγορίας του προϊόντος:

Επειδή αυτή η κατηγορία έχει δύο υποκατηγορίες, το πρώτο προϊόν εμφανίζεται δίπλα τους, σε ένα πλέγμα με πλάτος τρία στοιχεία. Θέλω να κάνει τις κατηγορίες και υποκατηγορίες μου πιο εμφανείς και απλά να τις παρουσιάσω ξεχωριστά από τις καταχωρήσεις του προϊόντος. Οπότε ας το κάνουμε.

Εντοπίζοντας τον κώδικα του WooCommerce που χρησιμοποιείται για να Εμφανίσει τις Κατηγορίες και τα Προϊόντα σε Αρχεία

Το πρώτο βήμα είναι να προσδιορίσουμε πώς το WooCommerce εμφανίζει κατηγορίες και υποκατηγορίες. Οπότε ας σκαλίσουμε τον πηγαίο κώδικα του WooCommerce για να βρούμε τη σχετική συνάρτηση.

Το αρχείο που χρησιμοποιεί το WooCommerce για την εμφάνιση σελίδων αρχείου είναι archive-product.php, το οποίο βρίσκεται στο φάκελο templates.

Μέσα σε αυτό το αρχείο, μπορείτε να βρείτε αυτόν τον κώδικα, που εμφανίζει τις κατηγορίες και τα προϊόντα:

1

<?php

2

    /**

3

   * woocommerce_before_shop_loop hook

4

	 *

5

	 * @hooked woocommerce_result_count - 20

6

	 * @hooked woocommerce_catalog_ordering - 30

7

	*/

8

	do_action( 'woocommerce_before_shop_loop' );

9

?>

10

11

<?php woocommerce_product_loop_start(); ?>

12

13

    <?php woocommerce_product_subcategories(); ?>

14

15

	<?php while ( have_posts() ) : the_post(); ?>

16

17

		<?php wc_get_template_part( 'content', 'product' ); ?>

18

19

	<?php endwhile; // end of the loop. ?>

20

21

<?php woocommerce_product_loop_end(); ?>

Έτσι, υπάρχει μια συνάρτηση woocommerce_product_subcategories() η οποία εξάγει τις κατηγορίες ή υποκατηγορίες πριν να εκτελέσει το βρόχο, η οποία εξάγει τα προϊόντα.

Η συνάρτηση είναι αποσπώμενη, που σημαίνει ότι εμείς θα μπορούσαμε να την κάνουμε override στο θέμα μας. Δυστυχώς αυτό δεν λειτουργεί αφού το WooCommerce έχει ενσωματωμένο στυλ για στοιχεία με clear, το οποίο θα εμφανιζόταν στην αρχή μιας γραμμής με την προεπιλεγμένη προβολή.

Έτσι αντί για αυτό, εμείς θα απενεργοποιήσουμε την εμφάνιση κατηγοριών και υποκατηγοριών στις σελίδες αρχείου μας, έτσι ώστε να εμφανίζονται μόνο τα προϊόντα. Στη συνέχεια, θα δημιουργήσουμε μια νέα συνάρτηση που εξάγει το κατηγορίες ή υποκατηγορίες προϊόντων, και θα την κάνουμε hook στη δράση woocommerce_before_shop_loop, φροντίζοντας να χρησιμοποιήσουμε υψηλή προτεραιότητα, έτσι ώστε να εκτελείται μετά τις συναρτήσεις οι οποίες είναι ήδη hooked σε αυτή τη δράση.

Σημείωση: Επειδή το WooCommerce προσθέτει clears σε κάθε τρίτη καταχώρηση του προϊόντος, δεν μπορούμε να χρησιμοποιήσουμε τη συνάρτηση woocommerce_product_subcategories() ή μια επεξεργασμένη έκδοση της για να εμφανίσουμε τις κατηγορίες. Αυτό οφείλεται στο γεγονός ότι θα κάνει clear στην τρίτη, έκτη (και ούτω καθεξής) κατηγορία ή προϊόν που εμφανίζονται, ακόμα και όταν χρησιμοποιούμε αυτήν τη συνάρτηση για να εμφανίσουμε ξεχωριστά τις κατηγορίες. Θα μπορούσαμε να προσπαθήσουμε να κάνουμε override σε αυτό, αλλά είναι ευκολότερο απλά να γράψουμε δική μας συνάρτηση.

Οπότε ας δημιουργήσουμε ένα plugin που να κάνει αυτό.

Δημιουργώντας το Plugin

Στον κατάλογο wp-content/plugins σας, δημιουργήστε έναν νέο φάκελο και δώστε του ένα μοναδικό όνομα. Ονομάζω τον δικό μου tutsplus-separate-products-categories-in-archives. Μέσα σε αυτό, δημιουργήστε ένα νέο αρχείο, και πάλι με ένα μοναδικό όνομα. Χρησιμοποιώ το ίδιο όνομα: tutsplus-separate-products-categories-in-archives.php.

Ανοίξτε το αρχείο σας και προσθέστε αυτόν τον κώδικα σε αυτό:

1

<?php

2

/**

3

 * Plugin Name: Tutsplus display WooCommerce products and categories/subcategories separately in archive pages

4

 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-display-product-categories-subcategories-and-products-in-two-separate-lists--cms-25479

5

 * Description: Display products and catgeories / subcategories as two separate lists in product archive pages

6

 * Version: 1.0

7

 * Author: Rachel McCollin

8

 * Author URI: http://rachelmccollin.co.uk

9

 *

10

 *

11

 */

Μπορεί να θέλετε να επεξεργαστείτε τα στοιχεία του συγγραφέα, δεδομένου ότι αυτό είναι το δικό σας plugin που γράφετε. Αποθηκεύστε το αρχείο και ενεργοποιήστε το plugin μέσω του admin του WordPress.

Γράφοντας τη Συνάρτησή μας

Τώρα ας γράψουμε την συνάρτηση. Αλλά προτού να αρχίσετε, απενεργοποιήστε την εμφάνιση κατηγοριών στις admin οθόνες. Πηγαίνετε στο WooCommerce > Settings, επιλέξτε την καρτέλα Products, και στη συνέχεια επιλέξτε την επιλογή Display. Για κάθε μία από τις επιλογές Shop Page Display και Default Category Display, επιλέξτε Show products. Αποθηκεύστε τις αλλαγές σας.

Τώρα η σελίδα του καταστήματος θα δείχνει κάπως έτσι:

Στο αρχείο του plugin, προσθέστε αυτό:

1

function tutsplus_product_subcategories( $args = array() ) {

2

3

	}

4

}

5

add_action( 'woocommerce_before_shop_loop', 'tutsplus_product_subcategories', 50 );

Τώρα, προσθέστε αυτόν τον κώδικα μέσα στη συνάρτηση:

1

$parentid = get_queried_object_id();

2

3

$args = array(

4

	'parent' => $parentid

5

);

6

7

$terms = get_terms( 'product_cat', $args );

8

9

if ( $terms ) {

10

11

	echo '<ul class="product-cats">';

12

13

		foreach ( $terms as $term ) {

14

15

			echo '<li class="category">';					

16

17

				woocommerce_subcategory_thumbnail( $term );

18

19

				echo '<h2>';

20

					echo '<a href="' .  esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';

21

						echo $term->name;

22

					echo '</a>';

23

				echo '</h2>';

24

25

			echo '</li>';

26

27

28

	}

29

30

	echo '</ul>';

31

32

}

Ας ρίξουμε μια ματιά στο τί κάνει αυτή η συνάρτηση:

• Εντοπίζει το τρέχον αντικείμενο που ζητήθηκε και ορίζει το αναγνωριστικό του ως $parentid.
• Χρησιμοποιεί την get_terms() για να προσδιορίσει όρους που έχουν το επί του παρόντος ζητηθέν στοιχείο ως γονέα τους. Εάν αυτή είναι η κεντρική σελίδα του καταστήματος, θα επιστρέψει κατηγορίες ανώτατου επιπέδου. Αν είναι αρχείο μιας κατηγορίας, θα επιστρέψει υποκατηγορίες.
• Στη συνέχεια ελέγχει αν υπάρχουν όροι, πριν από το άνοιγμα ενός βρόχου foreach και ενός στοιχείου ul.
• Για κάθε όρο, δημιουργεί ένα στοιχείο li, και στη συνέχεια εξάγει την εικόνα της κατηγορίας χρησιμοποιώντας την woocommerce_subcatgeory_thumbnail(), ακολουθούμενη από το όνομα της κατηγορίας σε μια σύνδεση για το αρχείο της.

Τώρα αποθηκεύστε το αρχείο σας και ανανεώστε τη σελίδα του κεντρικού καταστήματος. Το δικό μου μοιάζει με αυτό:

Οι κατηγορίες εμφανίζονται, αλλά χρειάζονται κάποια μορφοποίηση. Ας κάνουμε αυτό τώρα.

Μορφοποιώντας τις Καταχωρίσεις Κατηγοριών

Για να προσθέσουμε μορφοποίηση, χρειαζόμαστε ένα stylesheet μέσα στο plugin μας, το οποίο θα πρέπει να κάνουμε enqueue.

Στο φάκελο plugin, δημιουργήστε ένα φάκελο που ονομάζεται css και μέσα σε αυτό, δημιουργήστε ένα αρχείο που ονομάζεται style.css.

Τώρα, στο αρχείο του plugin, προσθέστε το παρακάτω πάνω από τη συνάρτηση που έχετε ήδη δημιουργήσει:

1

function tutsplus_product_cats_css() {

2

3

    /* register the stylesheet */

4

    wp_register_style( 'tutsplus_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );

5

6

    /* enqueue the stylsheet */

7

    wp_enqueue_style( 'tutsplus_product_cats_css' );

8

9

}

10

11

add_action( 'wp_enqueue_scripts', 'tutsplus_product_cats_css' );

Αυτό κάνει enqueue σωστά το stylesheet που μόλις δημιουργήσατε.

Τώρα ανοίξτε το stylesheet σας και προσθέστε τον παρακάτω κώδικα. To WooCommerce χρησιμοποιεί μορφοποίηση mobile-first, έτσι το ίδιο θα χρησιμοποιήσουμε και εμείς.

1

ul.product-cats li {

2

    list-style: none;

3

	margin-left: 0;

4

	margin-bottom: 4.236em;

5

	text-align: center;

6

	position: relative;

7

}

8

ul.product-cats li img {

9

	margin: 0 auto;	

10

}

11

12

@media screen and (min-width:768px) {

13

14

	ul.product-cats {

15

		margin-left: 0;

16

		clear: both;

17

	}

18

	ul.product-cats li {

19

		width: 29.4117647059%;

20

		float: left;

21

		margin-right: 5.8823529412%;

22

	}

23

	ul.product-cats li:nth-of-type(3) {

24

		margin-right: 0;

25

	}

26

27

}

Από το styling που χρησιμοποιείται από το WooCommerce έχω αντιγράψει τα ακριβή πλάτη και τα περιθώρια.

Τώρα ελέγξτε ξανά τη σελίδα του κεντρικού καταστήματός σας. Εδώ είναι το δικό μου:

Εδώ είναι το αρχείο της κατηγορίας Music:

Και εδώ είναι πώς φαίνεται σε μικρότερες οθόνες:

Περίληψη

Οι κατηγορίες προϊόντων είναι ένα εξαιρετικό χαρακτηριστικό γνώρισμα του WooCommerce, αλλά ο τρόπος που εμφανίζονται δεν είναι πάντοτε ιδανικός. Σε αυτό το σεμινάριο, μάθατε πώς να δημιουργείτε ένα plugin που εμφανίζει κατηγορίες και υποκατηγορίες προϊόντων ξεχωριστά από τις καταχωρήσεις του προϊόντος και, στη συνέχεια, μορφοποιήσατε τις καταχωρίσεις των κατηγοριών σας.

Θα μπορούσατε να χρησιμοποιήσετε αυτόν τον κώδικα για να εξαγάγετε μια λίστα των κατηγοριών ή υποκατηγοριών αλλού στη σελίδα (για παράδειγμα κάτω από τα προϊόντα), κάνοντας hook τη συνάρτηση σε μια διαφορετική ενέργεια μέσα το αρχείο προτύπου WooCommerce.

Αν αυτή τη στιγμή λειτουργείτε ένα κατάστημα που θέλετε να επεκτείνετε ή ψάχνετε κάποια επιπλέον plugins για να μελετήσετε σε συνάρτηση με το WooCommerce, μην διστάσετε να δείτε τα plugins που είναι διαθέσιμα στην Envato Market.