CODEWITHSUNDEEP
wordpresswoocommercecustom-taxonomy
Toki
Toki

Reputation: 587

WooCommerce: Duplicate shop page to show custom taxonomy instead of categories

In WooCommerce I've used the following code to create a custom taxonomy for my products which works perfectly:

// Register Custom Taxonomy
function ess_custom_taxonomy_Item()  {

$labels = array(
    'name'                       => 'Collections',
    'singular_name'              => 'Collection',
    'menu_name'                  => 'Collections',
    'all_items'                  => 'All Collections',
    'parent_item'                => 'Parent Collection',
    'parent_item_colon'          => 'Parent Collection:',
    'new_item_name'              => 'New Collection Name',
    'add_new_item'               => 'Add New Collection',
    'edit_item'                  => 'Edit Collection',
    'update_item'                => 'Update Collection',
    'separate_items_with_commas' => 'Separate Collection with commas',
    'search_items'               => 'Search Collections',
    'add_or_remove_items'        => 'Add or remove Collections',
    'choose_from_most_used'      => 'Choose from the most used Collections',
);
$args = array(
    'labels'                     => $labels,
    'hierarchical'               => true,
    'public'                     => true,
    'show_ui'                    => true,
    'show_admin_column'          => true,
    'show_in_nav_menus'          => true,
    'show_tagcloud'              => true,
);
register_taxonomy( 'collection', 'product', $args );

}

add_action( 'init', 'ess_custom_taxonomy_item', 0 );

I now try to create a page that completely emulates the standard woocommerce 'shop' page (displaying each top level category) but showing this taxonomy instead of the categories.

How is best to do this? I'm imagining either duplicating the shop page template in WooCommerce and replacing some(?) of the calls, or creating a duplicate of one of the Woo shortcodes (maybe from a plugin?).

As a aside, I have used ACF to assign an image field to each new 'collection' taxonomy which I imagine I will need to pull into the front end in order to achieve the above.

Upvotes: 1

Views: 1511

Answers (1)

Toki
Toki

Reputation: 587

In the end I managed to do this by duplicating and renaming a theme page template, including the markup for the product grid and grabbing the taxonomy terms and ACF image as below.. the foreach code here is really useful - hope this is of use to someone down the line.

<?php

// Get Terms for Custom Taxonomy
$taxonomy = 'collection';
$tax_terms = get_terms($taxonomy);

?>

<!-- Duplicated Product Grid Markup -->
<div class="col-sm-12">
    <div class="row">
        <ul class="products columns-4">
            <div class="col-sm-4">

<?php
// Create grid item for each instance of the Custom Taxonomy
foreach ($tax_terms as $tax_term) {

    echo '<li class="product-category product">';
    echo '<a href="/collection/' . $tax_term->slug . '">';

    // Grab & insert the ACF thumbnail 'collection_image'
    $thumbnail = get_field('collection_image', $tax_term->taxonomy . '_' . $tax_term->term_id);
    echo '<img src="' . $thumbnail . '" alt="' . $tax_term->name . '" width="300" height="300" />';

    // Tie it all up
    echo '<h3>' . $tax_term->name . '</h3>';
    echo '</a></li>';

}
?>

            </div>
        </ul>
    </div>
</div>

Upvotes: 1

Related Questions