[Support request] Move cart and search icons from header to top-bar

[Emanuel]

Hello

I want to move the search icon and cart icon with all elements they have from header to top bar.
How can I do it?

Thank you

[Elvin]

Hi there,

There are a few things to do to achieve this.

For cart icon:

You can create a portable cart icon you can place everywhere with shortcode.

Here’s a PHP Snippet to do that.

add_shortcode( 'cart_icon', function() {
    ob_start();
    // Start your PHP below
  
    echo generatepress_wc_cart_link();
  
    // End your PHP above
    return ob_get_clean();
} );

With this PHP snippet, you can use [cart_icon] on a text widget within the top bar to display your cart icon.

To remove the cart icon on its present location, simply uncheck “Display cart in menu” on Appearance > Customize > Layout > WooCommerce.

For the search icon:

We can create a search icon shortcode you can place on the topbar the same way you add the cart_icon.

add_shortcode( 'search_icon', function() {
    ob_start();
    // Start your PHP below
  	echo generate_do_navigation_search_button();
	echo '<div class="top-bar-search-wrapper">';    
	generate_navigation_search();
	echo '</div>';    
    // End your PHP above
    return ob_get_clean();
} );

With this you can use [search_icon].

You then remove the search icon from its default position by adding this PHP snippet:

add_action( 'wp', function() {
    if ( 'enable' === generate_get_option( 'nav_search' ) ) {
        remove_action( 'generate_menu_bar_items', 'generate_do_navigation_search_button' );

        remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
    }
}, 20 );

You then add this CSS so the search form is properly positioned on the top bar:

.inside-top-bar {
    position: relative;
}

.navigation-search.nav-search-active input {
    height: 100%;
    width: 100%;
}

[Author]

Posts