javascript - WooCommerce 图像缩放

Question

我是该网站的新用户。我在开发自己的 WordPress 主题时遇到问题。我已经安装了名为 Woocommerce 图像缩放的 WordPress 插件。悬停缩放功能不起作用。在其他主题中它很好。它是唯一安装和使用的插件，但我认为在我的主题中我必须进行一些更改或者必须添加一些 javascript 代码？我使用 jquery、bootstrap js 和自己的 js 文件，代码很少。有人可以帮我做什么吗？我可以从哪里开始？

第二个问题是如何在没有插件的情况下更改单个产品页面布局？我想插入引导列类。我想在左列上显示图像，在右列上显示其他图像(属性、订单按钮等)。我该怎么做？

谢谢安德鲁

Answer 1

对于 Woocommerce 图像缩放，一定存在与插件冲突的 JavaScript，从而阻止其正常工作。为此，请检查控制台中是否有任何错误。引用这里https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors

可能它与我们的主题不兼容，它与您正在使用的主题不兼容。请停用该主题并在 WordPress 默认主题(WordPress 2017 主题)上尝试一下，看看是否有效。

关于第二个问题:您可以做的是将 single-product.php 模板复制到子主题中的 WooCommerce 文件夹中。更改文件名并修改文件，然后使用 single_template 或 template_include 以及正确的条件标记，如下所示:

single_template

function get_custom_post_type_template($single_template) {
 global $post;

 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );

template_include

add_filter( 'template_include', 'portfolio_page_template', 99 );

function portfolio_page_template( $template ) {

    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }

    return $template;
}