Ссылки привязки Woocommerce, скрытые за заголовком

Question

У меня есть фиксированный заголовок на моем сайте 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 не использует традиционные якоря? Любые идеи о том, как я буду работать, чтобы ошибка была видимой ниже заголовка? Благодарю.

Answer 1

Исправлено. Я нашел функцию JQuery, которую использует woocommerce для прокрутки вверху страницы в woocommerce/assets/js/frontend/checkout.min.js. Я изменил смещение для обоего (два) записей ниже моей высоту заголовка (плюс 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); 
}