Beaver Builder & Woocommerce 2.6


As the support forums at Beaver Builder have been taken down, I thought I would add this for anyone who needs it.

WooCommerce 2.6 introduced a tabbed menu in the "My Account" page. As the Beaver Builder theme does not yet have CSS support for this, when you upgrade to WooCommerce 2.6 you will get unstyled links (not very good for your design!)

By introducing your own CSS styles, you can tidy up you "My Account" area until a parent theme update arrives.

In beaver builder, click on "Tools" and then "Layout CSS / Javascript", or edit your child theme's style.css


Insert the following, and adjust the styling to suit your site:

.woocommerce-MyAccount-navigation-link{} //Div containing tab
.woocommerce-MyAccount-navigation-link a{} //Tab Link{} //Active Tab


As an example, here is the code for the Evolution Signs "My Account Page"

.woocommerce-MyAccount-navigation-link{list-style:none; border-radius: 4px; padding:6px 12px; margin:5px; background-color:#4ca045; color:#ffffff!important; }
.woocommerce-MyAccount-navigation-link a{color:#fff;}{background-color:#0c0;}

I hope this is helpful to someone.  Until the forums go back online, I will try and put as many Beaver Builder tips on the site as I can.

  1. Mark Krieger on 23rd June 2016 at 2:16 am

    Thanks. This helped a lot when I wanted something for a theme I was working on.

    When you add “display: block;” and “text-decoration: none;” to the a element you make the whole bar clickable and not have the underline on hover:
    .woocommerce-MyAccount-navigation-link a{color:#fff; display: block; text-decoration: none;}
    …at least in our theme…we don’t use the Beaver Builder theme


    • David Woodthorpe on 26th June 2016 at 3:28 am

      Hello Mark – I’m glad this helped you!

      We already have those CSS rules in place, so I didn’t think to include them. Thank you for pointing that out for others who have that issue.

  2. Mariam on 9th August 2016 at 3:53 pm

    Thank you for your help.
    The code don’t work for me. When i integrate the code in css file, nothing is changed.

    • David Woodthorpe on 10th August 2016 at 4:54 pm

      Do you have any cache plugins installed? – if so, try purging the cache and reloading (or you may need to try a hard page refresh in your browser (alt + F5 on windows))

  3. neil on 11th September 2016 at 6:37 pm

    how to center the text? tried
    a{text-align: center} but did not work.

    • David Woodthorpe on 5th October 2016 at 6:37 pm

      Sorry for the late reply – I think you need to apply text-align:center to the containing div rather than the link itself.

      Have you tried adding it to .woocommerce-MyAccount-navigation-link ?

Leave a Comment