How to Customize WooCommerce Product URLs Without Breaking Functionality

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.

 // Changing WooCommerce Product Links
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; // Let's take the first category
            return home_url('/' . $category_slug . '/' . $post->post_name . '/');
        }
    }
    return $permalink;
}

// Changing links for product categories
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;
}

// Adding rewrite rules
add_action('init', 'custom_rewrite_rules');
function custom_rewrite_rules() {
    // Excluding WooCommerce System Pages
    $excluded_pages = ['cart', 'checkout', 'my-account', 'shop'];
    foreach ($excluded_pages as $page) {
        add_rewrite_rule('^' . $page . '/?$', 'index.php?pagename=' . $page, 'top');
    }

    // Product rule
    add_rewrite_rule('^([^/]+)/([^/]+)/?$', 'index.php?product=$matches[2]', 'top');

    // Правило для категорий товаров
    add_rewrite_rule('^([^/]+)/?$', 'index.php?product_cat=$matches[1]', 'top');
}

// Regeneration of rewrite rules
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!