[figu78Participant]

Hi,

I’m not sure about the best approach to get something like the attachment.

I mean:

– Always visible topbar.
– Search icon, left side in the menu bar.
– Cart, right side in the menu bar

Could you give me any idea?

Cheers!,
D.

[DarshanaModerator]

Hi there,

Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[figu78Participant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Go to Appereance Customizer Header and select Fixed Top.

On the same tab turn on search.

Add the following code to Appereance Customizer Custom CSS

.x-navbar .desktop .x-nav>li {
   
    float: right;
}

Once you have installed woocommerce you can adjust woocommerce cart on Appereance Customizer Woocommerce.

Hope it helps

Joao

[figu78Participant]

Hi,

– Always visible topbar, now it’s ok.

– How could I move search icon to the left??
– How could I use a custom cart icon??
– Can I add a widget into the topbar?

Thanks in advance!,
D.

[LelyModerator]

Hello D,

Where exactly on the left side you want to move search icon? Screenshot will help so we can be specific on our suggestion.

On what page and what section you wan to use custom cart icon? When you say custom do you mean image?

Yes, but it depends on what kind of widget. Will you use a shortcode? By default, topbar doesn’t process shortcode. We can add the following code on your child theme fuctions.php file to process shortcode:

add_filter('theme_x_topbar_content','x_topbar_do_shortcode');

function x_topbar_do_shortcode($content) {
 return do_shortcode( $content );
}

Hope this helps.

[figu78Participant]

Hi,

There is an attachment in my first message with the position of the search icon (magnifier) and the position of the cart icon.

Both icons will be in the menu bar so it will be visible in every single page.

Yes, when I say a custom cart, I mean a different cart icon and a different layout too (as seen in attachment). And I would like a different icons when cart is empty and when the cart has an item.

As you could see in the attachment, we’d use a text widget in the left side of the topbar.

Image added to this message too.

Cheers!,
D.

[LelyModerator]

Hi There,

Thank you for the clarification.
To move the search icon on the start of the menu(left part), please add the following code on your child theme’s functions.php file:

  function x_navbar_search_navigation_item( $items, $args ) {

    if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
        $searchitems .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
                  . '</a>'
                . '</li>'.$items;
      }
    }

    return $searchitems;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );

What you want to achieve on cart is possible with customization that is beyond the scope of our support. Cart options available can be found on Appearance > Customize > Woocommerce.

For the topbar add it on Appearance > Customize > Header > Set Topbar to ON : Topbar Content.

Hope this helps.

[figu78Participant]

Great!,

Now the search icon is on the left side and topbar looks nice.

Could you just tell me how could I add my custom cart to the right side of the navbar? I will add something like this

<?php global $woocommerce; ?>

  <a href="<?php echo $woocommerce->cart->get_cart_url(); ?>" ><?php if ($woocommerce->cart->cart_contents_count == 0){
        printf( '<img src="%s/images/empty.png" alt="empty" height="25" width="25">', get_stylesheet_directory_uri());
   }else{
       printf( '<img src="%s/images/full.png" alt="full" height="25" width="25">', get_stylesheet_directory_uri());
       }
   ?>  </a>

<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" >
Your Cart : <?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>

Cheers,
D.

[Paul RModerator]

Hi,

You can this in your child theme’s functions.php

function add_custom_cart(){ ?>

 ADD CODE HERE  
 
<?php
}
add_action('x_after_view_global__nav_primary', 'add_custom_cart');

Hope that helps.

[figu78Participant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[figu78Participant]

This reply has been marked as private.

[LelyModerator]

Hi There,

Thank you for the credentials. Add this code instead on your child theme’s functions.php file instead. It is just a variation from your code:

  function x_navbar_custom_cart_navigation_item( $items, $args ) {
     global $woocommerce;
    if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
	  
	  
  		if ($woocommerce->cart->cart_contents_count == 0){
        	$cartimg =  '<img src="'.get_stylesheet_directory_uri().'/images/empty.png" alt="empty" height="25" width="25">';
		}else{
            $cartimg = '<img src="'.get_stylesheet_directory_uri().'/images/full.png" alt="full" height="25" width="25">';
        }
	  
        $items .= '<li class="menu-item x-menu-item x-menu-item-custom-cart">'
                  . '<a href="'. $woocommerce->cart->get_cart_url().'" >'
                    . $cartimg
                  . '</a>'
				  . '<a class="cart-contents" href="'. $woocommerce->cart->get_cart_url().'" >'
				  . 'Your Cart : '.sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count)
				  .' - '. $woocommerce->cart->get_cart_total().'</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_custom_cart_navigation_item', 9998, 2 );

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[figu78Participant]

Absolutely Perfect!,

You really make a great support!.

Thanks!,
D.

[Author]

Posts