hooks - display available size on hover, in woocommerce shop page

admin管理员组

文章数量:1304960

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

Improve this question

I am customizing the Woocommerce Storefront theme. In the product-list pages (category page, shop page), I would like to display the available sizes of the product when the user hover with its mouse on the image of a product. So I need to add html/php code that will display this on hover:

Available sizes:

S, M, L, XL

or

Sold out

Notify me when the product is in stock

I would like to do this in the functions.php of my child theme.

Should I use this hook to add html ?

woocommerce_before_shop_loop_item_title

I have started to code this, but I need help to go

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
/**
 * WooCommerce Loop Product Thumbs
 **/
 if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
 }
/**
 * WooCommerce Product Thumbnail
 **/
 if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {

    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;

        $output = '<div class="imagewrapper">';
        if ( has_post_thumbnail() ) {

            $output .= get_the_post_thumbnail( $post->ID, $size ); 

        } else {

            $output .= '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';

        }

        //$product .=  wc_get_product($post->ID ) ;
        //$name .= $product->get_name();

        $output .= '<div class="sizeAvailHover">';
        //$output .= $name;
        $output .= '</div>';

        $output .= '</div>';

        return $output;
    }
 }

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

Improve this question

I am customizing the Woocommerce Storefront theme. In the product-list pages (category page, shop page), I would like to display the available sizes of the product when the user hover with its mouse on the image of a product. So I need to add html/php code that will display this on hover:

Available sizes:

S, M, L, XL

or

Sold out

Notify me when the product is in stock

I would like to do this in the functions.php of my child theme.

Should I use this hook to add html ?

woocommerce_before_shop_loop_item_title

I have started to code this, but I need help to go

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
/**
 * WooCommerce Loop Product Thumbs
 **/
 if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
 }
/**
 * WooCommerce Product Thumbnail
 **/
 if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {

    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $woocommerce;

        $output = '<div class="imagewrapper">';
        if ( has_post_thumbnail() ) {

            $output .= get_the_post_thumbnail( $post->ID, $size ); 

        } else {

            $output .= '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';

        }

        //$product .=  wc_get_product($post->ID ) ;
        //$name .= $product->get_name();

        $output .= '<div class="sizeAvailHover">';
        //$output .= $name;
        $output .= '</div>';

        $output .= '</div>';

        return $output;
    }
 }

• woocommerce-offtopic
• hooks

Share Improve this question edited Sep 7, 2017 at 16:35 Louis asked Sep 7, 2017 at 14:22 LouisLouis 15322 silver badges1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

Here's the code I finally used for those interested:

/* This snippet removes the action that inserts thumbnails to products in the loop
 * and re-adds the function customized with our wrapper in it.
 * It applies to all archives with products.
 *
 * @original plugin: WooCommerce
 * @author of snippet: Brian Krogsard
 */

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action(    'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);

/**
 * WooCommerce Loop Product Thumbs
 **/

 if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
    function woocommerce_template_loop_product_thumbnail() {
        echo woocommerce_get_product_thumbnail();
    } 
 }

/**
 * WooCommerce Product Thumbnail
 **/

 if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {

    function woocommerce_get_product_thumbnail( $size = 'shop_catalog', $placeholder_width = 0, $placeholder_height = 0  ) {
        global $post, $wp_query, $woocommerce, $attributes;
        // if ( ! $placeholder_width ) {
        //  $placeholder_width = $woocommerce->get_image_size( 'shop_catalog_image_width' );
        // }
        // if ( ! $placeholder_height ){
        //  $placeholder_height = $woocommerce->get_image_size( 'shop_catalog_image_height' );
        // }

        $output = '<div class="imagewrapper">';
        if ( has_post_thumbnail() ) {

            $output .= get_the_post_thumbnail( $post->ID, $size ); 

        } else {

            $output .= '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="' . $placeholder_width . '" height="' . $placeholder_height . '" />';

        }

        //$product .=  wc_get_product($post->ID ) ;
        //$name .= $product->get_name();

        $output .= '<div class="sizeAvailHover">';
        //$output .= $name;
        //$product .=  wc_get_product($post->ID ) ;
        $product = wc_get_product( $wp_query->post );


        //echo get_post_format();

            // echo 'total stock : ';
            // echo $product->is_in_stock();



        if ( $product->is_type( 'variable' ) ) {
            // $attributes .= $product->list_attributes();
            // echo print_r($attributes);
            // $attributes = $product->get_attributes();
            // echo print_r($attributes);
            // $attributes .= $product->wc_display_product_attributes();
            // echo print_r($attributes);
            // $attributes .= $product->get_variation_attributes();
            // echo print_r($attributes);


            if($product->is_in_stock()) {
                $output .= ' Available sizes: <br/>';
                $variations = $product->get_available_variations();
                $i = 0;
                foreach($variations as $variation){
                    $variation_id = $variation['variation_id'];
                    $variation_obj = new WC_Product_variation($variation_id);
                    $stock = $variation_obj->get_stock_quantity();
                    //echo $stock;
                    // echo '--';
                    //echo $variation_obj->get_sku();
                    //echo print_r($variation_obj->get_variation_attributes());
                    $dummy = $variation_obj->get_variation_attributes();
                    //echo gettype($stock);
                    if ((is_int($stock) || ctype_digit($stock)) && (int)$stock > 0 ) { // int }
                    //if ($stock > 0 ) {
                        //echo $variation_obj->get_attributes();
                        //echo 'yesssss';
                        // echo print_r($dummy['attribute_pa_size']);
                        $output .= '<span class="availSize">' . strtoupper($dummy['attribute_pa_size']) . '</span>';
                    } else {
                        // echo print_r($dummy['attribute_pa_size']);
                        $output .= '<span class="unavailSize">' . strtoupper($dummy['attribute_pa_size']) . '</span>';
                    }
                    if(++$i !== count($variations)) {
                        $output .= ', ';
                    }

                    //echo '<br/>';

                }
            } else {
                $output .= ' Sold out<br/>Notify me when the product is back in stock';
            }


            // if ( ! $attributes ) {
            //     echo "No attributes";
            // }
            // foreach ( $attributes as $attribute ) {

         //        echo $attribute['name'] . ": ";
         //        $product_attributes = array();
         //        $product_attributes = explode('|',$attribute['value']);

         //        $attributes_dropdown = '<select>';

         //        foreach ( $product_attributes as $pa ) {
         //            $attributes_dropdown .= '<option value="' . $pa . '">' . $pa . '</option>';
         //        }

         //        $attributes_dropdown .= '</select>';

         //        echo $attributes_dropdown;
            // }
        }

        $output .= '</div>';

        $output .= '</div>';

        return $output;
    }
 }

Yes. The woocommerce_template_loop_product_thumbnail is hooked into the woocommerce_before_shop_loop_item_title action, so that would be a good way to go about it.

本文标签： hooksdisplay available size on hoverin woocommerce shop page