WooCommerce 11: näin palautat tila-widgetin värit ja suomenkieliset tekstit

WooCommerce 11.0 julkaistiin 4.8.2026 ja se toi mukanaan useita muutoksia WordPressin hallintanäkymään. Yksi näkyvimmistä muutoksista löytyy suoraan WordPressin ohjausnäkymän WooCommercen tila -laatikosta.

Aiemmin tila-widget näytti esimerkiksi käsittelyä odottavat tilaukset ja varastotilanteen värillisillä kuvakkeilla. WooCommerce 11.0:ssa kuvakkeet muuttuivat harmaiksi ja myös tekstien rakennetta muutettiin. Suomalaiseen WooCommerce-kauppaan päivityksen jälkeen osa widgetin teksteistä saattaa tämän vuoksi näkyä englanniksi.

Kyse ei ole verkkokaupan asiakaspuolen toimintaan vaikuttavasta virheestä, vaan WooCommercen hallintanäkymään tehdystä muutoksesta.

Miksi WooCommercen tila-widget muuttui englanninkieliseksi?

WooCommerce 11.0:ssa tila-widgetin käyttämiä merkkijonoja muutettiin.

Esimerkiksi nettomyynnin merkkijono oli WooCommerce 10.9.4:ssa muodossa:

%s net sales this month

WooCommerce 11.0 käyttää samasta tekstistä muotoa:

Net sales this month %s

Myös tilausten, varastotilanteen ja myydyimmän tuotteen tekstit ovat uudessa muodossa, esimerkiksi:

Awaiting processing <strong>%s order</strong>

On-hold <strong>%s order</strong>

Low in stock <strong>%s product</strong>

Out of stock <strong>%s product</strong>

Top seller this month %1$s (%2$d sale)

Nämä merkkijonot löytyvät WooCommerce 11.0:n omasta lähdekoodista tiedostosta includes/admin/class-wc-admin-dashboard.php. Myydyimmän tuotteen teksti muuttui samalla monikkomuotoiseksi merkkijonoksi eli sillä on nyt eri versio yhdelle ja useammalle myynnille.

Kun WooCommercen käyttämä alkuperäinen merkkijono muuttuu, vanhaan merkkijonoon tehty suomenkielinen käännös ei enää vastaa sitä. Tällöin teksti näytetään englanniksi, kunnes kielipakettiin tulee uudelle merkkijonolle sopiva käännös.

Vastaavia yksittäisiä yllätyksiä on tullut WooCommercen päivitysten mukana aiemminkin, kuten WooCommerce 8.9.3 version virheilmoituksen yhteydessä.

Myös WooCommercen tila-widgetin ulkoasua muutettiin

Kyse ei ole pelkästään käännöksistä.

WooCommerce 10.9.4:ssa widget käytti esimerkiksi:

• 12 pikselin perustekstiä
• 18 pikselin lukemia
• WooCommercen omaa ikonifonttia suurimmassa osassa kuvakkeita
• Dashicons-kuvaketta nettomyynnin kohdalla
• vihreää kuvaketta käsittelyä odottaville tilauksille
• oranssia kuvaketta vähissä oleville tuotteille
• punaista kuvaketta loppuneille tuotteille

Nämä asetukset näkyvät WooCommerce 10.9.4:n tyylitiedostossa.

WooCommerce 11.0:ssa widgetin teksti on puolestaan 13 pikseliä, lukemat 16 pikseliä ja kaikissa kuvakkeissa käytetään Dashicons-kuvakkeita. Kuvakkeet on muutettu pääosin harmaiksi. Myös elementtien sijoittelua ja padding-arvoja muutettiin, sillä kuvake on nyt asemoitu absoluuttisesti tekstin vasemmalle puolelle. Tässä kuva vanhasta tyylistä meidän testipalvelimelta, josta ei voi tilata:

Jos vanha näkymä tuntui selkeämmältä, sen voi palauttaa melko helposti pienellä Code Snippets -koodilla.

Tarkista ensin, onko suomennos jo saatavilla

Ennen koodin lisäämistä kannattaa varmistaa, ettei virallinen suomennos ole jo ladattavissa. WordPress hakee lisäosien kielipaketit automaattisesti, mutta uusien merkkijonojen kääntäminen tapahtuu vapaaehtoisvoimin ja viiveellä.

1. Siirry WordPressin hallinnassa kohtaan Hallintapaneeli -> Päivitykset.
2. Käynnistä käännösten päivitys, jos sivu tarjoaa sellaista.
3. Tyhjennä tämän jälkeen sivuston välimuisti ja lataa ohjausnäkymä uudelleen.

Jos tekstit muuttuvat suomenkielisiksi, alla olevaa koodia ei tarvita käännösten vuoksi. Koodista on silti hyötyä, jos haluat palauttaa myös vanhan värillisen ulkoasun.

Näin palautat suomennokset ja vanhan ulkoasun

Ensinnäkin WooCommerce 11.x version uusille merkkijonoille lisätään väliaikaiset suomenkieliset käännökset. Oma käännös otetaan käyttöön vain silloin, jos WooCommercen virallisesta kielipaketista ei vielä löydy käännöstä.

Toiseksi widgetille palautetaan WooCommerce 10.9 version kaltainen ulkoasu värillisine kuvakkeineen.

Asenna tarvittaessa ilmainen Code Snippets -lisäosa ja tee uusi PHP-snippet. Valitse suoritusasetukseksi Only run in administration area.

Code Snippetsiin ei lisätä alun <?php-tagia, koska lisäosa lisää sen jo oletuksena PHP-snippeteille.

Lisää seuraava koodi:

/**
 * Palauttaa WooCommerce 10.9 -tyylisen "WooCommercen tila" -widgetin
 * WooCommerce 11+:ssa ja lisää puuttuville uusille merkkijonoille
 * väliaikaiset suomennokset.
 *
 */


/**
 * Tarkistetaan, onko kyseessä WooCommercen tila-widgetin AJAX-pyyntö.
 */
if ( ! function_exists( 'sitrusmedia_is_wc_status_widget_ajax' ) ) {
	function sitrusmedia_is_wc_status_widget_ajax() {

		if ( ! wp_doing_ajax() ) {
			return false;
		}

		if (
			! isset( $_REQUEST['action'] ) ||
			! is_string( $_REQUEST['action'] )
		) {
			return false;
		}

		$action = sanitize_key( wp_unslash( $_REQUEST['action'] ) );

		return 'woocommerce_load_status_widget' === $action;
	}
}


/**
 * Rekisteröidään käännössuodattimet vain tila-widgetin AJAX-pyynnössä.
 */
add_action( 'init', function () {

	if (
		! class_exists( 'WooCommerce' ) ||
		! sitrusmedia_is_wc_status_widget_ajax()
	) {
		return;
	}

	if ( 0 !== strpos( determine_locale(), 'fi' ) ) {
		return;
	}

	/**
	 * Nettomyynnin väliaikainen suomennos.
	 */
	add_filter( 'gettext', function ( $translation, $text, $domain ) {

		if ( 'woocommerce' !== $domain ) {
			return $translation;
		}

		/*
		 * Käytetään omaa suomennosta vain silloin,
		 * kun WooCommercen virallinen suomennos puuttuu.
		 */
		if (
			$translation === $text &&
			'Net sales this month %s' === $text
		) {
			return '%s nettomyynti tässä kuussa';
		}

		return $translation;

	}, 20, 3 );

	/**
	 * Tilaus- ja varastotietojen väliaikaiset suomennokset.
	 */
	add_filter( 'ngettext', function ( $translation, $single, $plural, $number, $domain ) {

		if ( 'woocommerce' !== $domain ) {
			return $translation;
		}

		/*
		 * Jos virallinen WooCommerce-suomennos on jo saatavilla,
		 * sitä ei korvata tällä koodilla.
		 */
		if (
			$translation !== $single &&
			$translation !== $plural
		) {
			return $translation;
		}

		$one = 1 === (int) $number;

		switch ( $single ) {

			case 'Awaiting processing <strong>%s order</strong>':
				return $one
					? '<strong>%s tilaus</strong> odottaa käsittelyä'
					: '<strong>%s tilausta</strong> odottaa käsittelyä';

			case 'On-hold <strong>%s order</strong>':
				return $one
					? '<strong>%s tilaus</strong> on pidossa -tilassa'
					: '<strong>%s tilausta</strong> on pidossa -tilassa';

			case 'Low in stock <strong>%s product</strong>':
				return $one
					? '<strong>%s tuote</strong> vähän varastossa'
					: '<strong>%s tuotetta</strong> vähän varastossa';

			case 'Out of stock <strong>%s product</strong>':
				return $one
					? '<strong>%s tuote</strong> loppunut'
					: '<strong>%s tuotetta</strong> loppunut';

			case 'Top seller this month %1$s (%2$d sale)':
				return $one
					? '%1$s kuukauden myydyin (%2$d myynti)'
					: '%1$s kuukauden myydyin (%2$d myyntiä)';
		}

		return $translation;

	}, 20, 5 );

} );


/**
 * Palautetaan vanha ulkoasu WordPressin ohjausnäkymässä.
 */
add_action( 'admin_head-index.php', function () {

	if ( ! class_exists( 'WooCommerce' ) ) {
		return;
	}

	$css = <<<'CSS'
#woocommerce_dashboard_status .wc_status_list li a {
	padding: 9px 12px !important;
	font-size: 12px !important;
	color: var(--wp-admin-theme-color, #2271b1) !important;
}

#woocommerce_dashboard_status .wc_status_list li a:hover,
#woocommerce_dashboard_status .wc_status_list li a:focus {
	background-color: transparent !important;
	color: var(--wp-admin-theme-color-darker-10, #135e96) !important;
}

#woocommerce_dashboard_status .wc_status_list li a strong {
	font-size: 18px !important;
	line-height: 1.2em !important;
	font-weight: normal !important;
	color: inherit !important;
}

/* Vanha WooCommerce-kuvaketyyli */
#woocommerce_dashboard_status .wc_status_list li a::before {
	font-family: "WooCommerce" !important;
	font-size: 2em !important;
	font-weight: normal !important;
	font-style: normal !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.2em !important;
	float: left !important;
	margin: 0 12px 12px 0 !important;
	color: #464646 !important;
}

/* Nettomyynti */
#woocommerce_dashboard_status .wc_status_list li.sales-this-month a::before {
	font-family: "Dashicons" !important;
	content: "\f185" !important;
}

/* Myydyin tuote */
#woocommerce_dashboard_status .wc_status_list li.best-seller-this-month a::before {
	content: "\e006" !important;
}

/* Käsittelyä odottavat */
#woocommerce_dashboard_status .wc_status_list li.processing-orders a::before {
	content: "\e011" !important;
	color: var(--wc-green, #007518) !important;
}

/* Pidossa */
#woocommerce_dashboard_status .wc_status_list li.on-hold-orders a::before {
	content: "\e033" !important;
	color: #999 !important;
}

/* Vähän varastossa */
#woocommerce_dashboard_status .wc_status_list li.low-in-stock a::before {
	content: "\e016" !important;
	color: var(--wc-orange, #ffba00) !important;
}

/* Loppunut */
#woocommerce_dashboard_status .wc_status_list li.out-of-stock a::before {
	content: "\e013" !important;
	color: var(--wc-red, #a00) !important;
}
CSS;

	echo '<style id="sitrusmedia-wc-dashboard-legacy">' . $css . '</style>';
} );

Tallenna ja aktivoi snippet. Tämän jälkeen WordPressin ohjausnäkymän WooCommercen tila -laatikon pitäisi näyttää jälleen suomenkieliset tekstit ja WooCommerce 10.9 version kaltainen värillinen ulkoasu.

Mitä koodi käytännössä muuttaa?

Koodi on rajattu WordPressin hallintaan.

Tila-widget ei lataa sisältöään suoraan ohjausnäkymän kanssa, vaan erillisenä AJAX-pyyntönä. Pyyntö käyttää toimintoa woocommerce_load_status_widget, ja juuri siihen käännössuodattimet on rajattu. Näin suodattimet eivät hidasta muuta hallintanäkymää.

Lisäksi koodi tarkistaa, että käyttöliittymän kieli on suomi ja että kyseessä on WooCommercen oma käännös. Code Snippetsin Only run in administration area -asetus riittää, koska WordPress käsittelee myös AJAX-pyynnöt hallintapuolen pyyntöinä.

CSS-tyylit on puolestaan rajattu elementtiin #woocommerce_dashboard_status, joten ne eivät muuta muiden WordPressin hallintanäkymän osien ulkoasua.

Oma käännös toimii myös vain vararatkaisuna. Jos WooCommercen virallinen suomalainen kielipaketti sisältää myöhemmin kyseisen merkkijonon käännöksen, koodi jättää virallisen käännöksen voimaan.

Onko WooCommerce 11.0 muuten turvallista päivittää käyttöön?

Tämä tila-widgetin muutos ei itsessään ole syy jättää WooCommercea päivittämättä.

WooCommerce 11.0 versio on merkittävä versiopäivitys, jossa on tehty muun muassa suorituskykyyn, raportointiin, asiakastileihin ja sähköposteihin liittyviä muutoksia. WooCommercen kehittäjädokumentaatiossa mainitaan erityisesti suurempien kauppojen suorituskykyyn tehdyt parannukset sekä raportoinnin ja analytiikan muutokset. Julkaisu sisälsi 551 muutosta 89 kehittäjältä ja se on yksi WooCommercen laajimmista versiopäivityksistä.

Kaksi asiaa kannattaa huomioida ennen päivitystä. Versio vaatii tietokantapäivityksen, joten päivitys ei ole pelkkä tiedostojen vaihto. Lisäksi WooCommercesta on jo julkaistu korjausversio 11.0.1, joten kannattaa päivittää suoraan uusimpaan saatavilla olevaan versioon.

WooCommerce-päivitykset kannattaa aina tehdä hallitusti. Verkkokaupasta on hyvä olla toimiva varmuuskopio, ja suuremmat versiopäivitykset kannattaa mahdollisuuksien mukaan testata ensin erillisessä testiympäristössä. Jos päivitys ei onnistu tai sivusto jää huoltotilaan, ongelma on yleensä korjattavissa webhotellin hallinnan tai FTP:n kautta.

Jos et halua hoitaa päivityksiä ja testaamista itse, hoidamme ne WordPress-huolenpitopalvelussamme. Rakennamme myös WooCommerce-verkkokauppoja ja WordPress-kotisivuja avaimet käteen -periaatteella.

Yhteenveto

WooCommerce 11.0 muutti WordPressin ohjausnäkymässä näkyvän WooCommercen tila -widgetin ulkoasua ja sen käyttämiä tekstimerkkijonoja.

Tämän seurauksena suomalaisessa verkkokaupassa osa teksteistä voi näkyä englanniksi, ja aiemmat värilliset tilakuvakkeet ovat vaihtuneet harmaampaan ulkoasuun. Tarkista ensin, onko virallinen suomennos jo ladattavissa Päivitykset-sivun kautta.

Pienellä Code Snippets -koodilla voidaan palauttaa:

• suomenkieliset tila- ja varastotekstit
• suuremmat ja selkeämmät lukemat
• siniset linkit
• vihreä käsittelyä odottavien tilausten kuvake
• oranssi vähäisen varaston kuvake
• punainen loppuneiden tuotteiden kuvake
• WooCommerce 10.9:n kaltainen yleisilme

Ratkaisu ei muuta verkkokaupan asiakaspuolta eikä tilausten tai tuotteiden toimintaa. Se vaikuttaa vain WordPressin hallinnan WooCommercen tila -widgetin esitystapaan. Jos haluat nopeuttaa hallintanäkymää laajemmin, käy läpi ohjeemme WordPressin taustahallinnan nopeuttamiseen.