Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to set pointer event to none for cart icon if in cart or checkout page – Woocommerce

I am trying to set a pointer event to none using javascript and php but not having any luck.

Basically, if I am on the cart or checkout page (woocommerce), then I want the cart icon (class name provided) to have no pointer event set over the cart. Else if it’s on any other page then set pointer to it.

Currently the pointer still appears on the cart icon in cart of checkout page. What am I doing incorrect?

add_action('posts_selection', 'cart_icon_pointer');

function cart_icon_pointer(){
    if ( is_cart() || is_checkout() || is_page('cart') || is_page('checkout') ) {
        ?>
        <script>                
        function cartNoPointer() {
          document.getElementByClassName("ast-cart-menu-wrap").style.pointerEvents = "none";
        }
        </script>
        <?php
        } else {
        ?>
        <script>
        function cartPointer() {
            document.getElementByClassName("ast-cart-menu-wrap").style.pointerEvents = "pointer";
        }
        </script>
        <?php
    }
}

I was following this for guidance: https://docs.woocommerce.com/document/conditional-tags/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    add_action('posts_selection', 'check_cart_checkout_page');
function check_cart_checkout_page(){
    if(is_cart() || is_checkout()){
        cart_icon_pointer_none();       
    }
    else{
        cart_icon_pointer_auto();
    }
}

add_action( 'wp_footer', 'cart_icon_pointer_none');
add_action( 'wp_footer', 'cart_icon_pointer_auto');
function cart_icon_pointer_none(){
    ?>
    <script>
        (function(jQuery) {
        jQuery('.ast-header-woo-cart').css('pointer-events', 'none');
        });
   
    </script>
    <?php
}

function cart_icon_pointer_auto(){
    ?>
    <script>
        (function(jQuery) {
        jQuery('.ast-header-woo-cart').css('pointer-events', 'auto');
        });
    </script>
    <?php
}

  2. 0

    The correct call should be…

    document.getElementsByClassName()

    In PLURAL!

    And you need to specify the element number of the collection, like this…

    document.getElementsByClassName("ast-cart-menu-wrap")[0].style.pointerEvents = "none";

    Pass the element number variable you want to operate on, as a parameter to your functions…

    function cartNoPointer(Num) {document.getElementsByClassName("ast-cart-menu-wrap")[Num].style.pointerEvents = "none";}


function cartPointer(Num) {document.getElementsByClassName("ast-cart-menu-wrap")[Num].style.pointerEvents = "auto";}

    Btw, there’s no "pointer" value but "auto".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search