Beaver Builder & Woocommerce 2.6

beaver-builder-tabbed-account

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
.woocommerce-MyAccount-navigation-link.is-active{} //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;}
.woocommerce-MyAccount-navigation-link.is-active{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

    Mark

    • 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

    Hi,
    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.
    Thanks

    • 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 ?

  4. Sideeq Shafi Rather on 19th July 2017 at 6:20 am

    how to delete “Hello name (not name ? Sign out)” from Dashboard
    may be its my-account-page(Navigation: /wp-content/plugins/woocommerce/templates/myaccount/dashboard.php)

    • admin on 19th July 2017 at 10:55 am

      Hello Sideeq – The best way to do this is to copy dashboard.php from the WooCommerce installation folder to a new folder called woocommerce/myaccount/ in your theme or child theme folder. From here you can alter the output and it won’t be overwritten when WooCommerce is next upgraded. You can then remove or edit the following lines:

      [php]
      <?php
      /* translators: 1: user display name 2: logout url */
      printf(
      __( ‘Hello %1$s (not %1$s? <a href="%2$s" rel="nofollow">Log out</a>)’, ‘woocommerce’ ),
      ‘<strong>’ . esc_html( $current_user->display_name ) . ‘</strong>’,
      esc_url( wc_logout_url( wc_get_page_permalink( ‘myaccount’ ) ) )
      );
      ?>
      [/php]

      I hope this helps!

Leave a Comment