【问题标题】:some product thumbnails doesn't show up某些产品缩略图未显示
【发布时间】:2019-10-31 13:02:24
【问题描述】:

您好,有一家以 woocomerce 和 noo 为主题的商店。 我在使用某些产品缩略图时遇到了问题。

一些注意事项:

图片是从我的 wordpress 库中加载的(每个产品 4 个) 并加载 woocomerce 产品颜色变化

在这个产品中,图像显示正常

https://soygorrion.com.ar/tienda/mochilas/fresa-2/

这是我遇到问题的时候

https://soygorrion.com.ar/tienda/mochilas/nogal/

没有缩略图显示

我安装了缩略图再生器并没有解决问题

我比较两个产品页面的填充方式相同(颜色变化、尺寸等)

想要恢复产品缩略图

比较两个产品的代码

我发现没有缩略图的产品中缺少此代码

请看这个小提琴

https://jsfiddle.net/webg6rua/

<div class="noo-woo-all-images-wrap noo-woo-all-images-wrap--thumbnails-below noo-woo-reset" data-showing="1896" data-parentid="1896" data-default="[{&quot;large&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa4-562x700.jpg&quot;,562,700,true],&quot;single&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa4-500x623.jpg&quot;,500,623,true],&quot;thumb&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa4-100x100.jpg&quot;,100,100,true],&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:&quot;fresa4&quot;},{&quot;large&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa1-562x700.jpg&quot;,562,700,true],&quot;single&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa1-500x623.jpg&quot;,500,623,true],&quot;thumb&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa1-100x100.jpg&quot;,100,100,true],&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:&quot;fresa1&quot;},{&quot;large&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa2-562x700.jpg&quot;,562,700,true],&quot;single&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa2-500x623.jpg&quot;,500,623,true],&quot;thumb&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa2-100x100.jpg&quot;,100,100,true],&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:&quot;fresa2&quot;},{&quot;large&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa3-562x700.jpg&quot;,562,700,true],&quot;single&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa3-500x623.jpg&quot;,500,623,true],&quot;thumb&quot;:[&quot;https:\/\/soygorrion.com.ar\/wp-content\/uploads\/2018\/07\/fresa3-100x100.jpg&quot;,100,100,true],&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:&quot;fresa3&quot;}]" data-slide-count="4">


                <div class="noo-woo-images-wrap">

                    <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 307px;"><div class="noo-woo-images noo-woo-images--click_anywhere" style="width: 4215%; position: relative; transition-duration: 0s; transform: translate3d(-246px, 0px, 0px);"><div class="noo-woo-images__slide  bx-clone" data-index="3" style="float: left; list-style: none; position: relative; width: 246px;" aria-hidden="true">


                                <img class="noo-woo-images__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-500x623.jpg" data-noo-woo-src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-500x623.jpg" data-large-image="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-562x700.jpg" data-large-image-width="562" data-large-image-height="700" title="fresa3" alt="" width="500" height="623" style="">

                            </div>


                            <div class="noo-woo-images__slide noo-woo-images__slide--active" data-index="0" style="float: left; list-style: none; position: relative; width: 246px;" aria-hidden="false">


                                <img class="noo-woo-images__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-500x623.jpg" data-large-image="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-562x700.jpg" data-large-image-width="562" data-large-image-height="700" title="fresa4" alt="" width="500" height="623">

                            </div>


                            <div class="noo-woo-images__slide " data-index="1" style="float: left; list-style: none; position: relative; width: 246px;" aria-hidden="true">


                                <img class="noo-woo-images__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-500x623.jpg" data-noo-woo-src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-500x623.jpg" data-large-image="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-562x700.jpg" data-large-image-width="562" data-large-image-height="700" title="fresa1" alt="" width="500" height="623" style="">

                            </div>


                            <div class="noo-woo-images__slide " data-index="2" style="float: left; list-style: none; position: relative; width: 246px;" aria-hidden="true">


                                <img class="noo-woo-images__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-500x623.jpg" data-noo-woo-src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-500x623.jpg" data-large-image="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-562x700.jpg" data-large-image-width="562" data-large-image-height="700" title="fresa2" alt="" width="500" height="623" style="">

                            </div>


                            <div class="noo-woo-images__slide " data-index="3" style="float: left; list-style: none; position: relative; width: 246px;" aria-hidden="true">


                                <img class="noo-woo-images__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-500x623.jpg" data-noo-woo-src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-500x623.jpg" data-large-image="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-562x700.jpg" data-large-image-width="562" data-large-image-height="700" title="fresa3" alt="" width="500" height="623" style="">

                            </div>


                    <div class="noo-woo-images__slide noo-woo-images__slide--active bx-clone" data-index="0" style="float: left; list-style: none; position: relative; width: 246px;" aria-hidden="true">


                                <img class="noo-woo-images__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-500x623.jpg" data-large-image="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-562x700.jpg" data-large-image-width="562" data-large-image-height="700" title="fresa4" alt="" width="500" height="623">

                            </div></div></div><div class="bx-controls bx-has-controls-direction"><div class="bx-controls-direction"><a class="bx-prev" href=""><i class="icon ion-ios-arrow-back"></i></a><a class="bx-next" href=""><i class="icon ion-ios-arrow-forward"></i></a></div></div></div>

                    <div class="noo-woo-loading-overlay"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i></div>

                </div>





                <div class="noo-woo-thumbnails-wrap number-4 noo-woo-thumbnails-wrap--sliding noo-woo-thumbnails-wrap--vertical" style="opacity: 1; height: auto;">

                    <div class="bx-wrapper" style="max-width: 800px; margin: 0px auto;"><div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 360px;"><div class="noo-woo-thumbnails" style="width: auto; position: relative; transition-duration: 0.2s; transform: translate3d(0px, 0px, 0px);">




                                <div class="noo-woo-thumbnails__slide noo-woo-thumbnails__slide--active" data-index="0" style="float: none; list-style: none; position: relative; width: 70px; margin-bottom: 20px;" aria-hidden="false">

                                    <img class="noo-woo-thumbnails__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa4-100x100.jpg" title="fresa4" alt="" width="100" height="100">

                                </div>



                                <div class="noo-woo-thumbnails__slide " data-index="1" style="float: none; list-style: none; position: relative; width: 70px; margin-bottom: 20px;" aria-hidden="false">

                                    <img class="noo-woo-thumbnails__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa1-100x100.jpg" title="fresa1" alt="" width="100" height="100">

                                </div>



                                <div class="noo-woo-thumbnails__slide " data-index="2" style="float: none; list-style: none; position: relative; width: 70px; margin-bottom: 20px;" aria-hidden="false">

                                    <img class="noo-woo-thumbnails__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa2-100x100.jpg" title="fresa2" alt="" width="100" height="100">

                                </div>



                                <div class="noo-woo-thumbnails__slide " data-index="3" style="float: none; list-style: none; position: relative; width: 70px; margin-bottom: 20px;" aria-hidden="false">

                                    <img class="noo-woo-thumbnails__image" src="https://soygorrion.com.ar/wp-content/uploads/2018/07/fresa3-100x100.jpg" title="fresa3" alt="" width="100" height="100">

                                </div>


                            <div style="float: none; list-style: none; position: relative; width: 70px; margin-bottom: 20px;" aria-hidden="false"></div>

                    </div></div></div>

                    <a href="javascript: void(0);" class="noo-woo-thumbnails__control noo-woo-thumbnails__control--up" data-direction="prev" style="display: none;"><i class="fa fa-chevron-up-open-mini"></i></a>
                    <a href="javascript: void(0);" class="noo-woo-thumbnails__control noo-woo-thumbnails__control--down" data-direction="next" style="display: none;"><i class="fa fa-chevron-down-open-mini"></i></a>

                </div>

                </div>

【问题讨论】:

标签: wordpress woocommerce thumbnails


【解决方案1】:

检查这些照片是否正确显示在您的 WP 媒体库中,尝试将它们下载到您的电脑,然后将它们从产品中删除,然后重新上传。

在上传过程中注意错误,以及它们是否在管理面板的图库中正确显示。

【讨论】:

  • 谢谢!我尝试了您编写的所有内容,还上传了与产品无关的其他图片,但缩略图没有出现。比较两个页面的代码。
猜你喜欢
  • 2019-01-07
  • 1970-01-01
  • 1970-01-01
  • 2017-05-24
  • 2019-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-25
相关资源
最近更新 更多