WooCommerce 360 Image插件安装设置及自定义设计全指南

WooCommerce 360 Image插件怎么安装?WooCommerce 360 Image插件如何使用?WooCommerce 360 Image插件能不能设置产品自定义显示?一些小伙伴在安装WooCommerce 360 Image插件后都有一堆问题,为了解决大家的疑惑,这里搬主题就分享一下WooCommerce 360 Image插件安装设置及自定义设计全指南。

一、插件安装教程

  1. 从你的WooCommerce.com仪表板上下载该扩展程序
  2. 进入 “插件”>”添加插件”>”上传”,选择你刚刚下载的ZIP文件。
  3. 点击立即安装,然后点击激活

没有安装WooCommerce 360 Image插件?没关系,搬主题提供汉化中文版插件下载

二、使用教程

激活该插件后,你会发现在单件产品的编辑界面上有一个新的meta框,就在右边画廊meta框的正上方。

WooCommerce 360 Image插件安装设置及自定义设计全指南插图

这是让你的图像旋转设置的第一步! 让我们看一下可用的选项。

  • 用360图片替换图片。如果你想用新的360图片替换正常的单一产品特色图片,你一定要选中这个选项。

然后在meta框的正下方,你要添加一些图库图片,就像你通常为一个产品添加的那样。

WooCommerce 360 Image插件安装设置及自定义设计全指南插图1

然后你需要添加你的产品图片。当你在电脑的文件资源管理器/查找器窗口中查看它们时,请尝试将它们按照你希望它们显示的正确顺序排列(通常这将是按字母顺序排列的,如product-1.jpg,product-2.jpg,等等,所以只要保持正确的顺序),然后在媒体上传窗口中上传它们。

WooCommerce 360 Image插件安装设置及自定义设计全指南插图2

不要担心!因为事后可以手动改变顺序或删除一些图片。

WooCommerce 360 Image插件安装设置及自定义设计全指南插图3

保存产品,然后,你的图像旋转器将被显示出来。

WooCommerce 360 Image插件安装设置及自定义设计全指南插图4

三、短代码设置

还有一个额外的短码,你可以使用 – [wc360],在任何你想要的地方显示图片旋转器 – 无论是在产品的同一页面,还是在其他地方,如在博客文章中! 但有一个限制,而且是很重要的限制–每页只能有一个旋转器

下面是它的所有属性的示例:

[wc360 id="" width="" height=""]

如果你在一个产品页面上使用它,并希望为该产品提供旋转器,你不需要包括ID。因此,只需要[wc360]就可以了,还可以选择一些尺寸。

然而,如果你输入产品ID,它将显示该产品的旋转器。同样,尺寸是可选的,但可能会有帮助。

四、详细设置

WooCommerce 360 Image有几个设置,你可能想看一下。默认情况下,导航控制是打开的,但全屏选项是关闭的。它们可以在WooCommerce > 设置 > 产品 > 360图像下找到:

  • 启用全屏选项 – 这将为您的360图片展示添加一个按钮,打开全屏视图。
  • 启用导航控件 – 这将启用导航控制按钮。
WooCommerce 360 Image插件安装设置及自定义设计全指南插图5

还有一些其他的 “设置”,可以通过添加几个过滤器来控制。长话短说,对于其中的每一项,你都可以将所附代码添加到你的function.php文件里(或使用像Functionality这样的插件)。

响应性

要禁用响应性,请使用以下代码:

add_filter( 'wc360_js_responsive', '__return_false' );

拖动/触摸控制

要禁用使用拖动/触摸控制,请使用以下代码:

add_filter( 'wc360_js_drag', '__return_false' );

初始旋转

要禁用页面加载时的初始旋转动画,请使用以下代码:

add_filter( 'wc360_js_spin', '__return_true' );

速度

要改变动画的速度,把30改为你想要的任何整数。


add_filter( 'wc360_js_speed', 'wcs_360_custom_speed' );
function wcs_360_custom_speed() {
    return 30;
}

自定义旋转

如果你销售的产品需要垂直旋转,而不是水平旋转呢?甚至是45度角?没问题!

试着在你的custom.css文件中添加以下内容,或者用Simple Custom CSS这样的插件。

/* Rotate 360 Image 90 Degrees */
.threesixty .threesixty_images img {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

如果你想让它以另一种方式旋转90度,可以试试这个:

/* Rotate 360 Image -90 Degrees */
.threesixty .threesixty_images img {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
}

那么整整180度(倒立)呢?当然可以:

/* 将360图片旋转180度(倒置) */
.threesixty .threesixty_images img {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

你可以根据你的需要改变上述代码中的数字,达到你想要的程度。

五、使用最佳图像

为了最大限度地利用WooCommerce 360 Image,对你所使用的图片进行智能处理是很重要的。像图片的顺序、质量和压缩都很重要,所以除非你是一个有经验的360度图片摄影师,否则下面的内容可能对你有帮助。

如何拍摄360º照片

下面的指南可能有助于你拍摄照片。基本上,你要从均匀的角度拍摄12-36张照片。把你的产品放在一个容易旋转的平台/圆盘上是很有用的,这样你就不必为每张照片移动产品或相机。

图像压缩

由于你通常会向你的旋转器加载超过15张照片,如果不是更多的话,把每张图片的尺寸降到最低是至关重要的。一些提示:

  • 小尺寸。不要把图片做得比你需要的大。如果你不使用全屏模式,一定要把它们保持在你要显示的尺寸。
  • 降低质量。这是最重要的一步。你通常可以用Photoshop或任何其他照片编辑软件来做这件事,但要确保你使用一个稍低的质量。除非你从CDN或非常快的服务器上加载你的图片,否则就不需要使用完美的高像素照片。
  • 使用CDN:周围有很多CDN(内容交付网络),可以帮助你从位于离你的用户更近的地方的更快的服务器加载图片。你知道Automattic的Jetpack甚至提供免费使用WordPress.com CDN的服务吗?
  • 图像压缩/优化。使用像EWWW Image Optimizer这样的工具或插件来帮助减少图片的大小而不损害其质量。阅读更多关于网络图像优化的信息。

六、操作和筛选器参考

图像大小名称

默认情况下,它使用的是shop_single的图片尺寸,你可以在WooCommerce > 设置 > 产品下的Product Image Size部分设置。你可以通过使用以下过滤器来过滤你所添加的图片尺寸本身。

add_filter( 'wc360_image_size', 'wcs_360_image_name' );
function wcs_360_image_name() {
    return 'shop_thumbnail';
}

图像尺寸输出

实际输出的图像尺寸默认为全尺寸。这是为了使全屏输出看起来最好。然而,你可能不会使用全屏选项,如果是这样的话,你可能想把它改成别的东西。你可以用一个类似这样的筛选器来做这件事。

add_filter( 'wc360_output_image_size', 'wcs_360_image_size_output' );
function wcs_360_image_size_output() {
    return 'shop_single';
}

图像内容输出

对于内容本身的输出也有一个过滤器。这是一个过滤的基本例子(但实际上不会做任何新的事情):

add_filter( 'wc360_image_output', 'wcs_360_image_output' );
function wcs_360_image_output( $content ) {
    return $content;
}

图片短代码内容输出

您可能还想过滤[wc360]短代码本身的内容。同样,这里有一个基本的例子。

add_filter( 'wc360_shortcode_image_output', 'wcs_360_shortcode_image_output' );
function wcs_360_shortcode_image_output( $content ) {
    return $content;
}

之前/之后的图片内容

  • 此操作用于在正常输出之前添加一些东西:WC360_before_image
  • 此操作是为了在正常输出之后添加一些东西:WC360_After_image

前/后短代码图像内容

  • 此操作用于在短码输出之前添加一些东西:WC360_shortcode_before_image
  • 这个动作是为了在短码输出后添加一些东西:WC360_SHORTCODE_AUTH_IMAGE

七、常见问题

1、我的 “销售 “图标不再显示在图片上了! 我怎样才能把它找回来?

将以下内容添加到你的custom.css文件中,或用Simple Custom CSS这样的插件。

span.onsale { z-index: 999 !important; }

2、图片没有覆盖整列的宽度。我怎样才能让它填满这一栏的宽度?

将以下内容添加到你的custom.css文件中,或用Simple Custom CSS这样的插件。

#container.wc360-container { width: 100% }

注意:根据你的主题,你可能需要使用一个不同的宽度。

3、那特色图片呢?

这应该只是一个你想在档案页和谷歌搜索结果中显示的产品的清晰图像,等等。360图片旋转器只显示在产品的单页上。

4、完全没有显示。哪里设置错了?

尝试切换到默认的Twenty Twelve主题(或其他WordPress核心主题)。如果可以的话,这是一个与主题有关的问题,即主题开发者没有正确显示WooCommerce产品的图片。如果它仍然不显示,可能是插件冲突。试着停用所有其他的插件,看看是否能工作。如果是,就逐一激活,直到找到罪魁祸首。

 收藏 (0) 赞助

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《WooCommerce 360 Image插件安装设置及自定义设计全指南》
文章链接:https://www.banzhuti.com/woocommerce-360-image-settings-guide.html
分享到: 生成海报
版权免责声明

① 本站提供的资源(插件或主题)均为网上搜集,如有涉及或侵害到您的版权请立即通知我们。
② 本站所有下载文件,仅用作学习研究使用,请下载后24小时内删除,支持正版,勿用作商业用途。
③ 因代码可变性,不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
④ 本站保证所提供资源(插件或主题)的完整性,但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑤ 由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识!另本站提供汉化使用安装教程,仅供参考。
⑦ 有时可能会遇到部分字段无法汉化,同时请保留作者汉化宣传信息,谢谢!
⑧ 本站资源售价只是赞助和汉化辛苦费,收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源,欢迎捐助本站开通会员享受优惠折扣,谢谢支持!
⑩ 如果网盘地址失效,请在相应资源页面下留言,我们会尽快修复下载地址。

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

WordPress主题 插件 建站 汉化

定制服务联系我们
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活