【问题标题】:Add the product image to Woocommerce my account order view将产品图片添加到 Woocommerce 我的帐户订单视图
【发布时间】:2018-11-28 21:00:03
【问题描述】:

我想在 Woocommerce 的帐户视图订单页面上添加图像。我可以获取图像但尺寸太大,我不知道我需要在哪里添加此代码:

<?php 
    // Get a list of all items that belong to the order
    $products = $order->get_items();

    // Loop through the items and get the product image
    foreach( $products as $product ) {                  

        $product_obj = new WC_Product( $product["product_id"] );

        echo $product_obj->get_image();

    }
?>   

任何帮助将不胜感激

这是查看订单页面上的位置,我想在其中添加产品图片:

【问题讨论】:

    标签: wordpress image woocommerce hook-woocommerce orders


    【解决方案1】:

    下面的钩子函数将完成这项工作(您可能需要添加一些 CSS 样式规则)

    // Display the product thumbnail in order view pages
    add_filter( 'woocommerce_order_item_name', 'display_product_image_in_order_item', 20, 3 );
    function display_product_image_in_order_item( $item_name, $item, $is_visible ) {
        // Targeting view order pages only
        if( is_wc_endpoint_url( 'view-order' ) ) {
            $product   = $item->get_product(); // Get the WC_Product object (from order item)
            $thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
            if( $product->get_image_id() > 0 )
                $item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name;
        }
        return $item_name;
    }
    

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

    注意WC_Product method get_image() 在内部使用 Wordpress get_the_post_thumbnail()


    更新:在代码中添加了if( $product-&gt;get_image_id() &gt; 0 ),仅在产品图片存在时才显示。

    【讨论】:

    • 嗨@Loic TheAztec 它对我有帮助,但是如果某些产品中没有产品图片,那么我还能写什么其他条件,因为当我单击订单历史记录时,页面会重新加载,但它似乎完全是空白的帮助将被appriciated
    • @ParthShah 抱歉,我现在刚刚测试过,它可以正常工作,就像你描述的那样。我更新的代码,仅在项目图像存在时才显示它。如果没有为产品设置图像,它将保持 woocommerce 的正常行为。因此,您还做了其他一些事情,另一种自定义,您的主题中的某些东西或一个正在制造麻烦的插件。
    • 你能帮我吗,因为我已经从 csv 上传了该订单,因此产品不在产品类别中,所以我认为它不会获得任何产品 id,因为数据库中的产品 id 为空,所以可能是什么条件空...
    • @ParthShah 抱歉,但你最好问一个新问题,因为我真的不明白你的问题。
    • @LoicTheAztec,是的,我删除了我的第一条评论。我刚刚在函数中添加了代码并检查了我的订单页面。它没有显示,所以我认为代码有问题。然后我点击查看按钮,我得到了一张图片。
    【解决方案2】:

    您只需要通过 get_the_post_thumbnail() 获取缩略图,而不是获取主图像:

    <?php 
        // Get a list of all items that belong to the order
        $products = $order->get_items();
    
        // Loop through the items and get the product image
        foreach( $products as $product ) {                  
    
            $product_obj = new WC_Product( $product["product_id"] );
    
            echo get_the_post_thumbnail();
    
        }
    ?>   

    【讨论】:

      【解决方案3】:

      写在woocommerce/template/order/ordr-details-item.php

      echo '<div class="product-imgae">'.$product->get_image(array( 80, 80)).'</div>';
      

      这将为您提供 80x80 尺寸的图像,根据您的需要进行更改。

      【讨论】:

        【解决方案4】:

        我知道这个主题更多是针对产品图片,但我如何上传产品变体的客户特定徽标,因为他还没有准备好上传。我用产品页面的功能和逻辑做的上传和预览。但现在我错过了更新不完整订单的部分。 我确实尝试过这段代码:

        add_filter('woocommerce_order_item_meta_end', '_hook_order_detail_item', 30, 3);
        function _hook_order_detail_item($item_id, $item, $order)
        {
           foreach ($order->get_items() as $inner_item)
           {
              if ($inner_item['_img_file_degree']&&$item_id===$inner_item->get_id())
              {
                  $_img_file = $inner_item['_img_file'];
                  $_img_file_title = $_img_file[0]['title'];
                  //print_r($_img_file_title);
                  //$order_id = $order->get_order_number();$cart_items = $order->get_items( apply_filters( 'woocommerce_purchase_order_item_types', 'line_item' ) );
                  //echo '<pre>Hallo<br />'; print_r($cart_items);echo '<br /></pre>';
                 echo '<ul class="wc-item-meta" style="list-style: none; padding-left: 0; font-size: inherit;"><li><strong class="wc-item-meta-label">' . esc_html__('Bild hochgeladen:', 'woocommerce') . '</strong><span>' . $_img_file_title . '</span></li><li><strong class="wc-item-meta-label">' . esc_html__("Logo-Bilddrehung:", "woocommerce") . '</strong><span>' . $inner_item['_img_file_degree'] . '</span></li></ul>';
              }
              elseif (is_wc_endpoint_url( 'view-order' ))
              {
                  $order_id = $order->get_order_number();$cart_items = $order->get_items( apply_filters( 'woocommerce_purchase_order_item_types', 'line_item' ) );
                  $items = $order->get_items();
                  foreach ( $items as $item ) {
                      $product_name = $item->get_name();
                      $product_id = $item->get_product_id();
                      $product_variation_id = $item->get_variation_id();
                  };
                  ?><form class="variations_form" method="post"><?php display_additional_product_fields();
                  // echo '<pre>Hallo<br />'; print_r($product_variation_id);echo '<br /></pre>';
                  ?><button type="submit" class="button" name="update_product" id="image_variant_upload" value="<?php esc_attr_e( 'Update product', 'woocommerce' ); ?>"><?php esc_html_e( 'Update product', 'woocommerce' ); ?>
                  </button>
                  <input type="hidden" name="product_id" value="<?php echo $product_id; ?>">
                  <input type="hidden" name="variation_id" class="variation_id" value="<?php echo $product_variation_id; ?>">
                  </form><?php
                  if(array_key_exists('update_product', $_POST)) {add_custom_fields_data_as_custom_cart_item_data($cart_item, $product_id);};
        
        );
              };
           }
        }
        

        此代码与 add_action 位于同一文件中,用于将购物车上的徽标添加为产品变体图像上传。

        【讨论】:

        • 如果您有新问题,请点击 按钮提出问题。如果有助于提供上下文,请包含指向此问题的链接。 - From Review
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2019-01-21
        • 1970-01-01
        • 2019-04-10
        • 2020-11-15
        • 2020-10-23
        • 2021-05-14
        • 2022-01-21
        相关资源
        最近更新 更多