Hi,
I was trying to move the woocommerce cart/icon to the topbar by following the code in this link https://theme.co/apex/forums/topic/moving-woocommerce-cart-from-navbar-to-top-bar/
but it seems to just add the cart total in the Navbar. Please see attached.
Thanks
Hi there,
Thanks for posting in.
That thread is old and the custom code is only applicable for the template or structure at that time. You could try a plugin like this https://wordpress.org/plugins/woocommerce-menu-bar-cart/.
Thanks!
Thank you Rad. It seems like this Plugin is to display the cart button on the navigation bar which already is there. I want to move the cart to the Topbar. Is this possible?
Hi,
You can try this, create file _topbar.php in wp-content\themes\x-child\framework\legacy\cranium\headers\views\global
and copy the code below into that file.
<?php
// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================
?>
<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>
<div class="x-topbar">
<div class="x-topbar-inner x-container max width">
<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
<?php endif; ?>
<?php x_social_global(); ?>
<span class="top-cart"><?php x_woocommerce_navbar_cart(); ?></span>
</div>
</div>
<?php endif; ?>
Please note that you need to create these folders in your child theme as they are not created by default legacy\cranium\headers\views\global
Hope that helps
Thanks Paul for your advise. I have upgraded to Pro and my old header got successfully migrated. Everything looks as the same as it was in X. Can I still apply the above code with Pro? Please advise.
Thanks
Hi There,
If you are still using legacy header not the header built in PRO, yes, you can use the same code. It will still work.
Hello,
I am sorry but the above code did not work. Please advise.
Thank you
Hi There,
Possible reasons why it might not work are:
2.) Wrong folder name or location on the child theme. I can see some users asking the same thing why it is not working and turns out there’s typo error on the folder name. Make sure that is added on the correct folder path too.
If both is check and the issue persist, we need to check your setup. Please share site URL wordpress and FTP credentials on a secure note so we can investigate. Thank you.
Hello,
I cleared the cache and the folder path looks correct.
Hi,
Sorry it needs to be echoed for it to show up.
Kindly change the code in _topbar.php to this.
<?php
// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================
?>
<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>
<div class="x-topbar">
<div class="x-topbar-inner x-container max width">
<span class="top-cart"><?php echo x_woocommerce_navbar_cart(); ?></span>
<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
<?php endif; ?>
<?php x_social_global(); ?>
</div>
</div>
<?php endif; ?>
Thanks
Thank you Paul. Yes, this moved the cart to the topbar but it does not have a thick border like the cart on the menu bar, also it is not clickable.
Hi There,
Let’s update your _topbar.php code as follows.
<?php
// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================
?>
<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>
<div class="x-topbar">
<div class="x-topbar-inner x-container max width">
<a class="cart-contents" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>
<?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
<?php endif; ?>
<?php x_social_global(); ?>
</div>
</div>
<?php endif; ?>
Then add the following CSS rules into your Customizer, Custom > Edit Global CSS area.
.cart-contents {
border: 0.25em solid black;
padding: 5px;
border-radius: 5px;
}
Hope that helps.
Hello,
The code worked. Thank you for all the support.
Glad we could help.
Cheers!
Hi does this adjustment still work? I looked into my files and I don’t see the path you described. Instead of wp-content\themes\x-child\framework\legacy\cranium\headers\views\global
I see
wp-content\themes\x-child\framework\views
Where should I place this file to show the woocommerce cart in the topbar?
So I see where to place the file in X but not in the child theme. Looks the child theme is drawing from X but within the child theme I don’t have the specific path/folders to place the file.
Hello @ryskamrr,
Thanks for updating this thread.
By default, you only have wp-content\themes\x-child\. Any additional folder as stated in the previous responses should be added in your child theme because it does not exist yet. That means that you will have to create the folder path content\themes\x-child\framework\legacy\cranium\headers\views\global. Meaning, you will manually create that folder directory structure. You can only do it by logging in to your FTP. For more details about the Child theme and how you can customize through the child theme, please check this out:
By the way, I have removed your credentials because the original creator of this thread can see it.
Best Regards.
thank you!
A couple more questions:
How do I get it to display:
How do I align the cart box to the right with all of my other topbar content? The box is also flush against the top of the site and I tried adding a margin but it’s stuck to the top, how do I bring it down some to look similar to the spacing for my other topbar content?