WooCommerce My-Account Customizer Mobile menu

WPTurbo » Snippets » WooCommerce My-Account Customizer Mobile menu
0

Created with:

Visibility: 

public

Creator: SmartOps

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project
					<?php

add_action(
    'tgwc_before_account_navigation',
    function() {
        ?>
        <script>
            jQuery( document ).ready( function( $ ) {
                $( '.tgwc-nav-toggle-btn' ).on( 'click', function( e ) {
                    e.preventDefault();
                    $( this ).toggleClass( 'open' );
                    $( '.tgwc-woocommerce-MyAccount-navigation' ).toggleClass( 'open' );
                } );
            } );
        </script>
        <style>
            .tgwc-nav-toggle-btn {
                display: none;
            }
            .tgwc-nav-toggle-btn .open {
                display: inline-block;
            }
            .tgwc-nav-toggle-btn .close {
                display: none;
            }
            .tgwc-nav-toggle-btn.open .close {
                display: inline-block;
            }
            .tgwc-nav-toggle-btn.open .open {
                display: none;
            }
            @media (max-width: 767px) {
                .tgwc-nav-toggle-btn {
                    display: inline-block;
                }
                .tgwc-woocommerce-MyAccount-navigation {
                    left: 0;
                    position: absolute !important;
                    right: 0;
                    top: 38px;
                    background: #10141F;
                    z-index: 1;
                    display: none;
                }
                .tgwc-woocommerce-MyAccount-navigation.open {
                    display: block;
                }
            }
            #tgwc-woocommerce {
                position: relative;
            }
        </style>
        <button class="tgwc-nav-toggle-btn" style="max-width: 40px;">
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="open" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg>
            <svg xmlns="http://www.w3.org/2000/svg"  class="close" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>
        </button>
        <?php
    },
);
				

Register an account to save your snippets or go Pro to get more features.