Removing WooCommerce Pages from Your WordPress Menu: A Beginner’s Guide
WooCommerce is fantastic for turning your WordPress website into a powerful online store. It automatically creates essential pages like “Shop,” “Cart,” “My Account,” and “Checkout.” However, sometimes you might not want these pages directly in your main navigation menu. Perhaps you want a cleaner look, or you prefer users to access them through product links and buttons. Don’t worry, it’s simpler than you think to remove these WooCommerce pages!
This guide will walk you through several easy methods to remove WooCommerce pages from your menu, even if you’re a complete WordPress newbie. We’ll cover different scenarios and techniques so you can choose the one that best suits your needs.
Why Remove WooCommerce Pages From the Menu?
Before diving into the “how,” let’s understand the “why.”
* Clean and Focused Navigation: Overloading your menu can overwhelm visitors. Removing unnecessary pages makes it easier for them to find what they’re looking for. Think of it like a grocery store – too many signs can be confusing!
* Improved User Experience: In many cases, users don’t need direct access to the “Cart” or “Checkout” from the main menu. These actions are usually triggered by adding products.
* Brand Consistency: You might have a unique way of guiding users through your checkout process and don’t want the standard “My Account” link.
* SEO Considerations: While not a *major* SEO factor, a cluttered menu can dilute the link juice flowing to your important pages. Streamlining navigation improves site structure.
Method 1: The WordPress Menu Editor (The Easiest Way!)
This is the simplest and most common method. WordPress’s built-in menu editor lets you easily add, remove, and rearrange menu items.
1. Log in to your WordPress dashboard. This is usually `yourdomain.com/wp-admin`.
2. Navigate to Appearance > Menus.
3. Select the menu you want to edit. Most themes have a “Primary Menu” or “Main Menu.”
4. Locate the WooCommerce pages you want to remove. These will be listed under “Pages” or in a separate “WooCommerce Pages” section.
5. Click the downward arrow next to each page title. This will expand the page’s options.
6. Click “Remove.”
7. Click “Save Menu” to apply the changes.
Real-life example: Imagine you’re running an online craft supply store. You decide to remove the “My Account” link from your main menu because you want returning customers to log in directly from a personalized dashboard linked on a different prominent button.
Method 2: Using the Screen Options
Sometimes, the WooCommerce pages aren’t immediately visible in the menu editor. This is where Screen Options come in handy.
1. Go to Appearance > Menus.
2. Click on “Screen Options” at the top right of the page.
3. Make sure the “WooCommerce endpoints” or “WooCommerce pages” checkbox is ticked.
4. Close the Screen Options panel.
5. Now, you should see the WooCommerce pages listed on the left side of the menu editor, allowing you to remove them as described in Method 1.
Method 3: Using a Plugin for More Control
While the above methods work for most scenarios, you might want more fine-grained control. That’s where plugins come in. A plugin like “Menu Editor” (available in the WordPress plugin repository) offers advanced features, like:
* Hiding pages from specific user roles.
* Changing menu item labels.
* Adding custom CSS classes.
How to use a menu editor plugin (example using “Menu Editor”):
1. Install and activate the “Menu Editor” plugin. Navigate to Plugins > Add New and search for “Menu Editor.”
2. Go to Appearance > Menu Editor.
3. Select the menu you want to modify.
4. Find the WooCommerce pages you want to remove.
5. Click the “Remove” checkbox next to each page.
6. Save your changes.
Method 4: Custom Code (Advanced Users Only!)
If you’re comfortable with PHP, you can use custom code to remove menu items. This is a more technical approach and should be done with caution.
Important: It’s recommended to use a child theme to avoid losing your changes when the main theme is updated.
theme_location == 'primary' ) {
foreach ( $items as $key => $item ) {
//Remove 'Shop' page. Find ID of the Shop Page
if ( $item->object_id == get_option( 'woocommerce_shop_page_id' ) ) {
unset( $items[$key] );
}
//Remove 'Cart' page. Find ID of the Cart Page
if ( $item->object_id == get_option( 'woocommerce_cart_page_id' ) ) {
unset( $items[$key] );
}
//Remove 'Checkout' page. Find ID of the Checkout Page
if ( $item->object_id == get_option( 'woocommerce_checkout_page_id' ) ) {
unset( $items[$key] );
}
//Remove 'My Account' page. Find ID of the My Account Page
if ( $item->object_id == get_option( 'woocommerce_myaccount_page_id' ) ) {
unset( $items[$key] );
}
}
}
return $items;
}
add_filter( 'wp_nav_menu_objects', 'remove_woocommerce_pages_from_menu', 10, 2 );
?>
Explanation:
* `remove_woocommerce_pages_from_menu( $items, $args )`: This function takes the menu items and arguments as input.
* `if ( $args->theme_location == ‘primary’ )`: This line checks if the function applies to the primary menu. Change `’primary’` to your menu’s theme location if needed.
* `$item->object_id == get_option( ‘woocommerce_shop_page_id’ )`: This finds the ID of the WooCommerce shop page and compares it to each menu item.
* `unset( $items[$key] )`: This removes the menu item.
* `add_filter( ‘wp_nav_menu_objects’, ‘remove_woocommerce_pages_from_menu’, 10, 2 )`: This adds the function to the `wp_nav_menu_objects` filter, which modifies the menu items before they are displayed.
How to use this code:
1. Add the code to your child theme’s `functions.php` file.
Important Considerations:
* Keep Accessibility in Mind: Make sure users can still easily access the WooCommerce pages through other links or buttons on your site. Don’t hide functionality without providing alternative access.
* Test Your Changes: After removing pages, thoroughly test your website to ensure everything is working as expected. Click through your products, add items to the cart, and go through the checkout process.
* WooCommerce Updates: While unlikely, updates to WooCommerce or your theme *could* potentially affect custom code. Keep an eye on your site after updates.
* Clear Your Cache: After making changes, clear your website’s cache (if you are using a caching plugin) to ensure the updated menu is displayed correctly.
By following these methods, you can easily remove WooCommerce pages from your menu, create a cleaner navigation, and improve the overall user experience of your online store. Good luck!
