If you’re using WooCommerce to sell products on your WordPress site, then you may want to display a “cart” icon in the header area of your mobile view. This can be done by adding a simple piece of code to your child theme’s functions.php file.
Here’s the code you’ll need to add:
add_action( 'wp_enqueue_scripts', 'mh_dequeue_woocommerce_styles', 99 );
function mh_dequeue_woocommerce_styles() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
wp_dequeue_style( 'woocommerce-general' );
wp_deregister_style( 'woocommerce-general' );
}
}
}This code will ensure that the WooCommerce stylesheet is only loaded on WooCommerce pages, and not on other pages of your site. This will help keep your mobile view clean and uncluttered.
First, the cart icon will only be visible in the mobile view if you have the WooCommerce plugin installed and activated. Secondly, if you have any other plugins that add their own icons to the mobile view, they may conflict with the cart icon and cause it to not be displayed properly. Finally, if you have a lot of products in your WooCommerce store, the cart icon may not be visible on all devices due to screen size limitations.
Here’s how to add the code to your functions.php file:
- Log in to your WordPress site.
- Navigate to Appearance > Editor.
- On the right hand side, locate the functions.php file under Theme Files.
- Click on the functions.php file to open it in the editor.
- Scroll down to the bottom of the file and paste in the code.
- Click on the Update File button to save your changes.
That’s it! You’ve now added a cart icon to your WooCommerce mobile view.
Conclusion:
Adding a cart icon to your WooCommerce mobile view can help make it easier for customers to purchase products from your site. By adding a simple piece of code to your child theme’s functions.php file, you can easily add this functionality to your site.
