Cart into Navigation

Hi,

Your method for moving the cart button is correct except that storefront_primary_navigation is not a valid hook.

Have you moved the navigation itself using a similar method? If so just hook storefront_header_cart into the same action. You will most likely need to apply some CSS to line everything up, though.

For your second point, no that’s not possible. You’d for the filters to ‘stack’ they need to be accessed from the widget.

Hi Jameskoster,

i moved the navigation to the storefront_before_content section, when i do it whit the cart. like this.

function cart_to_navigation(){

remove_action( 'storefront_header', 'storefront_header_cart', 60 );
add_action( 'storefront_before_content', 'storefront_header_cart', 5 );
}
add_action( 'init', 'cart_to_navigation' );

then the cart show bellow the navigation bar(bellow the categorieen), maybe its because i use noo menu plugin for the navigation, is it possible to add new css class into the cart hook?

the second point already thought it, but i doenst really matter.

i got a new question(woocommerce), i want to display social media icons for sharing products. i already seen some plugins for it but i don’t want to use to much plugins. its possible to add the icons i want to display directly to /theme/woocommerce/include/single-produc/sharing.php?

also tried the plugin cart to navigation but it doesnt works

There will very likely be styles from that plugin which inhibit the cart link lining up.

Either way, as you’re moving these elements outside of their intended containers the CSS is going to need some attention regardless. You need to float the nav left an the cart link right.

Thanks.

Hi jamerkoster,

really can’t figure it out, dont need to change anyhing only this:P

i got now.

function child_theme_init() {

	remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
	add_action( 'storefront_before_content', 'woa_primary_nav_wrap', 5 );
	add_action( 'woa_primary_nav', 'storefront_primary_navigation' );
}
add_action( 'init', 'child_theme_init' );

function woa_primary_nav_wrap() {
	?>
		<div class="col-fullmenu">
			<?php do_action( 'woa_primary_nav' ); ?>

		</div>
	<?php
}

function child_cart_init() {

	remove_action( 'storefront_header', 'storefront_header_cart', 50 );
	add_action( 'storefront_before_content', 'woa_primary_cart_wrap', 5 );
	add_action( 'woa_primary_cart', 'storefront_header_cart' );
}
add_action( 'init', 'child_cart_init' );

function woa_primary_cart_wrap() {
	?>
		<div class="col-fullcart">
			<?php do_action( 'woa_primary_cart' ); ?>

		</div>
	<?php
}

and css

.col-fullmenu {
	float: left;
	width: 80%;
}

.col-fullcart {
 float: right;
 width: 20%;
}

but the problem is, it still shows de cart in the header section. look at https://www.medischwijzer.nl

and when i try it on my localhost the cart display 2 times, 1 time in the header and 1 time on the correct place right of the navigation but i am unable to use the navigation ore the cart.

Hi,

Check the priority on your remove_actions. When removing the priority needs to match when it’s added. That’s probably the issue here.

> but i am unable to use the navigation ore the cart.

Could you elaborate? Or upload this so I can see what’s happening.

Hi James,

thx issue whit the cart in the header is resolved it whas a priority setting.

but that problem that you cant do nothing whit the cart of navigation i got the same issue. its something whit.

.col-fullmenu {
	float: left;
	width: 80%;
}

.col-fullcart {
 float: right;
 width: 20%;
}

i add that to the class of the navigation and cart so that they will be the same line. when i remove that css i can use the cart and navigation. but he display the navigation on the full width and the cart shows bellow the navigation also on full width(cart is bellow the home button you see it when you mouse over).

Try adding:

.header-widget-region {
clear: both;
}

Thanks

Hi Jameskoster,

It works, really thank you for the great theme, and the great support. by default free theme authors dont give so niceley support as you to.

https://www.medischwijzer.nl/ as you see it looks like the cart is into the menu, not sure if its working on mobile. but thats for the mobile version^^

if somebody else in the future the same wants here the solution.

functions.php (recommend child theme)

function child_theme_init() {

	remove_action( 'storefront_header', 'storefront_primary_navigation', 50 );
	add_action( 'storefront_before_content', 'woa_primary_nav_wrap', 5 );
	add_action( 'woa_primary_nav', 'storefront_primary_navigation' );
}
add_action( 'init', 'child_theme_init' );

function woa_primary_nav_wrap() {
	?>
		<div class="col-fullmenu">
			<?php do_action( 'woa_primary_nav' ); ?>

		</div>
	<?php
}

function child_cart_init() {

	remove_action( 'storefront_header', 'storefront_header_cart', 60 );
	add_action( 'storefront_before_content', 'woa_primary_cart_wrap', 5 );
	add_action( 'woa_primary_cart', 'storefront_header_cart' );
}
add_action( 'init', 'child_cart_init' );

function woa_primary_cart_wrap() {
	?>
		<div class="col-fullcart">
			<?php do_action( 'woa_primary_cart' ); ?>

		</div>
	<?php
}

style.css (also recommand child theme)

.col-fullmenu {
	float: left;
	width: 80%;
}

.col-fullcart {
    background-color: rgba(68, 108, 179, 1);
    float: right;
    height: 36px;
    width: 20%;
}

.header-widget-region {
clear: both;
}

going to work to the next(single product page)

wish me lucky!:D

Glad you got it working ??