How to Translate or Change 'Read More' and Other Button Text in Storefront

Many Storefront theme users want to change the text of buttons like "Read more" or "Load more" to better match their site's language or design. This is a common request, often driven by localization needs or SEO recommendations. This guide will explain why this text can be difficult to change and provide the most effective solutions.

Why is This Text Hard to Change?

The text for these buttons is typically defined in the theme's or a bundled plugin's code. Standard translation methods, like those used in the WordPress admin, may not always work for a few key reasons:

• Hard-Coded Strings: Some text might be hard-coded in the theme's template files, making it invisible to standard translation functions.
• Third-Party Bundled Plugins: If the element is part of a page builder like WPBakery that was bundled with the theme, its translation files (.pot, .po, .mo) might not be properly configured or located in the standard place, causing tools like Loco Translate to fail.
• Translation Hook Priority: Custom code snippets using the gettext filter must have a high enough priority (e.g., 999) and correctly check the text domain to override translations.

Common Solutions for Changing Button Text

1. Using a Translation Plugin (Recommended)

For most users, a dedicated translation plugin is the simplest and safest method. These plugins can often find and translate strings that other methods miss.

• Loco Translate: A powerful, free plugin that allows you to translate themes and plugins directly from your WordPress dashboard. If it reports that a "translation bundle has not been set up properly," you may need to manually point it to the correct language files.
• Say What?: A lightweight plugin specifically for changing any text string on your site. You only need to provide the original text, the new text, and the text domain (e.g., 'storefront' or 'woocommerce').

2. Custom Code Snippet (For Developers)

If you are comfortable adding code to your site, you can use the gettext filter. The code snippet from the user's question was almost correct but needed a small adjustment. Here is a more robust version:

add_filter( 'gettext', 'repl_wc_text', 999, 3 );
function repl_wc_text( $translated_text, $text, $domain ) {
    // Only change text on the frontend and for a specific text domain
    if ( ! is_admin() && 'woocommerce' === $domain ) {
        switch ( $text ) { // Use the original string ($text), not the already translated one
            case 'City' :
                $translated_text = __( 'Kota', 'storefront' );
                break;
            case 'Read more' : // Example for changing 'Read more'
                $translated_text = __( 'View Product', 'storefront' );
                break;
        }
    }
    return $translated_text;
}

Important Note: Always use a code snippets plugin or a child theme's functions.php file to add custom code. Never edit the parent theme's files directly.

3. Custom CSS to Hide the Button

If your goal is to remove the button entirely, you can use a small bit of CSS. Inspect the button with your browser's tools to find its unique class or ID, then add the following to Appearance > Customize > Additional CSS:

.button-class-name {
    display: none !important;
}

What to Do If Nothing Works

If you have tried the methods above and the text still does not change, the issue might be related to a specific theme update or a conflict with another plugin. A common troubleshooting step is to:

1. Temporarily switch to a default WordPress theme (like Twenty Twenty-Four).
2. Disable all plugins except WooCommerce (if applicable).
3. Check if the button text can be changed now. If it can, reactivate your plugins one by one to identify the source of the conflict.

For further assistance with the Storefront theme, you can seek help from the wider WordPress community in the official theme support forums.