时间戳

首页 > 解决方案 > 在 Woocommerce 中删除产品类别占位符图像

wordpress - 在 Woocommerce 中删除产品类别占位符图像

问题描述

我试图摆脱商店页面上的占位符产品类别图像。

现在我正在使用此代码向没有图像的产品添加一个 .no-image 类，以便我可以对它们进行不同的样式设置。这很好用，我想对类别做同样的事情。

function before_imageless_product() {
if( !has_post_thumbnail( get_the_id() ) ){
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_category_thumbnail', 10 );
    echo '<div class="no-product-image">';
}
}
add_action( 'woocommerce_before_shop_loop_item', 'before_imageless_product', 9 );

function after_imageless_product() {
if( !has_post_thumbnail( get_the_id() ) ){
    add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_category_thumbnail', 10 );
    echo '</div>';
}
}
add_action( 'woocommerce_after_shop_loop_item', 'after_imageless_product', 9 );

我试图编辑代码来检测类别，但我不能让它工作。我究竟做错了什么？

function before_imageless_category() {
    global $wp_query;
    $cat = $wp_query->get_queried_object();
    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
    $image = wp_get_attachment_url( $thumbnail_id );

    if( !$thumbnail_id ){
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_category_thumbnail', 10 );
        echo '<div class="no-category-image">';
    }
}
add_action( 'woocommerce_before_shop_loop_item', 'before_imageless_category', 9 );

function after_imageless_category() {

    global $wp_query;
    $cat = $wp_query->get_queried_object();
    $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
    $image = wp_get_attachment_url( $thumbnail_id );

    if( !$thumbnail_id ){
        add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_category_thumbnail', 10 );
        echo '</div>';
    }

}
add_action( 'woocommerce_after_shop_loop_item', 'after_imageless_category', 9 );

标签： wordpressloopswoocommercethumbnailscategories

解决方案

To make it work for product categories removing placeholder image and adding a custom <div> container, it need to be done differently as product categories use content_product_cat.php specific template:

add_action( 'woocommerce_before_subcategory', 'before_imageless_category', 9, 1 );
function before_imageless_category( $category ) {
    if( ! get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true ) ) {
        echo '<div class="no-category-image">';
    }
    remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );
    add_action('woocommerce_before_subcategory_title', 'custom_subcategory_thumbnail', 10, 1 );
}

add_action( 'woocommerce_after_subcategory', 'after_imageless_category', 11, 1 );
function after_imageless_category( $category ) {
    if( ! get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true ) ) {
        echo '</div>';
    }
}

function custom_subcategory_thumbnail( $category ) {
    $small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );
    $dimensions           = wc_get_image_size( $small_thumbnail_size );
    $thumbnail_id         = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );

    if ( $thumbnail_id ) {
        $image        = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
        $image        = $image[0];
        $image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $small_thumbnail_size ) : false;
        $image_sizes  = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $small_thumbnail_size ) : false;
    } else {
        return;
    }

    if ( $image ) {
        // Prevent esc_url from breaking spaces in urls for image embeds.
        // Ref: https://core.trac.wordpress.org/ticket/23605.
        $image = str_replace( ' ', '%20', $image );

        // Add responsive image markup if available.
        if ( $image_srcset && $image_sizes ) {
            echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" />';
        } else {
            echo '<img src="' . esc_url( $image ) . '" alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" />';
        }
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

推荐阅读