- This topic has 29 replies, 4 voices, and was last updated 5 years, 1 month ago by David.
-
AuthorPosts
-
March 14, 2019 at 4:01 pm #839274Pedro
Hello! I need help with something.
I’ve been trying to set up the mobile header but I can not get it right.
I currently have it like this: https://www.dropbox.com/s/79a4pt30vn76013/IMG_2309.PNG?dl=0
I would like the header to be centered, and to move the location of the icons. I would like it to be in the following order:
Menu / Logo / Search / Cart
I hope you please help me. Thank you!
March 14, 2019 at 4:09 pm #839276LeoStaffCustomer SupportHi there,
What do you mean you want the header to be centered? Like the logo?
Give this CSS a shot first:
#mobile-header .menu-toggle { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } #mobile-header .site-logo { position: absolute; left: calc( 50% - 90px); /* 50% from the left - half your image width */ }
March 14, 2019 at 7:45 pm #839358PedroHello Tom! Thanks for answering.
I explain what I want to do, I would like it:
1. The logo of the site is centered.
2. On the left, the menu button is located
3. On the right, locate the search and cart button
4. The cart does not show the value of the products, on the contrary it shows the quantity of products in the cart.Thank you!
March 14, 2019 at 8:47 pm #839372LeoStaffCustomer SupportI’m Leo 🙂
Can you try my CSS above first?
March 14, 2019 at 9:08 pm #839376PedroHi leo! Sorry! LOL
I already test the code and do what I want, however the cart icon keeps showing the price and not the quantity of the items in the cart.
Another thing that I would also like to do is that the search icon be replaced by a search section within the menu (only in the mobile version) Can it be done?
Thank you!
March 14, 2019 at 9:14 pm #839379LeoStaffCustomer SupportDo you want to show quantity on both desktop and mobile?
It’s quite complicated only having it on mobile but doable if you want both.
It’s also quite complicated to have the search bar only on mobile. I can point you in the right direction if you can tackle the styling part yourself?
March 15, 2019 at 6:56 am #839854PedroHi leo!
Already knowing this, then please help me show the amount of items in the cart in both versions (mobile and desktop)
Thank you!
March 15, 2019 at 8:19 am #839920LeoStaffCustomer SupportMarch 15, 2019 at 9:44 am #840026PedroHi leo!
I have added the codes but now I see the texts “cart and item”
I just want you to show the number.
March 15, 2019 at 10:18 am #840060LeoStaffCustomer SupportNot sure what you mean but this is what I see when I add one item:
https://www.screencast.com/t/pgWzIDgfBwYMarch 15, 2019 at 10:23 am #840064PedroHi leo!
That’s because I added another code that I found in the forum while you help me with this.
Using the code of the item you gave me, this happens: https://www.dropbox.com/s/1daneuk8hklct2y/Captura%20de%20pantalla%20de%202019-03-15%2013-22-28.png?dl=0
March 15, 2019 at 10:38 am #840079LeoStaffCustomer SupportAwesome. So the issue is solved?
Can you let me know which code you’ve added?
Thanks!
March 15, 2019 at 10:39 am #840081PedroHi leo!
The problem is not solved. The code moves the cart’s location and search.
Also always shows a 0 when the cart is empty.
The code I used was:
function tu_custom_wc_cart_link() { ob_start(); $no_items = ''; if ( ! WC()->cart->get_cart_contents_count() > 0 ) { $no_items = 'no-items'; } ?> <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="cart-contents" title="<?php esc_attr_e( 'View your shopping cart','generate-woocommerce' ); ?>"> <?php echo sprintf ( _n( '<span class="number-of-items ' . $no_items . '">%d</span>', '<span class="number-of-items ' . $no_items . '">%d</span>', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> </a> <?php return ob_get_clean(); } function tu_custom_wc_menu_cart( $nav, $args ) { if ( $args->theme_location == 'primary' && generatepress_wc_get_setting( 'cart_menu_item' ) ) { return sprintf( '%1$s <li class="wc-menu-item %4$s" title="%2$s"> %3$s </li>', $nav, esc_attr__( 'View your shopping cart','generate-woocommerce' ), tu_custom_wc_cart_link(), is_cart() ? 'current-menu-item' : '' ); } // Our primary menu isn't set, return the regular nav return $nav; } function tu_custom_wc_mobile_cart_link() { if ( function_exists( 'generatepress_wc_get_setting' ) && ! generatepress_wc_get_setting( 'cart_menu_item' ) ) { return; } ?> <div class="mobile-bar-items wc-mobile-cart-items"> <?php do_action( 'generate_mobile_cart_items' ); ?> <?php echo tu_custom_wc_cart_link(); ?> </div><!-- .mobile-bar-items --> <?php } add_filter( 'woocommerce_add_to_cart_fragments', 'tu_wc_cart_link_fragment' ); function tu_wc_cart_link_fragment( $fragments ) { global $woocommerce; $fragments['.cart-contents span.number-of-items'] = ( WC()->cart->get_cart_contents_count() > 0 ) ? '<span class="number-of-items">' . wp_kses_data( WC()->cart->get_cart_contents_count() ) . '</span>' : '<span class="number-of-items no-items"></span>'; return $fragments; } add_action( 'after_setup_theme','tu_remove_wc_cart_item' ); function tu_remove_wc_cart_item() { remove_filter( 'wp_nav_menu_items','generatepress_wc_menu_cart', 10, 2 ); add_filter( 'wp_nav_menu_items','tu_custom_wc_menu_cart', 10, 2 ); remove_action( 'generate_inside_navigation','generatepress_wc_mobile_cart_link' ); remove_action( 'generate_inside_mobile_header','generatepress_wc_mobile_cart_link' ); add_action( 'generate_inside_navigation','tu_custom_wc_mobile_cart_link' ); add_action( 'generate_inside_mobile_header','tu_custom_wc_mobile_cart_link' ); }
March 15, 2019 at 4:17 pm #840226TomLead DeveloperLead DeveloperI’m still just seeing the price. Is that code active right now?
What do you mean by moves the location?
March 15, 2019 at 4:21 pm #840228PedroHello Tom!
The code is not active at this time.
When I refer to which moves the items, is that by default the order is: Search / Cart
When I add the code it looks like this: Cart / Search
Also, when the cart is empty it shows a zero (0)
-
AuthorPosts
- You must be logged in to reply to this topic.