Skip to main content

How to Customize WooCommerce Product URLs Without Breaking Functionality

Written by kojiroweb.

Changing the URL structure in WooCommerce is a common task for developers aiming to make URLs more user-friendly and SEO-friendly. However, modifying URLs can lead to issues like 404 errors for products, categories, the cart, or other system pages. In this article, we’ll guide you through customizing the URL structure for WooCommerce products and categories while ensuring that important system pages like the cart, checkout, and account pages continue to work correctly.

Why Customize the URL Structure?

By default, WooCommerce generates URLs for products like this: 
/product/product-name/
And for categories: 
/product-category/category-name/
Sometimes, you may want to change the structure for better readability, such as:
  • For products: /category-name/product-name/
  • For categories: /category-name/
This approach improves URL readability and can have a positive impact on SEO.

The Solution: Customizing the URL Structure

Below is the code that customizes the URL structure for WooCommerce products and categories while preserving the functionality of essential system pages. 
 // Modify product URLs in WooCommerce add_filter('post_type_link', 'custom_product_permalink', 10, 2); function custom_product_permalink($permalink, $post) { if ($post->post_type === 'product') { $terms = get_the_terms($post->ID, 'product_cat'); if (!empty($terms) && !is_wp_error($terms)) { $category_slug = $terms[0]->slug; // Get the first category return home_url('/' . $category_slug . '/' . $post->post_name . '/'); } } return $permalink; } // Modify category URLs add_filter('term_link', 'custom_category_permalink', 10, 3); function custom_category_permalink($url, $term, $taxonomy) { if ($taxonomy === 'product_cat') { return home_url('/' . $term->slug . '/'); } return $url; } // Add rewrite rules add_action('init', 'custom_rewrite_rules'); function custom_rewrite_rules() { // Exclude system pages $excluded_pages = ['cart', 'checkout', 'my-account', 'shop']; foreach ($excluded_pages as $page) { add_rewrite_rule( '^' . $page . '/?$', 'index.php?pagename=' . $page, 'top' ); } // Rewrite rules for products add_rewrite_rule( '^([^/]+)/([^/]+)/?$', 'index.php?product=$matches[2]', 'top' ); // Rewrite rules for categories add_rewrite_rule( '^([^/]+)/?$', 'index.php?product_cat=$matches[1]', 'top' ); } // Flush rewrite rules after theme activation add_action('after_switch_theme', 'flush_rewrite_rules'); add_action('woocommerce_after_register_post_type', 'flush_rewrite_rules');

Step-by-Step Explanation

  1. Customizing product URLs:The function custom_product_permalink changes the product URL structure to /category-name/product-name/.
  2. Customizing category URLs:The function custom_category_permalink updates category URLs to /category-name/.
  3. Adding rewrite rules:New rules are added to ensure WordPress processes the custom URLs correctly. System pages like the cart and checkout are excluded from these changes to maintain their default functionality.
  4. Flushing rewrite rules:Rewrite rules are automatically updated when the theme is activated or WooCommerce is loaded.

How to Apply These Changes?

  1. Insert the code into the functions.php file of your active theme or in a custom plugin.
  2. Go to Settings → Permalinks and click “Save Changes” to regenerate the rewrite rules.

Testing the Changes

After applying the changes, verify the following URLs:
  • Products: /category-name/product-name/
  • Categories: /category-name/
  • Cart: /cart/
  • Checkout: /checkout/
  • My Account: /my-account/
All pages should work without any 404 errors.

Conclusion

This approach allows you to improve the URL structure in WooCommerce without losing functionality. Customizing product and category URLs while excluding system pages from rewrite rules ensures a seamless user experience. Happy coding!