Отображение миниатюр и ссылок категорий в WooCommerce

3 июн. 2015 г., 00:25:56
Просмотры: 34.1K
Голосов: 7

Я хочу отобразить мои категории с миниатюрами в WooCommerce. Я могу вывести дочерние термины как ссылки, но хотел бы добавить дополнительный контент. Ниже я добавил код, который использую для отображения дочерних терминов "product_cat" в виде ссылок в моем шаблоне home-page.php. Но я также хотел бы добавить изображение категории. Буду очень признателен за помощь, СПАСИБО.

<?php

$taxonomyName = "product_cat";
//Получаем только термины верхнего уровня. Это делается установкой parent в 0.
$parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));   
echo '<ul>';
foreach ($parent_terms as $pterm) {
    //Получаем дочерние термины
    $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
    foreach ($terms as $term) {

        echo '<li><a href="' . get_term_link( $term->name, $taxonomyName ) . '">' . $term->name . '</a></li>';  
    }
}
echo '</ul>';

?>
0
Все ответы на вопрос 3
0

Выполнил некоторую настройку. Это поможет вам отображать изображения родительских и дочерних категорий. В дальнейшем вы сможете настроить этот код под свои нужды.

    $taxonomyName = "product_cat";
// Получаем только родительские термины (категории верхнего уровня). Это делается путем указания parent = 0.  
    $parent_terms = get_terms($taxonomyName, array('parent' => 0, 'orderby' => 'slug', 'hide_empty' => false));

    echo '<ul>';
    foreach ($parent_terms as $pterm) {

        // Отображаем родительские категории
        echo '<li><a href="' . get_term_link($pterm->name, $taxonomyName) . '">' . $pterm->name . '</a></li>';

        $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
        // Получаем URL изображения для родительской категории
        $image = wp_get_attachment_url($thumbnail_id);
        // Выводим HTML тег IMG для родительской категории
        echo "<img src='{$image}' alt='Изображение категории {$pterm->name}' title='{$pterm->name}' width='400' height='400' />";

        // Получаем дочерние термины (подкатегории)
        $terms = get_terms($taxonomyName, array('parent' => $pterm->term_id, 'orderby' => 'slug', 'hide_empty' => false));
        foreach ($terms as $term) {

            echo '<li><a href="' . get_term_link($term->name, $taxonomyName) . '">' . $term->name . '</a></li>';
            $thumbnail_id = get_woocommerce_term_meta($pterm->term_id, 'thumbnail_id', true);
            // Получаем URL изображения для дочерней категории
            $image = wp_get_attachment_url($thumbnail_id);
            // Выводим HTML тег IMG для дочерней категории
            echo "<img src='{$image}' alt='Изображение подкатегории {$term->name}' title='{$term->name}' width='400' height='400' />";
        }
    }
    echo '</ul>';

Дайте знать, если это соответствует вашим требованиям.

26 июн. 2015 г. 07:18:44
0

Привет @Wisdmlabs, спасибо за помощь. Я нашел, что это отлично работает, если кто-то еще интересуется, как это сделать.

$taxonomyName = "product_cat";
$prod_categories = get_terms($taxonomyName, array(
    'orderby'=> 'name',
    'order' => 'ASC',
    'hide_empty' => 1
));  

foreach( $prod_categories as $prod_cat ) :
    if ( $prod_cat->parent != 0 )
        continue;
    $cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
    $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );
    $term_link = get_term_link( $prod_cat, 'product_cat' );
    ?>

    <img  src="<?php echo $cat_thumb_url; ?>" alt="Миниатюра категории товаров" title="Миниатюра категории" /> 
    <a class="button" href="<?php echo $term_link; ?>"> <?php echo $prod_cat->name; ?> </a> 
    <?php endforeach; 
wp_reset_query(); ?>
26 июн. 2015 г. 17:03:24
0

Для дальнейшей оптимизации ответа от @Wisdmlabs выше, замените эту строку

$cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id );

на

$cat_thumb_url = wp_get_attachment_image_src( $cat_thumb_id, 'thumbnail-size' )[0]; // Измените на желаемый размер 'thumbnail-size'

Таким образом, изображения будут обрезаны до подходящего размера на сервере, чтобы уменьшить нагрузку на пропускную способность.

1 дек. 2016 г. 16:20:24