Contact
WooCommerce WooCommerce Checkout Assistance Get more conversions by aiding the customer in last-minute before he or her leaves your WooCommerce checkout flow.

WooCommerce

WooCommerce Checkout Assistance

Get more conversions by aiding the customer in last-minute before he or her leaves your WooCommerce checkout flow.

With WooCommerce Checkout Assistance you can get the attention of your inactive customers or those that are about to leave the checkout.

The purpose of the plugin is to minimize the loss of conversion in your webshop by helping the customer before they leave the checkout process.

Customize your messages

It’s easy to customize the plugin to match your style through the WordPress Customizer.

 

You can chose the amount of time the customer has been inactive before the plugin triggers the message.

 

Screenshots

Installation / Setup

To get started you have to buy, install, and activate the plugin from your WordPress dashboard.

Go to Style > Stay On Checkout and customize your message.

Requirements

  • WordPress Version 4.9.x or higher
  • WooCommerce Version 3.2.x or higher

Plugin (roadmap)

Everything starts somewhere – where do you think we should take the development? New features? – Send us your feedback or feature requests on support@rommel.dk.

Image Size

The image should be at least 500px wide to fill the full width of the checkout assistance sidebar.
If you want to use a smaller image you can add the following CSS snippet in the WordPress Customizer Additional CSS to force the image to be full width:

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

Z-index

If your own top menu is laying on top of the checkout assistance sidebar you can try to add this CSS code to the WordPress Customizer.

In the WordPress Adminpanel go to “Appearance > Customize” and choose “Additional CSS”

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

The number doesn’t necessarily have to be that large to work. And if it doesn’t work it might need to be even higher.

Add you own style template

If you want to make your own banner you can add the following to your themes functions.php file.



/**
 * 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;
} );

If you use the code above, you have to create a folder in your theme directory named “woocommerce” and another folder inside that named “stay-on-checkout”. (If the “woocommerce” folder already exists in your theme directory, just create the folder “stay-on-checkout” inside of it). Finally you have to add a .php file named “custom-style.php” where you write your template.

Below we’ll show how our “Default” template looks.



<?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 the banner to work you need to make sure the outermost html container has an id of “r-sc-banner” and style set to “display:none;”. The rest of the style is up to you.

To make it easy you can copy the default template and remove/change the css class “r-sc-banner–default” to your own class and style that.

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

Related products

Contact

  • This field is for validation purposes and should be left unchanged.

hi@rommel.dk
support@rommel.dk
Tlf. 71 99 24 28

Rommel ApS
Ryesgade 106A
DK-2100 København
VAT: 37320498