Login/Register (e.1)
Remove the Login/Register option from the menu.
Create a header.php file in your child theme and copy the code below into it:
<?php
/**
* The Header
*
* Displays all of the <head> section and everything up till <main>
*
* @package Bravada
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<?php cryout_meta_hook(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php endif; ?>
<?php
cryout_header_hook();
wp_head();
?>
</head>
<body <?php body_class(); cryout_schema_microdata( 'body' );?>>
<?php do_action( 'wp_body_open' ); ?>
<?php cryout_body_hook(); ?>
<div id="site-wrapper">
<header id="masthead" class="cryout" <?php cryout_schema_microdata( 'header' ) ?>>
<div id="site-header-main">
<div class="site-header-top">
<div class="site-header-inside">
<div id="header-menu" <?php cryout_schema_microdata( 'menu' ); ?>>
<?php cryout_topmenu_hook(); ?>
</div><!-- #header-menu -->
</div><!-- #site-header-inside -->
</div><!--.site-header-top-->
<?php if ( has_nav_menu( 'primary' ) || ( true == cryout_get_option('theme_pagesmenu') ) ) { ?>
<nav id="mobile-menu" tabindex="-1">
<?php cryout_mobilemenu_hook(); ?>
<?php do_action( 'cryout_side_section_hook' ); ?>
</nav> <!-- #mobile-menu -->
<?php } ?>
<div class="site-header-bottom">
<div class="site-header-bottom-fixed">
<div class="site-header-inside">
<div id="branding">
<?php cryout_branding_hook(); ?>
</div><!-- #branding -->
<?php if ( bravada_check_empty_menu( 'primary' ) && ( has_nav_menu( 'primary' ) || ( true == cryout_get_option('theme_pagesmenu') ) ) ) { ?>
<div class='menu-burger'>
<button class='hamburger' type='button' aria-label="<?php esc_attr_e( 'Main menu', 'bravada' ) ?>">
<span></span>
<span></span>
<span></span>
</button>
</div>
<?php } ?>
<?php if ( bravada_check_empty_menu( 'top' ) && ( has_nav_menu( 'top' ) || ( true == cryout_get_option('theme_pagesmenu') ) ) ) { ?>
<nav id="<?php echo apply_filters('bravada_navigation_compat', 'access') ?>" aria-label="<?php esc_attr_e( 'Top Menu', 'bravada' ) ?>" <?php cryout_schema_microdata( 'menu' ); ?>>
<div> <ul id="custom-login-menu" class="custom-login-menu">
<?php bravada_custom_login_menu(); ?>
</ul> </div>
<?php cryout_access_hook(); ?>
</nav><!-- #access -->
<?php } ?>
</div><!-- #site-header-inside -->
</div><!-- #site-header-bottom-fixed -->
</div><!--.site-header-bottom-->
</div><!-- #site-header-main -->
<div id="header-image-main">
<div id="header-image-main-inside">
<?php cryout_headerimage_hook(); ?>
</div><!-- #header-image-main-inside -->
</div><!-- #header-image-main -->
</header><!-- #masthead -->
<?php cryout_absolute_top_hook(); ?>
<div id="content" class="cryout">
<?php cryout_main_hook(); ?>
<?php
function bravada_custom_login_menu() {
if (is_user_logged_in()) {
$user_display_name = get_user_name_m();
// Output a custom "logged-in user" menu with sub-items
?>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children">
<a href="<?php echo get_permalink( wc_get_page_id( 'myaccount' ) ); ?>"><span><?php echo esc_html($user_display_name); ?></span></a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="<?php echo esc_url(wc_get_endpoint_url('orders', '', wc_get_page_permalink('myaccount'))); ?>"><span>Orders</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="<?php echo esc_url(wc_get_endpoint_url('edit-account', '', wc_get_page_permalink('myaccount'))); ?>"><span>Account Details</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="<?php echo esc_url(wp_logout_url(home_url())); ?>"><span>Log out</span></a></li>
</ul>
</li>
<?php
} else {
// Output a "Login/Register" menu item for guests
?>
<li class="menu-item">
<a href="<?php echo esc_url(site_url('/my-account/')); ?>">Login/Register</a>
</li>
<?php
}
}
add_action("wp_footer", function(){
?>
<style>
#access {
display: flex!important;
flex-direction: row-reverse!important;
}
.menu-item a {
text-decoration: none !important;
}
.menu-item a:hover {
text-decoration: none !important;
}
@media (max-width: 640px) {
#masthead.cryout #access {
display: none !important;
}
}
</style>
<?php
} );
?>
Next, add the following code to the functions.php file:
/* Star custom login menu item to hamburger menu */
function get_user_name_m() {
if (!is_user_logged_in()) { return ""; }
$current_user = wp_get_current_user();
$first_name = ucfirst(strtolower($current_user->user_firstname));
$last_name = ucfirst(strtolower(substr($current_user->user_lastname, 0, 1)));
$username = $current_user->user_login;
$user_display_name = trim("$first_name $last_name");
if (empty($user_display_name)) {
$user_display_name = $username;
} else {
$user_display_name = $user_display_name .".";
}
return $user_display_name;
}
function bravada_add_login_register_menu2($items, $args) {
// Target the specific navigation menu
if ($args->theme_location == 'primary') { // Adjust 'primary' if your menu uses a different location.
if (is_user_logged_in()) {
$user_display_name = get_user_name_m();
// Parent menu item with sub-menu for logged-in users
$items .= '<li class="menu-item menu-item-has-children"><a href="' . esc_url(site_url('/my-account/')) . '">' . esc_html($user_display_name) . '</a>';
$items .= '<ul class="sub-menu">';
$items .= '<li class="menu-item"><a href="' . esc_url(wc_get_endpoint_url('orders', '', wc_get_page_permalink('myaccount'))) . '">Orders</a></li>';
$items .= '<li class="menu-item"><a href="' . esc_url(wc_get_endpoint_url('edit-account', '', wc_get_page_permalink('myaccount'))) . '">Account Details</a></li>';
$items .= '<li class="menu-item"><a href="' . esc_url(wp_logout_url(home_url())) . '">Log out</a></li>';
$items .= '</ul>';
$items .= '</li>';
} else {
// Add Login/Register link for logged-out users
$items .= '<li class="menu-item"><a href="' . esc_url(site_url('/my-account/')) . '">Login/Register</a></li>';
}
}
return $items;
}
add_filter('wp_nav_menu_items', 'bravada_add_login_register_menu2', 10, 2);
/* End custom login menu item to hamburger menu */
/* Start of User name in my account title */
function custom_my_account_page_title($title, $id) {
//print_r($title);
// Check if this is the WooCommerce "My Account" page
if (is_user_logged_in() && get_the_ID() == wc_get_page_id('myaccount') && $title == "Account" && !is_admin() ) {
$user_display_name = get_user_name_m();
$title = esc_html($user_display_name);
}
return $title;
}
add_filter('the_title', 'custom_my_account_page_title', 10, 2);
/* End of User name in my account title */
/* Start of Custom my account shortcode */
function custom_woocommerce_account_menu_shortcode() {
if ( ! is_user_logged_in() ) {
return ''; // Ensure the user is logged in
}
// Get the current endpoint
$current_endpoint = WC()->query->get_current_endpoint();
$current_page = is_wc_endpoint_url() ? $current_endpoint : 'dashboard';
// Define WooCommerce menu items
$menu_items = array(
'dashboard' => array( 'Dashboard', wc_get_account_endpoint_url('dashboard'), 'dashicons-dashboard' ),
'orders' => array( 'Orders', wc_get_account_endpoint_url('orders'), 'dashicons-portfolio' ),
'edit-address' => array( 'Addresses', wc_get_account_endpoint_url('edit-address'), 'dashicons-location' ),
'payment-methods' => array( 'Payment Methods', wc_get_account_endpoint_url('payment-methods'), 'dashicons-cart' ),
'edit-account' => array( 'Account details', wc_get_account_endpoint_url('edit-account'), 'dashicons-admin-users' ),
'customer-logout' => array( 'Log out', wc_get_account_endpoint_url('customer-logout'), 'dashicons-exit' ),
);
ob_start(); ?>
<div class="custom-account-menu">
<?php foreach ( $menu_items as $endpoint => $item ) :
$is_active = $current_page === $endpoint ? 'active' : ''; ?>
<a href="<?php echo esc_url( $item[1] ); ?>" class="menu-link <?php echo esc_attr( $is_active ); ?>">
<div class="menu-item">
<span class="dashicons <?php echo esc_attr( $item[2] ); ?>"></span>
<span><?php echo esc_html( $item[0] ); ?></span>
</div>
</a>
<?php endforeach; ?>
</div>
<style>
.custom-account-menu {
width: 92%;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
justify-content: space-around;
}
.custom-account-menu .menu-link {
text-decoration: none;
color: white;
display: block;
}
.custom-account-menu .menu-link.active {
color: white;
pointer-events: none;
cursor: default;
}
.custom-account-menu .menu-item {
height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
border-radius: 5px;
text-align: center;
background-color: #e9b44c;
gap: 13px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
@media (max-width: 767px) {
.custom-account-menu {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.custom-account-menu .menu-item {
height: 100px;
}
}
.custom-account-menu .menu-item:hover {
transform: translateY(-3px);
}
.custom-account-menu .menu-link.active .menu-item {
background-color: #0f8b8d;
}
.custom-account-menu .dashicons {
font-size: 28px;
margin-bottom: 5px;
}
nav.woocommerce-MyAccount-navigation {
display: none;
}
.woocommerce {
display: flex;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 92% !important;
display: block;
margin: auto;
}
</style>
<?php return ob_get_clean();
}
add_shortcode( 'custom_account_menu', 'custom_woocommerce_account_menu_shortcode' );
/* End of Custom my account shortcode */
In the WordPress Dashboard, navigate to Pages and edit the “My Account” page. Add the following shortcode to that page:
[custom_account_menu]You can place this shortcode either below or above the [woocommerce_my_account] shortcode to create the square menu.
Ivory Search customization (2024-12-11 : some css tweaks )
1- Remove the theme search from the hamburger menu. (You already gone that)
2- Insert the following CSS code in the Ivory Search settings page.
#top-nav {
span.is-search-icon {
background: #E9B44C!important;
transition: background 0.3s ease;
cursor:pointer;
border:none;
}
li.astm-search-menu.is-menu.default.is-first.menu-item:hover span.is-search-icon {
background: #0F8B8D!important;
}
span.is-search-icon svg {
animation: zoomIn 0.4s ease-in-out;
}
li.astm-search-menu.is-menu.default.is-first.menu-item:hover span.is-search-icon svg {
animation: zoomInOut 0.4s ease-in-out;
}
.is-form-style .is-search-submit path {
fill: white!important;
}
form.is-search-form.is-ajax-search input {
border: none !important;
border: 9px solid white!important;
padding: 15px!important;
}
li.astm-search-menu.is-menu.default.is-first.menu-item {
padding: 0px 7px 0px 0px;
border: 1px solid #9E9E9E;
background: white;
margin-right:15px;
}
}
@keyframes zoomInOut {
0% {
transform: scale(1);
}
50% {
transform: scale(.6) translateY(10px);
}
51% {
transform: scale(.6) translateY(-10px);
opacity:.3;
}
100% {
transform: scale(1);
}
}
@keyframes zoomIn {
0% {
transform: scale(1);
}
50% {
transform: scale(.6) translateY(-10px);
}
51% {
transform: scale(.6) translateY(10px);
opacity:.3;
}
100% {
transform: scale(1);
}
}
#mobile-menu {
form {
display: flex;
flex-direction: row-reverse;
height: 60px;
align-items: center;
}
::placeholder {
color: white;
font-family: "Playfair Display", serif;
font-size: 1.6rem;
text-align: left;
}
label {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
span.is-search-icon {
background: #00000000!important;
transition: background 0.3s ease;
cursor:pointer;
border:none;
}
.is-form-style .is-search-submit path {
fill: white!important;
}
input[type=search] {
background: #ffffff00 !important;
border:0px solid #ffffff !important;
height: 100%;
width: 100%;
font-family: "Playfair Display", serif;
font-size: 1.6rem!important;
text-align: left;
color:white;
}
li.astm-search-menu.is-menu.default.is-first.menu-item {
border:0px solid #ffffff !important;
border-bottom-width: 2px!important;
}
span.is-search-icon {
transform:scale(1.5) translateY(0px);
}
span.is-search-icon svg {
animation: zoomIn 0.3s ease-in-out;
}
li.astm-search-menu.is-menu.default.is-first.menu-item:hover span.is-search-icon svg {
animation: zoomInOut 0.3s ease-in-out;
}
}
span.stock-status.is-in-stock {
font-size: 1rem;
}
.is-ajax-search-details .input-text.qty.text {
width: 35px!important;
height: 30px!important;
padding: 1px 5px 1px 10px!important;
background: #e2e2e2!important;
background-color: #e2e2e2!important;
}
3- Add the provided code to your functions.php file. (You already gone that)
// Ivory Search customization START
add_action('wp_footer', function(){ if ( !is_admin() ) { ?>
<script>
document.querySelectorAll('input[type="search"]').forEach(input => {
input.placeholder = "Search the vault...";
});
const mobileMenu = document.querySelector('nav#mobile-menu');
const searchInput = document.querySelector('nav#mobile-menu input.is-search-input');
if (mobileMenu) {
mobileMenu.addEventListener('transitionend', () => {
if (mobileMenu.classList.contains('burgermenu-active') && searchInput) {
document.documentElement.style.overflow = 'hidden'
searchInput.focus();
} else if (searchInput) {
searchInput.blur();
document.documentElement.style.overflow = ''
}
});
}
searchInput.addEventListener('keydown', () => {
const dropdownToggle = document.querySelector('#mobile-menu button.dropdown-toggle');
if (dropdownToggle) {
if (!dropdownToggle.classList.contains('toggle-on')) {
dropdownToggle.click();
}
}
});
</script>
<?php } } );
// Ivory Search customization END[ajax-list] Plugin (2024-11-29 – Add to card bugs)
Update the plugin and clear the cache.
2.Create two files in your bravada-plus-child folder (woocommerce.php and search.php) and paste the code below into them. If these files already exist, simply edit them.
search.php
<?php
// search.php
get_header(); ?>
<div id="container" class="<?php bravada_get_layout_class(); ?>">
<main id="main" class="main">
<?php cryout_before_content_hook(); ?>
<?php if ( have_posts() ) : ?>
<header class="page-header content-search pad-container" <?php cryout_schema_microdata( 'element' );
?>>
<h1 class="page-title" <?php cryout_schema_microdata( 'entry-title' );
?>>
<?php printf( __( 'Search Results for: %s', 'bravada' ), '<strong>' . get_search_query() . '</strong>' );
?>
</h1><br>
<?php get_search_form(); ?>
</header>
<div id="content-masonry" class="content-masonry" <?php cryout_schema_microdata( 'element' );
?>>
<?php /* Start the Loop */
/* while ( have_posts() ) : the_post();
get_template_part( 'search/content', '' );
endwhile;
*/
?>
</div><!--content-masonry-->
<?php
// bravada_pagination();
echo do_shortcode('[ajax-list sort="default" ]');
else :
get_template_part( 'content/content', 'notfound' );
?> <div id="content-masonry"></div> <?php
cryout_empty_page_hook();
endif; ?>
<?php cryout_after_content_hook(); ?>
</main><!-- #main -->
<?php bravada_get_sidebar(); ?>
</div><!-- #primary -->
<?php get_footer(); ?>
woocommerce.php
<?php
//woocommerce.php
get_header(); ?>
<div id="container" class="<?php bravada_get_layout_class(); ?>">
<main id="main" class="main">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'hentry' ); ?>>
<div class="article-inner">
<?php cryout_before_content_hook(); ?>
<?php
if (is_product_category()) {
$term = get_queried_object();
$category_id = $term->term_id;
echo do_shortcode('[ajax-list cats="'.$category_id.'" sort="default" ]');
}
else if (is_product_tag()) {
$term = get_queried_object();
$tag_id = $term->term_id;
echo do_shortcode('[ajax-list tags="'.$tag_id.'" sort="default" ]');
}
else {
?>
<?php woocommerce_content(); ?>
<?php } ?>
<?php cryout_after_content_hook(); ?>
</div><!-- .article-inner -->
</article><!-- #post-## -->
</main><!-- #main -->
<?php bravada_get_sidebar(); ?>
</div><!-- #container -->
<?php get_footer();
3.Additionally, remove lines 301–310 in functions.php, as they are no longer needed and conflict with my code.
// Remove this 👇
add_filter( 'pre_get_posts', function( $query ) {
if ( $query->is_search && ! is_admin() ) {
$query->set( 'post_type', 'product' );
$query->is_post_type_archive = true;
}
}, 9 );Here’s a quick guide to using the [ajax-list] shortcode:
- Attributes it accepts:
cats: Enter a category ID to filter products (leave empty to show all).sort: Options include:""or “default” (latest added products)"popularity""rating""date""price""price-desc""alphabetical""alphabetical-desc".
n: Number of products to display initially.p: Set to"off"to hide pagination and the “Load More” button.
- Examples:
- Recent products in Africa category:
[ajax-list cats="44"] - Last 4 products in Africa category without pagination:
[ajax-list cats="44" sort="default" n="4" p="off"] - 9 Recent Products in all categories:
[ajax-list cats="" sort="default" n="9"](9 products in 3 rows of 3).
- Recent products in Africa category: