- This topic has 9 replies, 4 voices, and was last updated 1 month, 1 week ago by
Fernando.
-
AuthorPosts
-
September 8, 2022 at 8:47 pm #2337566
Ree
I would like to add css class into the cart icon, can I know how can I do that please?
September 8, 2022 at 9:15 pm #2337572Fernando Customer Support
Hi Ree,
Add this PHP snippet:
function custom_cart() { $legacy_icon = add_filter( 'generate_woocommerce_menu_cart_icon', function($output){ return $output; } ); $icon_type = generatepress_wc_get_setting( 'cart_menu_item_icon' ); $icon = ''; if ( function_exists( 'generate_get_svg_icon' ) ) { $icon = generate_get_svg_icon( $icon_type ); } ob_start(); $my_new_class = 'ADD YOUR CLASS HERE'; if ( ! class_exists( 'WooCommerce' ) ) { return; } if ( ! isset( WC()->cart ) ) { return; } $no_items = ''; if ( ! WC()->cart->get_cart_contents_count() > 0 ) { $no_items = 'no-items'; } printf( '<a href="%1$s" class="cart-contents %2$s %3$s %8$s" title="%4$s">%5$s%6$s%7$s<span class="amount">%8$s</span></a>', esc_url( wc_get_cart_url() ), esc_attr( $icon_type ), $icon ? 'has-svg-icon' : '', esc_attr__( 'View your shopping cart', 'gp-premium' ), $icon, sprintf( '<span class="number-of-items %1$s">%2$s</span>', $no_items, WC()->cart->get_cart_contents_count() ), $legacy_icon, WC()->cart->subtotal > 0 ? wp_kses_data( WC()->cart->get_cart_subtotal() ) : '', $my_new_class ); if ( generatepress_wc_get_setting( 'menu_mini_cart' ) && ! is_cart() ) : ?> <div id="wc-mini-cart" class="wc-mini-cart" aria-hidden="true"> <div class="inside-wc-mini-cart"> <?php the_widget( 'WC_Widget_Cart', 'title=' ); ?> </div> </div> <?php endif; return ob_get_clean(); } add_shortcode('add_custom_cart', 'custom_cart'); add_filter('wp_nav_menu_items', 'do_shortcode');
Add your class in
$my_new_class
Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets
Now add you WooCommerce Cart through a Shortcode block with this code
[add_custom_cart]
September 8, 2022 at 10:06 pm #2337591Ree
thank you this works!
September 8, 2022 at 10:19 pm #2337592Fernando Customer Support
You’re welcome Ree!
February 10, 2023 at 9:32 am #2528679Jan
Hi, when i placed the shortcode, the cart is showing nr 1 next to the cart and how can i change it for my own svg? I dont get it. Thx for help.
So where i can place the .svg in the code?
February 11, 2023 at 12:53 pm #2529776Ying
StaffCustomer SupportHi Jan,
What’re your goals? Can you list them out so we can seek the best solution for you?
February 11, 2023 at 2:39 pm #2529869Jan
Hi Ying,
i placed the code, which Fernando mentioned, in my function.php and the shortcode in my header (block header template). But doesnt metter, how many items i have in the cart, it is always showing “1” next to the icon with item numbers. Looks like: icon(4)1. You can see it here: Hermex.ch
So my goals are:
a) fixing this number 1 behind my icon with items inside
b) where in the code from Fernando i can place my custom svg icon.Thx
February 12, 2023 at 11:28 am #2530602Ying
StaffCustomer Supporta) Try this CSS:
.header .shopping-cart font { display: none; } .header a.cart-contents.shopping-cart { display: flex; }
b) Change this line:
$icon = generate_get_svg_icon( $icon_type );
to
$icon = '<span class="gp-icon shopping-cart">your-svg-code</span>';
February 12, 2023 at 11:58 pm #2531015Jan
Hi, to change the icon helped, thx a lot. But the css does not remove the number. I dont know, from where the code is taking the number 1 behind the icon. Must be somewhere in the code from Fernando.
February 13, 2023 at 12:30 am #2531040Fernando Customer Support
For reference, can you provide the link to where we can see your cart icon?
You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
-
AuthorPosts
- You must be logged in to reply to this topic.