WooCommerce
WooCommerce checkout assistance
Få flere konverteringer ved at komme kunden til undsætning inden checkout forlades.

WooCommerce

WooCommerce checkout assistance

Få flere konverteringer ved at komme kunden til undsætning inden checkout forlades.

Med WooCommerce checkout assistance kan du komme i kontakt med de kunder der er på vej igennem din checkout men udviser inaktivitet eller forsøger at forlade checkout.

Formålet med dette plugin er at minimere tabet af konverteringer i din webshop ved at forsøge at hjælpe kunderne inden de forlader checkout processen.

Tilpas dine budskaber

Det er nemt at tilpasse plugin’et til det ønskede udtryk via Tilpas/Customizeren i WordPress.

 

Du bestemmer selvfølgelig selv hvor længe du mener kunden skal være inaktiv, før plugin’et skal vise dit budskab.

 

Installation / Setup

For at komme igang skal du købe, installere og aktivere plugin’et fra dit WordPress dashboard.

Gå til Udseende > Stay on Checkout og tilpas dit budskab.

Installationskrav

  • WordPress 4.9.x eller nyere
  • WooCommerce 3.2.x eller nyere

Plugin (roadmap)

Alt starter et sted – hvor syntes i vi skal hen? – Skriv til os på support@rommel.dk hvis i har nogle forslag til forbedringer/udvidelser.

Billedestørrelse

Billedet bør minimum være 500px bredt, for at fylde hele din checkout assistance bar.
Hvis du ønsker at bruge et mindre billede kan du tilføje følgende CSS til WordPress Tilpasseren under Ekstra CSS, for at tvinge billedet til at være fuld bredde:

.r-sc-banner-content-image img { width: 100%}

Z-index

Hvis du oplever at din egen menu i toppen af din side lægger sig oven på Checkout Assistance sidebaren, kan du prøve at indsætte følgende CSS i “Tilpasseren”.

I WordPress Admin menuen gå til “Udseende > Tilpas” og vælg “Ekstra CSS”.

.r-sc-banner { z-index: 1000; }

Tallet behøver nødvendigvis ikke være så højt for at virke. Og hvis det ikke virke kan det være du skal endnu højere.

Tilføj din egen skabelon

Hvis du vil lave dit banner selv kan du tilføje følgende kode til dit temas functions.php fil

/**
 * Filters the available template list allowing the usage of custom templates.
 */
add_filter( 'stayon_checkout_style', function ( $styles ) {
   $styles[ __DIR__ . '/woocommerce/stay-on-checkout/custom-style.php' ] = __( 'My Style', 'textdomain' );

   return $styles;
} );

Hvis du bruger koden ovenover, skal du i din tema mappe lave en ny mappe der hedder “woocommerce” og inde i den en mappe der hedder “stay-on-checkout”. (Hvis woocommerce mappen allerede eksistere i din tema mappe, skal du bare oprette mappen “stay-on-checkout”). Til sidst skal du tilføje en .php fil der hedder “custom-style.php” hvor i du kan skrive den skabelon.

Herunder viser vi hvordan vores “Default” skabelon som bruges, ser ud.

<?php
/**
* Banner template.
*
* @since 1.0.0
* @package Rommel\Suite\Stayon_Checkout
*/

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<div id="r-sc-banner" style="display:none" class="r-sc-banner r-sc-banner--default">
<div class="r-sc-banner-content">
<span class="r-sc-banner-close primary">✕</span>
<?php if ( ! empty( $vars['image'] ) ) : ?>
<div class="r-sc-banner-content-image">
<div><img src="<?= $vars['image'] ?>" alt="<?php bloginfo( 'name' ) ?>"></div>
</div>
<?php endif; ?>
<?php if ( ! empty( $vars['title'] ) ) : ?>
<div class="r-sc-banner-content-title">
<div><?= $vars['title'] ?></div>
</div>
<?php endif; ?>
<?php if ( ! empty( $vars['content'] ) ) : ?>
<div class="r-sc-banner-content-description">
<?= wpautop( $vars['content'] ) ?>
</div>
<?php endif; ?>
<?php if ( ! empty( $vars['phone'] ) ) : ?>
<div class="r-sc-banner-content-phone">
<?= $vars['phone'] ?>
</div>
<?php endif; ?>
<?php if ( ! empty( $vars['contact'] ) ) : ?>
<div class="r-sc-banner-content-contact">
<a href="<?= $vars['contact'] ?>"><?= !empty($vars['contact_text'] ) ? $vars['contact_text'] : __( 'Contact us', R_SOC ) ?></a>
</div>
<?php endif; ?>
<span class="r-sc-banner-close secondary">« <?= __( 'Return to shop', R_SOC ) ?></span>
</div>
</div>

For at banneret virker skal du sørger for at den yderste html container har id sat til “r-sc-banner” og style sat til “display:none;”. Resten er op til dig.

For at gøre det nemt, kan du kopiere hele vores skabelon og fjerne/ændre css class “r-sc-banner–default”  til din egen class og style den.

2.0.0:
Moved settings from “Customizer > Suite > Stay On Checkout” to “Customizer > WooCommerce > Stay On Checkout”
Made it possible to add your own style template.
Added text field to change the text on the contact link.

1.0.0:
Added plugin