在产品缩略图库后添加内容

Question

我正在尝试在产品图片下（缩略图下）添加内容。有了这些：

add_action( 'woocommerce_product_thumbnails ' , 'new_add_below_prod_gallery', 5 );
function new_add_below_prod_gallery() {
   echo '<div class="woocommerce-product-gallery" style="clear:both;">';
   echo '<span><html>
<head>
<style>
.infoplus {
    border-right: 2px solid black;
    height: auto;
    left: 50%;
    margin-left: -3px;
    top: 0;
    background-color: #FCFCFC;
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
    <div class="infoplus">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</body>
</html></span>';
   echo '</div>';
    echo '<br>';
}

但除非只显示主图像，否则它不起作用。当其他图像出现并创建缩略图时，文本消失。

它适用于所有其他钩子，只有“woocommerce_product_thumbnails”不行。我想要的是填充产品图片下方的space，因为右栏较长。

这种情况下正确的钩子是什么？

Answer 1

您可以覆盖 product-image.php 到您的主题。

从这里复制 product-image.php。

`wp-content/plugins/woocommerce/templates/single-product/product-image.php`;

并在此处上传到您当前激活的主题目录。

`wp-content/themes/yourthemename/woocommerce/single-product/product-image.php`;

现在将代码添加到该文件。

<?php
/**
 * Single Product Image
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.5.1
 */

defined( 'ABSPATH' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
    return;
}

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters(
    'woocommerce_single_product_image_gallery_classes',
    array(
        'woocommerce-product-gallery',
        'woocommerce-product-gallery--' . ( $post_thumbnail_id ? 'with-images' : 'without-images' ),
        'woocommerce-product-gallery--columns-' . absint( $columns ),
        'images',
    )
);
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( $post_thumbnail_id ) {
            $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>
    <div class="infoplus">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
</div>

此外，您需要添加自定义 js，因为您的内容会因图库加载而出现在图库顶部。所以我们必须将 HTML 存储在 var 中，然后将其删除，然后将其附加到图库中。

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function($) {
                setTimeout(function(){
                    var infoplus = $(".infoplus")[0].outerHTML;
                    $(".infoplus").remove();
                    $('.woocommerce-product-gallery').append(infoplus);
                },100);
            });
        })(jQuery);
    </script>
    <?php
}

add_action( 'wp_footer', 'add_custom_js', 10 );

已测试并有效

在产品缩略图库后添加内容

Add content after product thumbnail gallery

php

hook

product

thumbnails

woocommerce