在产品档案/类别页面的标题下显示图标或徽章

时间:2020-03-22 作者:ulvayaam

我有一个销售游戏相关产品的网站,我需要在产品图片下方的每个产品的存档/分类页面上显示一些图标/小图片,显然互联网上没有这样的选项或插件可以帮助我(我希望对此进行更正)

所以我正在努力解决这个问题,我有非常基本的编码知识。

我尝试的方法是:

这些图标在产品中很常见,但它们的组合在每个产品中都是唯一的,为了方便起见,我将它们作为属性,以便可以轻松地为每个产品分配它们

  • 安装了woocommerce插件的变体样例soattributes可以有自己的图像,制作属性并将其子属性作为我的图标和附加图像我可以使用以下代码显示属性和值

    <?php 
    
    add_action( \'woocommerce_after_shop_loop_item\', \'loop_attributes\', 20 );
    function loop_attributes() {
    global $product;
    
    if( ! is_object( $product ) ) { 
        $product = wc_get_product( get_the_id() );
    }
    
    $win_val = $product->get_attribute(\'pa_wins\');
    $hour_val  = $product->get_attribute(\'pa_hours\');
    $badge_val = $product->get_attribute(\'pa_badges\');
    $token_val = $product->get_attribute(\'pa_token\');
    
    echo \'<img src="\' . $token_val . \'" class="aligncenter" style="margin-bottom: 20px;" />\';
    
    echo \'<span class="attrs1"><i style="color:#1c7e5a;" class="fas fa-trophy"></i> Wins:</span>\'.\'<span 
    class="attrs2"> \'.$win_val.\' </span>\';
    echo \'<span class="attrs1"><i style="color:#1c7e5a;" class="fas fa-hourglass"></i> Hours: 
    </span>\'.\'<span class="attrs2"> \'.$hour_val.\' </span>\';
    echo \'<span class="attrs1"><i style="color:#1c7e5a;" class="fas fa-ribbon"></i> Badges: 
    </span>\'.\'<span class="attrs2"> \'.$badge_val.\' </span>\';
     }
    
    add_filter( \'woocommerce_hide_invisible_variations\', \'__return_false\' );
    
     ?>
    
    上面的代码在产品目录/归档页面上显示了相应的属性名称及其值,

    属性pa\\U标记的值中附加了图像,

    我希望pa\\U令牌输出其附加的图像,而不是值,在下面的示例中,pa\\U令牌的代码是我希望它不是工作代码的表示形式,

    echo \'<img src="\' . $token_val . \'" class="aligncenter" style="margin-bottom: 20px;" />\';
    
    我需要建议,如果这是一个好的方法,或者已经有了解决方案?如果没有,那么我该如何调用附加到属性的图像!

    Update 1:

    当我把这个密码

    function loop_attributes() {
    global $product;
    
    if( ! is_object( $product ) ) {
        $product = wc_get_product( get_the_id() );
    }
    
    echo \'<pre>\', print_r($product->get_attributes(), 1), \'</pre>\';
    
    $token_val = $product->get_attribute(\'pa_token\');
    
    echo \'<pre>\', print_r($token_val, 1), \'</pre>\'; 
    }
    add_action( \'woocommerce_after_shop_loop_item\', \'loop_attributes\', 10, 0 );
    
    我得到以下输出

    Array
    ( 
    
    [pa_token] => WC_Product_Attribute Object
        (
            [data:protected] => Array
                (
                    [id] => 9
                    [name] => pa_token
                    [options] => Array
                        (
                            [0] => 210
                            [1] => 211
                        )
    
                    [position] => 6
                    [visible] => 1
                    [variation] => 
                )
    
        )
    
     )
    
     a, bb
    
    a、bb是附加有图像的子属性/值

    pa\\U令牌->a-图标1,bb-图标2

    Update 2:

    所以如果我执行以下代码

    var_dump( get_term_meta( 210 ) );
    
    我得到以下输出,看起来我们正朝着正确的方向前进

    array(6) { ["order_pa_token"]=> array(1) { [0]=> string(1) "0" } 
    ["product_attribute_image"]=> array(1) { [0]=> string(5) "12706" } 
    ["image_size"]=> array(1) { [0]=> string(9) "thumbnail" } ["show_tooltip"]=> 
    array(1) { [0]=> string(4) "text" } ["tooltip_text"]=> array(1) { [0]=> 
    string(3) "aaa" } ["tooltip_image"]=> array(1) { [0]=> string(1) "0" } }
    
    我想我们现在有了meta,现在应该有什么相关代码来只输出类别/归档页面上有工具提示的图像?

    Update 3:

    通过将代码更新为:

    function loop_attributes() {
        global $product;
    
        if( ! is_object( $product ) ) {
            $product = wc_get_product( get_the_id() );
        }
    
        // Get Product Variations - WC_Product_Attribute Object
        $product_attributes = $product->get_attributes();
    
        // Not empty, contains values
        if ( !empty( $product_attributes ) ) {
    
            foreach ( $product_attributes as $product_attribute ) {
                // Get options
                $attribute_options = $product_attribute->get_options();
    
                // Not empty, contains values
                if ( !empty( $attribute_options ) ) {
    
                    foreach ($attribute_options as $key => $attribute_option ) {
                        // WP_Term Object
                        $term = get_term($attribute_option); // <-- your term ID
    
                        echo \'<pre>\', print_r($term, 1), \'</pre>\';
                    }
                }
            }
        }
    }
    add_action( \'woocommerce_after_shop_loop_item\', \'loop_attributes\', 10, 0 );
    
    我得到以下输出

    <pre>
    WP_Term Object
    (
        [term_id] => 210
        [name] => a
        [slug] => aa
        [term_group] => 0
        [term_taxonomy_id] => 210
        [taxonomy] => pa_token
        [description] => 
        [parent] => 0
        [count] => 2
        [filter] => raw
    )
    </pre>
    
    <pre>
    WP_Term Object
    (
        [term_id] => 211
        [name] => bb
        [slug] => bb
        [term_group] => 0
        [term_taxonomy_id] => 211
        [taxonomy] => pa_token
        [description] => 
        [parent] => 0
        [count] => 2
        [filter] => raw
    )
    </pre>
    

    Update 4:

    因此,我之前无法解决我的问题,然后我将插件切换到Aftab Hussain的Category and Taxonomy Image,并使用以下代码调用Category/archive循环页面上的图像:

    add_action( \'woocommerce_after_shop_loop_item\', 
    \'attribute_img_loop\', 20 );
     function attribute_img_loop() {
     global $product;
    
    // Check that we got the instance of the WC_Product object, to be sure (can 
    be removed)
    if( ! is_object( $product ) ) { 
        $product = wc_get_product( get_the_id() );
    }
    
    $token_imgs = get_the_terms( get_the_ID(), \'pa_token\');
    
    foreach ( (array) $token_imgs as $token_img ) {
    $terms = $token_img->term_id;
    
        $meta_image = get_wp_term_image($terms); 
    echo \'<ul><li><img src="\' . $meta_image . \'" class="tokenimg" " /></li> 
    </ul>\';
    }
    }
    
    pa\\U token是我的属性,其子属性具有图像

    foreach循环用于输出每个产品使用的所有子属性,否则它将只输出第一个结果。

    (array)如果值为null,则使用foreach循环内部不返回任何内容,否则所有其他没有属性的产品都会在主页上出现糟糕的php调试错误,请告诉我是否有非黑客方法来处理此问题。

    谢谢你们的帮助,给了我正确的方向。

  • 2 个回复
    最合适的回答,由SO网友:ulvayaam 整理而成

    因此,我无法更早地解决问题,然后我将插件切换到“Category and Taxonomy Image“(由Aftab Hussain编写)并使用以下代码在分类/归档页面上显示图标:

    add_action( \'woocommerce_after_shop_loop_item\', \'attribute_img_loop\', 20 );
    function attribute_img_loop() {
        global $product;
    
        // Check that we got the instance of the WC_Product object, to be sure (can
        // be removed)
        if ( ! is_object( $product ) ) {
            $product = wc_get_product( get_the_ID() );
        }
    
        $token_imgs = get_the_terms( get_the_ID(), \'pa_token\' );
    
        foreach ( (array) $token_imgs as $token_img ) {
            $terms = $token_img->term_id;
    
            $meta_image = get_wp_term_image( $terms );
            echo \'<ul><li><img src="\' . $meta_image . \'" class="tokenimg" /></li></ul>\';
        }
    }
    
    • pa_token 是具有具有图像的子属性/术语的我的属性。

    • foreach 循环用于输出每个产品使用的所有子属性,否则将只输出第一个结果。

    • (array) 内部foreach 如果值为null,则使用循环不返回任何内容,否则所有其他没有属性的产品都会在主页上出现糟糕的PHP调试错误。

    谢谢你们的帮助,给了我正确的方向。

    Notes from Sally:

    <我只想把$product 因为你用过get_the_terms() 而不是用于获取pa_token 条款。

    我不推荐(array) $token_imgs. 相反,请确保$token_imgs 不是WP_Error 实例,并且它不是空数组。

    而不是多个ul (<ul><li></li></ul> <ul><li></li></ul> <ul><li></li></ul>...), 我会使用多个li (<ul><li></li> <li></li> <li></li>...</ul>). :)

    所以我的代码是:

    add_action( \'woocommerce_after_shop_loop_item\', \'attribute_img_loop\', 20 );
    function attribute_img_loop() {
        $token_imgs = get_the_terms( get_the_ID(), \'pa_token\' );
        if ( ! is_wp_error( $token_imgs ) && ! empty( $token_imgs ) ) {
            echo \'<ul>\';
            foreach ( $token_imgs as $term ) {
                $meta_image = get_wp_term_image( $term->term_id );
                echo \'<li><img src="\' . $meta_image . \'" class="tokenimg" /></li>\';
            }
            echo \'</ul>\';
        }
    }
    

    SO网友:7uc1f3r

    我不使用您用于添加图像的插件。您可以运行以下代码,这将为您提供有关在何处找到图像路径的更多信息。

    function loop_attributes() {
        global $product;
    
        if( ! is_object( $product ) ) {
            $product = wc_get_product( get_the_id() );
        }
    
        // Get Product Variations - WC_Product_Attribute Object
        $product_attributes = $product->get_attributes();
    
        // Not empty, contains values
        if ( !empty( $product_attributes ) ) {
    
            foreach ( $product_attributes as $product_attribute ) {
                // Get options
                $attribute_options = $product_attribute->get_options();
    
                // Not empty, contains values
                if ( !empty( $attribute_options ) ) {
    
                    foreach ($attribute_options as $key => $attribute_option ) {
                        // WP_Term Object
                        $term = get_term($attribute_option); // <-- your term ID
    
                        echo \'<pre>\', print_r($term, 1), \'</pre>\';
                    }
                }
            }
        }
    }
    add_action( \'woocommerce_after_shop_loop_item\', \'loop_attributes\', 10, 0 );
    

    相关推荐

    需要php代码的输出才能在Divi模块下显示

    我有一个创建表的页面的php函数代码。为了让表格显示在前端,我使用了一个页面模板(请参见代码)来创建页面(在页面属性中),而不是使用默认模板。现在,我想在用户看到的表的顶部添加一个Divi文本模块。我已经有了一个“Hello World”原型,但正在努力将其纳入我的表格页面。有什么想法吗?代码段:/** * Template Name: MyTable * * @package WordPress * @subpackage TNG */ <