Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – WooCommerce – Hide the category image on specific product category pages

I’m writing a spare parts website using the shoptimizer theme. Some category pages have complicated drawings that need to be displayed large as usual, which shoptimizer does as the category page displays the photo in large underneath the title. Other categories I could really do with the category pages displaying no category image at all, to bring the content up.

I can’t seem to get my head around changing the archive-product.php template, so that it displays the category image for some pages and not for others. Is it possible someone can help me with this?

The part of the archive-product.php that pulls this image and the category description I think is the following:

    <?php
    /**
     * Hook: woocommerce_archive_description.
     *
     * @hooked woocommerce_taxonomy_archive_description - 10
     * @hooked woocommerce_product_archive_description - 10
     */
    do_action( 'woocommerce_archive_description' );
    ?>
</header>

So I’d like a second template that I could to apply to certain templates, that doesn’t Have this woocommerce_archive_description action, and some how apply that to specific categories, perhaps with the category ID code.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Richard in the comments, I've now discovered the answer to this, by modifying a code snippet in the Shoptimizer docs:

    add_action( 'wp', function() {
    // Define the category IDs where you want to remove the description and image
    $category_ids = array( 50, 53, 54, 55, 56, 57, 58, 59, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71 );

    // Check if the current page is a category page and matches the specified category IDs
    if ( is_product_category( $category_ids ) ) {
        remove_action( 'woocommerce_archive_description', 'shoptimizer_woocommerce_taxonomy_archive_description' );
        remove_action( 'woocommerce_archive_description', 'shoptimizer_category_image', 20 );
    }
}, 20 );

    I can confirm this is working on my website, successfully removing the category banner image from the categories which ID's are in the array.


  2. 0

    You dont need to alter template for that. Look into content-product-cat.php template and you will notice action woocommerce_before_subcategory_title which will call for woocommerce_subcategory_thumbnail function . If we look into that function, you will notice if you dont provide image will load the default one wc_placeholder_img_src() .

    So you need to use remove_action('woocommerce_before_subcategory_title','woocommerce_subcategory_thumbnail'); to remove the original function and provide your own function.

    I’m going to simply copy/paste the original function and remove the else part. You can alter the function as you want.

    remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10);
add_action('woocommerce_before_subcategory_title', 'theme_subcategory_thumbnail', 10, 1);

function theme_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_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 part is removed

    if ( $image ) {
        $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'] ) . '" />';
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search