0

我的 wordpress 网站 ( http://www.libertadtravel.com ) 上有一个固定的标题，所以当使用锚链接时，锚隐藏在标题后面。不用担心 - 我用以下方法解决了这个问题：

:target:before {
    content: "";
    display: block;
    height: 156px;
    margin-top: -156px;
}

我的问题是这对结帐时内置的 woocommerce 功能没有影响。尝试付款时出现错误，页面向上滚动以显示错误 - 除非它隐藏在标题后面。我没有运气就尝试了以下方法：

.woocommerce-error:before {
    content: "";
    display: block;
    height: 156px;
    margin-top: -156px;
    }

我猜 woocommerce 没有使用传统的主播？任何想法如何让这个功能发挥作用，以便错误在标题下方可见？谢谢。

4

3 回答 3

0

固定的。我在 woocommerce/assets/js/frontend/checkout.min.js 中找到了 woocommerce 用来滚动到页面顶部的 JQuery 函数。我将以下两个（两个）条目的偏移量更改为我的标题高度（加上 10-15）：

// Scroll to top
    $( 'html, body' ).animate({
    scrollTop: ( $( 'form.checkout' ).offset().top - 100 )
}, 1000 );

然后，我将其复制到一个新的 .js 文件中，并通过我的 functions.php 将其排入队列，其中包含以下内容：

// Use my own Woocommerce checkout js to correct scroll-to-top height
add_action('wp_enqueue_scripts', 'override_wc_checkout_script');
function override_wc_checkout_script() {
    wp_deregister_script('wc-checkout');
    wp_enqueue_script('wc-checkout', get_stylesheet_directory_uri() . '/woocommerce/js/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
}
于 2015-07-24T13:23:31.123 回答
0

您实际上可以通过在您自己的排队 JS 文件中执行此操作来覆盖 WooCommerce 全局函数：

// Common scroll to element code.
$.scroll_to_notices = function(scrollElement) {
  if(scrollElement.length) {
    $('html, body').animate({
      scrollTop: (scrollElement.offset().top - 200)
    }, 300);
  }
};

于 2020-11-11T20:18:05.290 回答
0

在结帐时解决此问题的另一种方法是添加此 CSS 以偏移锚点的位置。将这两个值设置为所需的偏移量。只需将其添加到您的主 css 文件中。

.woocommerce-NoticeGroup-updateOrderReview, .woocommerce-NoticeGroup-checkout{
    margin-top: -200px;
    padding-top: 200px;
}
于 2021-01-27T05:21:37.180 回答