Replacing Image on Woocommerce Shop Page with Hook

Question!

I'm trying to use hooks to remove the product thumbnail from the shop/catalog page in Woocommerce and then replace it with my own custom image.

add_action works as expected and displays the text, but the remove_action does not remove the product thumbnail. Here is the page related web site page.

What I am doing wrong?

Below is the code I'm using:

// Remove product images from the shop loop
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

//Add custom code to replace product thumbnail
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumb', 10 );

if ( ! function_exists( 'woocommerce_template_loop_product_thumb' ) ) {
    function woocommerce_template_loop_product_thumb() {
        echo "testing";
    }
}


Answers

You just need to fire this using woocommerce_init hook and this way it just works.

Here is the code:

function replacing_template_loop_product_thumbnail() {
    // Remove product images from the shop loop
    remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
    // Adding something instead
    function wc_template_loop_product_replaced_thumb() {
        echo "TEST TEST";
    }
    add_action( 'woocommerce_before_shop_loop_item_title', 'wc_template_loop_product_replaced_thumb', 10 );
}
add_action( 'woocommerce_init', 'replacing_template_loop_product_thumbnail');

This code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and fully functional.



You need to modify your constructor method from:

constructor(){
    super();
    this.setState={
        video:{}
    };
}

to:

constructor(){
    super();
    this.state = {
        video:{}
    };
}

Also, I think this in this.setState() call does not refer to your Class in $.ajax() call. Try binding both: the ajax() call and the success() function or use the arrow function for your success() method.



in the constructor, you just need to do this.state = { video: {} } not this.setState

constructor(){
    super();
    this.state = {
        video:{}
    };
}

this.setState can be used anywhere else but the constructor. non es6 way of doing this was doing:

getInitialState: function() {
  return { 
    video: {}
  }
}

which is equivalent to just doing this.state = {} in the constructor

By : finalfreq


This video can help you solving your question :)
By: admin