CODEWITHSUNDEEP
wordpresswoocommerceanchor-scroll
Marc Schwarz
Marc Schwarz

Reputation: 25

Woocommerce anchor links hidden behind header

I have a fixed header on my wordpress site (http://www.libertadtravel.com) so when anchor links are used, the anchor is hidden behind the header. No worries - I fixed that with the following:

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

My problem is that this has no effect with the built-in woocommerce functions on checkout. I get an error when trying to pay and the page scrolls back up to reveal the error - except it's hidden behind the header. I tried the following without luck:

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

I guess woocommerce isn't using the traditional anchors? Any ideas how I'd get this functioning so that the error is visable below the header? Thanks.

Upvotes: 0

Views: 1570

Answers (3)

themissionmars
themissionmars

Reputation: 117

Another way of fixing this on the checkout is to add this CSS to offset the position of the anchor. Set both values to your desired offset. Just add it to your main css file.

.woocommerce-NoticeGroup-updateOrderReview, .woocommerce-NoticeGroup-checkout{
    margin-top: -200px;
    padding-top: 200px;
}

Upvotes: 1

Dexter Adams
Dexter Adams

Reputation: 524

You can actually override the WooCommerce global function by doing this in your own enqueued JS file:

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

Upvotes: 0

Marc Schwarz
Marc Schwarz

Reputation: 25

Fixed. I found the JQuery function that woocommerce uses to scroll to the top of the page in woocommerce/assets/js/frontend/checkout.min.js. I changed the offset for both (two) entries of the below to my header height (plus 10-15):

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

I then copied this to a new .js file and enqueued it through my functions.php with the following:

// 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);
}

Upvotes: 0

Related Questions