客户使用Woocommerce插件配合Avada主题6.23版本做外贸站点，觉得原有悬浮登录表单太丑，找到我们做了优化，优化效果如图：
上代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
function avada_add_login_box_to_nav($items, $args) { $ubermenu = (function_exists('ubermenu_get_menu_instance_by_theme_location') && ubermenu_get_menu_instance_by_theme_location($args->theme_location)) ? true : false; // Disable woo cart on ubermenu navigations. if ($ubermenu) { return $items; } $is_login = is_user_logged_in(); if (in_array($args->theme_location, ['main_navigation', 'top_navigation', 'sticky_navigation'])) { $is_enabled = ('top_navigation' === $args->theme_location) ? Avada()->settings->get('woocommerce_acc_link_top_nav') : Avada()->settings->get('woocommerce_acc_link_main_nav'); $header_layout = Avada()->settings->get('header_layout'); if (class_exists('WooCommerce') && $is_enabled) { $woo_account_page_link = wc_get_page_permalink('myaccount'); if ($woo_account_page_link) { $active_classes = (is_account_page()) ? ' current-menu-item current_page_item' : ''; $my_account_link_contents = $is_login ? esc_html__('My Account', 'Avada') : 'Login / Register'; $items .= '<li class="menu-item fusion-dropdown-menu menu-item-has-children fusion-custom-menu-item fusion-menu-login-box' . $active_classes . '">'; // If chosen in Theme Options, display the caret icon, as the my account item alyways has a dropdown. $caret_icon = ''; $caret_before = ''; $caret_after = ''; if ('none' !== Avada()->settings->get('menu_display_dropdown_indicator') && 'v6' !== $header_layout) { $caret_icon = '<span class="fusion-caret"><i class="fusion-dropdown-indicator"></i></span>'; } if ('right' === fusion_get_option('header_position') && !is_rtl() || 'left' === fusion_get_option('header_position') && is_rtl()) { $caret_before = $caret_icon; } else { $caret_after = $caret_icon; } $menu_highlight_style = Avada()->settings->get('menu_highlight_style'); $items .= '<a href="' . $woo_account_page_link . '" aria-haspopup="true" class="fusion-' . $menu_highlight_style . '-highlight">' . $caret_before . '<span class="menu-text">' . $my_account_link_contents . '</span>' . $caret_after; if ('main_navigation' === $args->theme_location && 'v6' !== $header_layout) { $items = apply_filters('avada_menu_arrow_hightlight', $items, true); } $items .= '</a>'; if ('v6' !== $header_layout) { if (!is_user_logged_in()) { $referer = fusion_get_referer(); $referer = ($referer) ? $referer : ''; $items .= '<div class="fusion-custom-menu-item-contents">'; $items .= "<p>Welcome to Wbox</p>"; if (isset($_GET['login']) && 'failed' === $_GET['login']) { // phpcs:ignore WordPress.Security.NonceVerification $items .= '<p class="fusion-menu-login-box-error">' . esc_html__('Login failed, please try again.', 'Avada') . '</p>'; } $items .= '<form action="' . esc_attr(site_url('wp-login.php', 'login_post')) . '" name="loginform" method="post">'; $items .= '<p><input type="text" class="input-text" name="log" id="username" value="" placeholder="' . esc_html__('Username', 'Avada') . '" /></p>'; $items .= '<p><input type="password" class="input-text" name="pwd" id="password" value="" placeholder="' . esc_html__('Password', 'Avada') . '" /></p>'; $items .= '<p class="fusion-remember-checkbox"><label for="fusion-menu-login-box-rememberme"><input name="rememberme" type="checkbox" id="fusion-menu-login-box-rememberme" value="forever"> ' . esc_html__('Remember Me', 'Avada') . '</label></p>'; $items .= '<input type="hidden" name="fusion_woo_login_box" value="true" />'; $items .= '<p>'; $items .= '<input type="submit" name="wp-submit" id="wp-submit" class="button button-small login" value="' . esc_html__('Log In', 'Avada') . '">'; $items .= '<input type="hidden" name="redirect" value="' . esc_url($referer) . '">'; $items .= '</p>'; $items .= '</form>'; $items .= '<div class="fusion-clearfix"></div>'; $items .= "<p>New Customer?</p>"; $items .= '<p><a class="button button-small default register" href="' . get_permalink(get_option('woocommerce_myaccount_page_id')) . '" title="' . esc_attr__('Register', 'Avada') . '">' . esc_attr__('Register', 'Avada') . '</a></p>'; $items .= '</div>'; } else { $account_endpoints = wc_get_account_menu_items(); unset($account_endpoints['dashboard']); $items .= '<ul class="sub-menu">'; foreach ($account_endpoints as $endpoint => $label) { $active_classes = (is_wc_endpoint_url($endpoint)) ? ' current-menu-item current_page_item' : ''; $items .= '<li class="menu-item fusion-dropdown-submenu' . $active_classes . '">'; $items .= '<a href="' . esc_url(wc_get_account_endpoint_url($endpoint)) . '">' . esc_html($label) . '</a>'; $items .= '</li>'; } $items .= '</ul>'; } } $items .= '</li>'; } } } return $items; } |
以上代码添加到主题functions.php后面即可
样式代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.fusion-menu-login-box .fusion-custom-menu-item-contents { width: 280px; text-align: center; background-color: #fff !important; border: 1px #ababab solid !important; } .fusion-menu-login-box .fusion-custom-menu-item-contents form{ padding-bottom: 10px; border-bottom: 1px #eee solid; margin-bottom: 5px; } .fusion-menu-login-box .fusion-custom-menu-item-contents .login{ width: 100%; background: var(--primary_color); border-color: var(--primary_color); color: #fff; padding: 5px 15px; line-height: var(--body_typography-line-height); font-size: var(--body_typography-font-size); border: none; } .fusion-menu-login-box .fusion-custom-menu-item-contents .register{ background: #fff; border-color: var(--primary_color); color: var(--primary_color); padding: 5px 15px; line-height: var(--body_typography-line-height); font-size: var(--body_typography-font-size); border: 1px; border-style: solid; } |
主题设置的自定义CSS区域输入即可