Blogi

SkyVerge on WooCommerce-lisäosien kehittäjä. Merkittävä osa WooCommercen omassa plugin-kaupassa olevasta tarjonnasta on SkyVergen kehittämää.

Eihän tuollainen status toki ilmaiseksi heltiä, SkyVerge maksaa Automatticille takuulla kallista hintaa noin merkittävällä tavalla näkymisestä. No, se ei toki ole väärin – markkinointi maksaa, oli se hakusanamainontaa, feedissä vilkkuvia videoita tai jollakin muulla torilla – kuten WooCommercen Extensions store – näkyvillä oloa.

Varmasti on kuitenkin myös niin, että SkyVerge osaa asiansa.

Asiaan: miten niin ilmaiseksi?

No, he tarjoavat merkittävää määrää lisäosia veloituksetta. Listaankin tässä kivoja, ilmaisia SkyVergen kehittämiä lisäosia. Otsikot linkit ovat suoraan SkyVergen sivuille, embedit ovat wordpress.org:n plugin-reposta. Kaikkia SkyVergen ilmaisia lisäosia ei ole saatavissa wordpress.org:n kautta, mutta mitäpä tuosta :)

WooCommerce Customizer

• Tässäpä eräänlainen (vähäsen turhan yleiseen tyyliin nimetty) linkkuveitsi, jolla muutella jos jotakin – kenties merkittävimpänä ominaisuutena vaihdokset tuotetyyppikohtaisiin ”Lisää ostoskoriin”-painikkeisiin niin arkisto- kuin tuotesivuillakin. Muokata voi myös tuotteiden lukumäärää per sivu ja WooCommercen sisäänrakennettua kassan kuponkitekstiä ym ym.

Product SKU Generator

• Plugin, joka luo automaattisesti SKU:t tuotteillesi! ’Nuff said, sanois jenkki. Lue käyttöohjeet, lisäosa ohittaa Woon SKU-kentän manuaalisen täytön.

Shipping Estimates

• Lisää toimitustavoillesi arvioitu toimitusaika. Joko päivinä esim. 2 – 4 päivää tai sitten tämänhetkiseen päivään perustuen; esim. 24.5 – 28.5.
• Ei saatavissa Wp.orgin reposta, sääli.

Extra Product Sorting Options

• Lisää lajitteluvaihtoehtoja kategorioissa. Esim: vaihda oletusjärjestyksen nimi, näytä alennuksessa olevat ym ym.

Remove Product Sorting

• Poista käytöstä lajitteluvaihtoehtoja.
• Ei saatavissa wp.orgin reposta.

New Customer Report

• Lisää WooCommercen omaan raporttiin palaavien vs. uusien kävijöiden vertailu.
• Ei saatavissa wp.orgin reposta.

Custom Product Tabs Lite

• Tätä tekeviä plugineja on monelta eri tekijältä, mutta jos käytät muita SkyVergen tuotteita, synergiasyistä tämä toki kannattaa: Tuotteille custom-tabeja. Huomaa käyttäessäsi, että yksittäin lisättyjä tabeja on vaikea hallita sivustonlaajuisesti toiminnan kehittyessä.

Sequential Order Numbers

• Siistii tilausnumerosi peräkkäisiksi, haluamillasi etu- tai takaliitteillä.

Miksi tällainen lista?

Hain itse luotettavalta tekijältä ratkaisua SKU -generointiin ja muistin, että SkyVergellä on ilmainen sellainen. Lisäksi asiakkaan sivustolla oli jo eräs toinen SkyVergen ratkaisu käytössä, joten… Synergia. Sitä kannattaa usein tavoitella.

Alkuperäisesti woocommerce näyttää variaatiotuotteiden hinnat min. hinta – max. hinta. Kuten alla olevassa kuvassa näkyy.

Mitäpä jos haluammekin selkeyttää toimintaa ja näyttää vain min. hinnan ja lisätä alkaen tekstin hinnan eteen?

Muutoshan onnistuu seuraavalla koodinpätkällä. Jos haluat muuttaa tekstiä, joka tulee näkyviin verkkokaupassasi. Muuta koodissa olevaa ”alkaen:” tekstialuetta haluamasi tekstin mukaisesti.

Mihin koodi kuuluu? Koodin voi laittaa lapsiteeman functions.php tiedostoon jonka löydät Ulkoasu > Teemaeditori > Functions.php alta.

/**
 * @snippet       WooCommerce hintamuutos - Hinta alk.
 * @author        Niko Vittaniemi - WPWoofi.com
 * @testedwith    WooCommerce 4.5.2
 */

add_filter( 'woocommerce_variable_price_html', 'wpwoofi_min_max_variable_price_html', 10, 2 );
function wpwoofi_min_max_variable_price_html( $price, $product ) {
    $prices = $product->get_variation_prices( true );
    $min_price = current( $prices['price'] );

    $min_keys = current(array_keys( $prices['price'] ));
    $min_price_regular = $prices['regular_price'][$min_keys];
    $min_price_html = wc_price( $min_price ) . $product->get_price_suffix();

    if( $min_price_regular != $min_price ){ // Kun min.hinta on alennuksessa (Voidaan poistaa)
        $min_price_regular_html = '<del>' . wc_price( $min_price_regular ) . $product->get_price_suffix() . '</del>';
        $min_price_html = $min_price_regular_html .'<ins>' . $min_price_html . '</ins>';
    }
    $price = sprintf( __( 'alkaen: %1$s', 'woocommerce' ), $min_price_html );

    return $price;
}

Olet luultavasti joskus nähnyt jossakin WordPress/WooCommerce -toteutuksessa napin, jossa on vääränkielinen teksti – tai artikkelien metatietoa, joissa lukee lukee ”By” eikä ”Kirjoittaja”? Ehkä tällainen on kerran tai kaksi piinannut sinuakin?

Hyvin laajalti käytetty apu (toimiva ja todella hyvä apu!) on esim. Loco translate -niminen lisäosa, jolla voi tehdä string-käännöksiä (string = merkkijono) lisäosien ja teemojen eri alueisiin.

Yksittäisiin tapauksiin on tosin olemassa täsmälääke, WordPressin coressa oleva gettext- filterhook.

Kopioi koodi lapsiteemasi functions.php:n jatkoksi.

/**
 * @snippet       Merkkijonojen muutokset gettextillä
 * @author        Jaakko Pöntinen - WPWoofi.com
 * @testedwith    WooCommerce 4.5.2
 */

// Aktivoidaan filter funktiolla
add_filter( 'gettext', 'mm_change_multiple_strings', 20 );
// Määritetään funktio
function mm_change_multiple_strings( $translated ) {
// Määritetään array, jossa listataan muutettavat stringit ja se, mikä tulee korvaavaksi. Muuta, poista tai kopioi lisää rivejä tarpeen mukaan - muutamia rivejä on syötetty esimerkin vuoksi.
	$text = array(
		'Näytä ostoskori' => 'Avaa kori',
		'Laskutustiedot' => 'Tilaajan tiedot',
		'Search Results for' => 'Hakutulokset',
		'Laskutusosoite' => 'Tilaajan tiedot',
		'(ei sis. alv.)' => 'alv0',
		'You searched for' => 'Etsit tätä',
	);
// Käsitellään yllä annetun arrayn mukaan
	$translated = str_ireplace(  array_keys($text),  $text,  $translated );
// Palautetaan käsitellyt tiedot
	return $translated;
}

Seuraava koodinpätkä toimii erinomaisesti esimerkiksi ravintoloille jotka haluavat myydä ruokaa ulos ainoastaan ravintolan aukioloaikoina verkkokaupastaan.

Koodin tarkoituksena on ajastaa WooCommerce verkkokaupan toiminta siten, että käyttäjät voivat tilata tuotteita vain tiettyinä kellonaikoina ja päivinä.

Aukioloajat merkataan koodiin muodossa TUNNIT, MINUUTIT, SEKUNNIT. Jos kauppa on esimerkiksi auki klo 7 – 15 niin merkataan aukioloaikoihin vain 7 00 00 ja 15 00 00.

Ensimmäisessä $weekdays_open taulukossa asetetaan arkipäivien aukiolot. Jos haluat esimerkiksi, että kauppa on suljettuna keskiviikkoisin, yksinkertaiseti poista ’Wed’ taulukosta.

Seuraavaksi $weekends_open taulukko määrittää viikonloppujen aukioloajat, eli jos haluat, että kauppa on auki lauantain lisäksi sunnuntaina tulee sinun lisätä koodissa ”, ’Sun’ ” sen sisälle, jolloin koko koodi on $weekends_open = array( ’Sat’ , ’Sun’ );

Tämän jälkeen yksinkertaisesti katsotaan onko kauppa auki vai ei ja palautetaan WooCommercelle muuttuja $purchasable, joka kertoo ovatko tuotteet ostettavissa vai eivät. Jos asiakkaalla on ostoskorissa tuotteita poistetaan myös ne ostoskorista kokonaan.

Jotta asiakkaat eivät täysin hämmentyisi, miksi eivät voi ostaa tuotteita annetaan heille virhe ilmoitus kaupan ollessa suljettuna ja kerrotaan, että he voivat tilata tuotteita tiettynä päivänä tiettyyn kellon aikaan.

Koodi valmiina käyttöönottoa varten

/*
*
* Kaupan aukioloajan hallinta
* v1.1
* Author: Mainostoimisto Aate
* Website: https://aate.fi
*
*/

// Funktio joka palauttaa true / false sen mukaan onko kauppa auki vai ei
function is_store_open() {
    // Set Your shop time zone (http://php.net/manual/en/timezones.php)
    date_default_timezone_set('Europe/Helsinki');
	

    // Alla kaupan aukioloajat
	$weekdays_open = array( 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ); // Arkipäivät jolloin auki
	$weekends_open = array('Sat'); // Viikonlopun päivät jolloin auki
	if ( in_array( date( 'D' ), $weekdays_open ) ) { 
		$start_time = mktime('09', '00', '00', date('m'), date('d'), date('Y')); // 09:00:00
		$end_time   = mktime('20', '00', '00', date('m'), date('d'), date('Y')); // 20:00:00
		$now        = time(); // Current timestamp in seconds
		
		return ( $now >= $start_time && $now <= $end_time ) ? true : false;
	}	
	elseif ( in_array(date('D'), $weekends_open ) ) { 
		$start_time = mktime('14', '00', '00', date('m'), date('d'), date('Y')); // 14:00:00
		$end_time   = mktime('20', '00', '00', date('m'), date('d'), date('Y')); // 20:00:00
		$now        = time(); // Current timestamp in seconds
		
		return ( $now >= $start_time && $now <= $end_time ) ? true : false;
	}
	else {
		return false;
	}
}

// Estä ostaminen kun kauppa on suljettu
add_filter( 'woocommerce_variation_is_purchasable', 'disable_purchases_on_shop', 10, 2 );
add_filter( 'woocommerce_is_purchasable', 'disable_purchases_on_shop', 10, 2 );
function disable_purchases_on_shop( $purchasable, $product ) {
    // Estetään ostot kun kauppa on kiinni.
    if( ! is_store_open() )
        $purchasable = false;

    return $purchasable;
}


add_action( 'template_redirect', 'closing_shop_notice' );
function closing_shop_notice(){
    if ( ! ( is_cart() || is_checkout() ) && ! is_store_open() ) {
        // Store closed notice
		$weekdays_open = array( 'Mon', 'Tue', 'Wed', 'Thu', 'Fri' ); // Arkipäivät jolloin auki
		$weekends_open = array('Sat'); // Viikonlopun päivät jolloin auki
		if (in_array(date('D'), $weekdays_open)) {
			$time = "09:00";
			wc_add_notice( __("Verkkokauppamme aukeaa kello " . $time . " - Voit tilata tuotteita verkkokaupastamme klo 9 - 20."), 'error' );
		}
		elseif (in_array( date('D'), $weekends_open)) {
			$time = '14:00';
			wc_add_notice( __("Verkkokauppamme aukeaa kello " . $time . " - Voit tilata tuotteita verkkokaupastamme klo 14 - 20."), 'error' );
		}
		else {
			wc_add_notice( __("Verkkokauppamme aukeaa maanantaina klo 09:00."), 'error' );
		}
    }
}

Koodin ja sen selitteen tekijä on Toni Manninen Mainostoimisto Aatteelta.

Kun kaipaat verkkosivuston tai verkkokaupan toteuttajaa? Ota yhteyttä https://aate.fi/verkkosivut ja kysy lisää!

Kaksivaiheinen tunnistus – tunnetusti parantaa sivuston ja verkkokaupan tietoturvaa älyttömästi. Tämä on erityisesti hyödyllinen mm. WordPress admineille ja kauppiaille, jotka pääsevät hallitsemaan tärkeitä kotisivun / verkkokaupan asetuksia.

Haluaisitko ottaa sellaisen käyttöön myös omassa kotisivussa tai verkkokaupassa? Jos näin on! Niin tästä löydät älyttömän helpot ohjeet kaksivaiheisen tunnistuksen käyttöönottoon.

Lataa ensimmäisenä Two-Factor lisäosa – WordPress lisäsosista

Lataamisen ja lisäosan aktivoinnin jälkeen navigoi omaan profiilisi: Käyttäjät > Profiili. Omasta profiilistasi voit valita minkä tunnistautumistavan haluat ottaa käyttöön.

Oma suositukseni on joko sähköpostitse lähetettävä koodi tai mobiililla ja tabletilla mainiosti toimiva ”Aikaperusteinen kertakäyttöinen salasana (TOTP)”.

Sähköpostitse lähetettävä koodi toimii seuraavasti

Kun alat kirjautumaan kotisivuillesi ja syötät oikean käyttäjätunnuksen ja salasanan. Lähtee kyseisen käyttäjätunnuksen sähköpostiin varmistuskoodi, jonka avulla pääset kirjautumaan sisälle.

Aikaperusteinen kertakäyttöinen salasana (TOTP) toimii seuraavasti

Tämän käyttöön tarvitset autentikaattorin. Yleisimmät käytössä olevat sovellukseet ovat Google Authenticator (Android versio, IOS versio) ja Twilio Authy (Android versio, IOS versio) joka asennetaan puhelimeen tai vaikkapa tablettiin.

Kun olet asentanut kyseisen sovelluksen skannaa ”Aikaperusteinen kertakäyttöinen salasana (TOTP)” alapuolella oleva QR koodi puhelimella tai tabletilla.

Tästä saat koodin mikä sinun tulee vielä syöttää QR koodin alapuolella olevaan kenttään. Tämän jälkeen pääset aina tarkistamaan sisäänkirjautumisessa vaadittavan koodin juuri kyseisestä puhelimesta tai tabletista.

Näin pakotat kaksivaiheisen tunnistuksen kaikille käyttäjille

add_filter(
    'two_factor_enabled_providers_for_user',
    function( $providers ) {
        if ( empty( $providers ) && class_exists( 'Two_Factor_Email' ) ) {
            $providers[] = 'Two_Factor_Email';
        }

        return $providers;
    }
);

Koodin lähde: https://wordpress.org/support/topic/can-i-by-default-turn-on-this-feature-for-all-my-existing-and-for-new-user/

Mitä tapahtuu, kun aktivoit pakollisen tunnistautumisen?

Kun pakotat kaksivaiheisen tunnistuksen kaikille käyttäjille. Kirjautuessa sisään, lähtee sähköpostiin varmistusviesti, joka sisältää koodin, jolla pääsee kirjautumaan sivustolle.

Lisävinkki:
Jos oikeasti haluat turvalliset ja uniikit salasanat jokaiseen paikkaan mihin ikinä kirjaudutkaan. Suuri suositus Lastpass tai 1Password palveluille. Näiden avulla voit pitää salasanat ja tunnukset turvassa todella tehokkaasti.

Haluatko muuttaa WooCommercen jälkitoimituksen ”Ei varastossa, vain jälkitoimituksena” tekstiä? Sehän onnistuu kätevästi seuraavalla koodilla. Korvaa vain koodissa kohdat ”Tuotetta on saatavilla jälkitoimituksena vain savumerkeillä”.

Mihin koodi kuuluu? Koodin voi laittaa lapsiteeman functions.php tiedostoon jonka löydät Ulkoasu > Teemaeditori > Functions.php alta.

add_filter( 'woocommerce_get_availability', 'wpwoofi_muuta_jalkitoimitus_tekstia', 1, 2 );
function wpwoofi_muuta_jalkitoimitus_tekstia ( $availability ) {
    if ($availability[ 'class' ] == 'available-on-backorder') {
        $availability[ 'availability' ] = __( 'Tuotetta on saatavilla jälkitoimituksena vain savumerkeillä' );
    }
    return $availability;
}

Voipi kauppiaalle käydä niin, että asiakkaat kassalla ihmettelevät pakettitoimitustapoja, kun olettavat tuotteen mahtuvan kirjeeseen.

Tällä php-snippetillä selkeyttä asiaan; lisää tuotteen tuotesivulla näytettyihin lisätietoihin tuotteelle asetetun toimitusluokan.

Esimerkkikuvassa käytetty lisäksi pari rivia CSS:ää, jolla saa tuotteen metatiedot menemään nätisti alekkain pötkössä lötköttämisen sijaan.

.single .product_meta {
	display: flex;
	flex-direction: column;
}

Kopioi seuraava koodinpätkä ja liitä se lapsiteemasi functions.php:n jatkeeksi.

/**
 * @snippet       Tuotteelle asetettu toimitusluokka näkyviin tuotesivulla
 * @author        Jaakko Pöntinen - WPWoofi.com
 * @testedwith    WooCommerce 4.5.2
 */

// Lisätään funktio tuotesivulle ennen muita tuotteen metatietoja
add_action('woocommerce_product_meta_start', 'display_product_shipping_class', 15 );
// Luodaan funktio
function display_product_shipping_class(){
	// Annetaan funktiolle nykyisen tuotteen tiedot
    global $product;
	// Tarkistetaan tuotteen toimitusluokka, ja jos se ei ole tyhjä, niin:
    $shipping_class = $product->get_shipping_class();
    if( ! empty($shipping_class) ) {
		// Haetaan toimitusluokan nimi
        $term = get_term_by( 'slug', $shipping_class, 'product_shipping_class' );
		// Tulostetaan HTML:aa
        echo '<span><span>Toimitus: </span><span>' . $term->name . '</span></span>';
    }
}

Haluatko muuttaa WooCommercen ”Varasto loppu” ja ”Varastossa” tekstejä? Sehän onnistuu kätevästi seuraavalla koodilla. Korvaa vain koodissa kohdat ”Saatavilla” ja ”Kaikki män”.

Mihin koodi kuuluu? Koodin voi laittaa lapsiteeman functions.php tiedostoon jonka löydät Ulkoasu > Teemaeditori > Functions.php alta.

/**
 * @snippet       Varasto loppu ja varastossa tekstimuutokset
 * @author        Niko Vittaniemi - WPWoofi.com
 * @testedwith    WooCommerce 4.5.2
 */

add_filter( 'woocommerce_get_availability', 'wpwoofi_custom_get_availability', 1, 2);
function wpwoofi_custom_get_availability( $availability, $_product ) {
// Muuta varastossa tekstiä
if ( $_product->is_in_stock() ) {
$availability['availability'] = __('Saatavilla!', 'woocommerce');
}
// Muuta varasto loppu tekstiä
if ( ! $_product->is_in_stock() ) {
$availability['availability'] = __('Kaikki män', 'woocommerce');
}
return $availability;
}

Haluaisitko ottaa Gmailin käyttöön? Mutta Google Suiten maksullinen palvelu kuulostaa aika tyyriiltä? Tässä eräs suosittu tapa, joka toimii todella hyvin POP3 avulla. POP3 on käytössä todella monessa normaalissa WordPress webhotellissa.

Suosittelemme kyllä G Suitea yritystoimintaan sen nopeamman sähköpostien haun, tuen ja isomman tallennustilan johdosta. Mutta jos käytössäsi on monia brändejä voi tämä olla todella kova juttu!

Hei! Ryhmässä tuli vastaan tilanne jossa verkkokauppaa rakentaessa tuli ongelmia woocommercen pikkukuvien kanssa. Nykyään WooCommercen yleisistä ominaisuuksista on poistettu kaikkein pienimpien kuvien koko.

Joten tässä ratkaisu kuinka voit itse määrittää juuri oikean kuvakoon! Pohjalla käytetty WooCommercen Image Sizes for Theme Developers dokumentaatiota. Tarvittavan koodinpätkän löydät tämän julkaisun alapuolelta.

Tällä videolla käymme läpi seuraavat asiat:

• Miten asennat lapsiteeman lisäosan avulla?
• Kuinka lisäät koodia functions.php tiedostoon kätevästi?
• Miten luot uudelleen kaupan käyttämät kuvakoot?
• Kuinka tarkistat kaupan käyttämien kuvien oikean koon?