【问题标题】:Remove product category placeholder image in Woocommerce在 Woocommerce 中删除产品类别占位符图像
【发布时间】:2019-05-15 03:46:24
【问题描述】:

我正在尝试删除商店页面上的占位符产品类别图片。

现在我正在使用此代码为没有图像的产品添加一个 .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 );

【问题讨论】:

    标签: wordpress loops woocommerce thumbnails categories


    【解决方案1】:

    要使其适用于删除占位符图像并添加自定义 &lt;div&gt; 容器的产品类别,它需要以不同的方式完成,因为产品类别使用 content_product_cat.php 特定模板:

    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'] ) . '" />';
            }
        }
    }
    

    代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且可以工作。

    【讨论】:

    • 感谢您提供代码 Loic!这也将在即将到来的项目中派上用场。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-13
    • 2014-04-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-06-22
    相关资源
    最近更新 更多