I'm trying to determine if it's possible to add a button that toggles css styling. I thought of starting with something like this:

add_action ('woocommerce_before_cart' , 'cart_multi_step_buttons' , 2 );
function cart_multi_step_buttons() {
<button class="cart-multi-step-button-1" onclick="cart_ms-1()">
    Step 1
function cart_ms-1() {
    var x = document.getElementsByClassName("cart_totals");
    if (x.style.display === "none") {
        x.style.display = "block";
    else {
        x.style.display = "none";

So, when the cart page is loaded on my woocommerce store, there would be a button that would toggle the cart-totals div's visibility (main idea is to develop a simple way to convert the cart page to a multi-step process without lots of template work). But this doesn't seem to work.

I also thought perhaps it'd be possible to modify this so that each button is associated with a short bit of css code, which on click would either be activated or not, but am unsure how to go about that.

Any suggestions on 1) if this kind of thing is even possible without editing woo templates, and 2) if it is, what I need to change in my code to make it work.

Thanks in advance for any help/pointers.


The getElementsByClassName, as the name suggests returns a collection of Elements, meaning an array, so x.style.display won't work. x[0].style.display would work for the first element that it finds. But since this is Wordpress, which by default loads Jquery, you could use:

      'background': 'red',
      'display': 'none',

You could also toggle a class with jQuery, and add the css yourself:


The css:

  background: red;
  display: none;
  • Thanks! That does the trick perfectly! The toggle.Class option is what I'm going to go with. – Jon Fergus Jun 23 '18 at 12:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.