In the world of e-commerce, a seamless and user-friendly checkout experience can make all the difference in boosting your sales. If you've ever admired Shopify's checkout page and wondered how to achieve a similar look and functionality on your WordPress website, you're in the right place. In this article, we'll walk you through the process of creating a Shopify-like checkout page using Woocommerce, Elementor Pro, and the free version of CartFlows.

Setting the Stage

  1. Access your WordPress Dashboard.
  2. Install and activate the Elementor Pro plugin along with the free CartFlows plugin.

Creating a Checkout Page

  1. Go to the CartFlows Dashboard.
  2. Select "Store Checkout" and opt to "Create a Store Checkout" from scratch.
  3. Edit and customize your checkout page as needed. P.S. You can also edit the Thank You page for post-purchase messaging.

Designing the Checkout Page

Design your checkout page as follows:

  1. Hide the page title and change the page layout to "Template for Page Builders" to remove any unwanted margins.
  2. Insert the CartFlows checkout widget, choosing the "Modern Checkout" style and "Modern Labels" for input fields.
  3. Make the background of the "Order Review" section transparent from settings.
  4. Add the following CSS code to the widget in Advanced > Custom CSS:

/*Floating product quantity and design*/
 .cartflows-container strong.product-quantity {
     border-radius: 100px;
     padding: 2px 8px 2px 5px;
     font-size: 12px;
     font-weight: 600 !important;
     min-width: 20px !important;
     display: block;
     margin-left: -20px;
     background: #7F7F7F;
     color: #fff;
     position: absolute;
     left: 25%;
     top: 10%;
     letter-spacing: -1px;
}
 .product-name {
     position: relative !important;
}
/*Disable cart quantity elementor cart*/
span.elementor-button-icon-qty {
    display: none!important;
}

/*No cart double thumbnail*/
 .elementor-menu-cart__main .wcf-product-thumbnail {
     display: none;
}
/*Order review table adjustments*/
    selector table.shop_table.woocommerce-checkout-review-order-table {
        border: 0px !important;
        box-shadow: none !important;
    }
    selector th, selector td {
        padding-left: 5px !important;
    }
    selector #order_review tfoot tr td, #order_review tfoot tr th {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
    selector #order_review tbody td {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }
    selector .wcf-product-thumbnail img {
        border: 2px solid #d9d9d9 !important;
    }
/*Hide overflow cartflows container*/
 .cartflows-container {
     overflow: clip;
}

/*Desktop and tablet*/
@media(min-width:769px) {
    /*Customer info width adjustment*/
     selector .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout .wcf-customer-info-main-wrapper {
         width: 57%;
         padding: 0 85px 0 0 !important;
    }
    /*Prod image max width*/
     selector .wcf-embed-checkout-form .woocommerce .wcf-product-image .wcf-product-thumbnail {
         width: 70px !important;
    }
    /*Right column background*/
     .wcf-order-wrap {
         position: relative;
    }
     .wcf-order-wrap::before {
         content: '';
         display: block;
         position: absolute;
         top: -200%;
         left: -30px;
         width: 400%;
         height: 400%;
         background: #f9f9f9; /*here you setup the background color*/
         border-left: 1px solid #e9e9e9; /*here you setup the border color*/
         z-index: -1;
    }
}


/*Mobile Adjustments*/
 @media(max-width:767px) {
    /*Floating product quantity and design*/
     selector table.shop_table.woocommerce-checkout-review-order-table.cartflows_table strong.product-quantity {
         padding: 1px 7px 1px 5px;
         font-size: 10px !important;
         left: clamp(70px, 27%, 85px) !important;
         top: -4px !important;
         letter-spacing: -1px;
    }
    /*Product image mag width*/
     selector .wcf-embed-checkout-form .woocommerce .wcf-product-image .wcf-product-thumbnail {
         max-width: 65px !important;
    }
    /*Product table - equalize height for floating order count */
     selector .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table .cart_item:first-child .product-name, selector .wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout table.shop_table .cart_item:first-child .product-total {
         padding-top: 0px !important;
    }
     selector tr.cart_item:first-child {
         border-top: 25px solid transparent;
    }
}
/*Very small devices */
 @media(max-width:335px) {
    /*Display product count inline */
     selector table.shop_table.woocommerce-checkout-review-order-table.cartflows_table strong.product-quantity {
         left: 0px !important;
         top: 0px !important;
         position: relative !important;
         margin: 0px !important;
    }
}

Adding a Cart Icon

Enhance the cart icon section:

  1. Insert a cart icon and customize its appearance.
  2. Hide the checkout button (since we're already on the checkout page).
  3. Optionally, configure settings for item removal and auto-updates.
  4. Style the cart icon and its items as desired.

Mobile Optimization

Ensure a responsive design:

  1. Address mobile padding issues.
  2. Ensure a responsive header and layout.
  3. Resolve display issues with Google Pay and Apple Pay by adding this code into a HTML widget.
<script>
/* Move google and apple pay above the form */

document.addEventListener("DOMContentLoaded", function() {
  // Get the elements by their IDs
  var paymentRequestWrapper = document.getElementById('wc-stripe-payment-request-wrapper');
  var paymentButtonSeparator = document.getElementById('wc-stripe-payment-request-button-separator');

  // Get the target element by its class
  var customerInfoMainWrapper = document.querySelector('.wcf-customer-info-main-wrapper');

  if (paymentRequestWrapper && paymentButtonSeparator && customerInfoMainWrapper) {
    // Prepend the elements to the target element (insert at the beginning)
    customerInfoMainWrapper.insertBefore(paymentButtonSeparator, customerInfoMainWrapper.firstChild);
    customerInfoMainWrapper.insertBefore(paymentRequestWrapper, customerInfoMainWrapper.firstChild);
  }
});

</script>

Congratulations! You've successfully transformed your Woocommerce checkout page into a Shopify-like experience that can greatly improve your customers' shopping experience.
With Elementor Pro and CartFlows, you've not only elevated the aesthetics but also enhanced the functionality of your checkout process.

Your online store now boasts a user-friendly, visually appealing checkout page that can potentially increase your sales. If you found this tutorial helpful, don't forget to like it, and feel free to leave any comments or questions below. Happy selling!

Step-by-Step Tutorial: Floating Labels in Elementor Forms

Learn how to create floating labels in Elementor forms using JavaScript and CSS customization. This tutorial will guide you through the steps to add required and acceptance fields, customize form elements, adjust layout, and optimize transition timing for a smoother user experience.

Achieve floating labels in Elementor form:

1. Setup The form

Add the form widget and the desired fields, then remove the placeholders for all the fields.

2. Add HTML Widget above the form and insert the Javascript

<script>
document.addEventListener("DOMContentLoaded", function() {
    var inputs = document.querySelectorAll("input, textarea");

    inputs.forEach(function(input) {
        var closestFieldGroup = input.closest(".elementor-field-group");
        var label = closestFieldGroup ? closestFieldGroup.querySelector("label") : null;

        function updateLabelClass() {
            if (label) {
                if (input.value.trim() !== "") {
                    label.classList.add("focused", "normalizecolor");
                } else {
                    label.classList.remove("focused", "normalizecolor");
                }
            }
        }
    var isFocused = (document.activeElement === input);
        input.addEventListener("focus", function() {
            if (label) label.classList.add("focused");
        });
        
        input.addEventListener("input", function() {
            updateLabelClass();
        });

        input.addEventListener("blur", function() {
            if (label) label.classList.remove("focused");
            updateLabelClass();
        });

        updateLabelClass(); 
    });
});
</script>

3. Edit the form CSS

Right click on the form > Advanced > Custom CSS and add the following CSS: 

    /*Initial label positioning*/
label:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label):not(.elementor-field-type-select label)  {
position:absolute;
left: 28px;
top:16px;
}

/*Floating Positioning*/
label.focused:not(.elementor-field-type-checkbox label):not(.elementor-field-type-acceptance label):not(.elementor-field-type-radio label):not(.elementor-field-type-select label) {
    top:-10px;
    font-size:85%;
    color:#F3633A;
    background: #fff;
    padding: 3px;
   
}

/*Select default state*/
.elementor-field-type-select label{
    position:absolute;
    left: 28px;
    top:-10px;
    font-size:85%;
    color:#F3633A;
    background: #fff;
    padding: 3px;
    z-index: 1
}

/*Select default state margin*/
.elementor-field-type-select{
    margin-top:10px;
}

/*Input border color on focus*/
input:focus, textarea:focus {
    border-color: #F3633A!important;
}

/*Label color when the field is completed*/
.normalizecolor{
    color:#949494!important;
}
/*Floating transition*/
.focused, label{
    transition:all 0.4s;
}

Then change the CSS color codes to match your design.
Also you can also adjust the label initial positioning, or the floating positioning.

Lazy doing it on your own?

With this tutorial, you can easily implement floating labels in Elementor forms. Follow the steps to create visually appealing and user-friendly forms on your website. Experiment with customization options to match your design preferences and enhance the overall form experience. Enjoy building stunning forms with Elementor!

Adding Delayed Video Elements to Your WordPress Website with VideoJS and Elementor

Loading the VideoJS Library in Elementor

  1. Step 1: Load the VideoJS library into Elementor using custom code.(JS & CSS)
    https://cdnjs.com/libraries/video.js/7.21.2
  2. Step 2: Customize the appearance and behavior of video content using VideoJS.

Adding CSS for Styling

  1. Step 1: Carefully add CSS at the end of the body for accurate styling.
  2. Step 2: Add CSS to create a gradient border and center the play button.

Adding Video Content

  1. Step 1: Add video content to your website using VideoJS.
  2. Step 2: Customize the video player to match the gradient border.

Creating an Effective Display

  1. Step 1: Add a container, heading, and form to display the content effectively.
  2. Step 2: Set container width and adjust the heading to fit the content.
  3. Step 3: Customize and integrate the form to suit your needs.

Adding Delayed Video Element

  1. Step 1: Add a hidden element with a responsive class and JavaScript.
  2. Step 2: Reduce the container size to fit the element.
  3. Step 3: Copy and paste the JavaScript code to trigger element display after a specified delay.
  4. Step 4: Adjust the delay duration as per your requirements.
  5. Step 5: Enable or disable the progress bar in JavaScript to allow skipping forward and backward in the video.

HTML

<video
    id="my-video"
    class="video-js"
    playsinline
    controls
    preload="auto"
    width="1280"
    height="720"
    poster="/wp-content/uploads/2023/02/fitness-thumbnail.jpg"
    data-setup='{"fluid": true}'
    
  >
    <source src="https://archive.org/download/Starry_Sky_Time_Lapse/Stars%20H264.mp4" name="" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

JS

<script>
jQuery(document).ready(function($) {

var triggertime = 3; //define time in seconds
var player = videojs('my-video', {
responsive: true
});
player.controlBar.progressControl.disable();
player.on('timeupdate', function() {
  localStorage.savedTime = player.currentTime();
    if (player.currentTime() >= triggertime) { 
    $('.dropelement').fadeIn();
  }
}); //define the watched time in local storage



if (!localStorage.noFirstVisit) {
localStorage.noFirstVisit = "1"; //define the first visit
localStorage.savedTime = 0; //Define the default watched time
} else {
if (localStorage.savedTime >= triggertime){
$('.dropelement').fadeIn();
} else {
player.currentTime(localStorage.savedTime);
player.on('timeupdate', function() {
if (player.currentTime() >= triggertime) {
$('.dropelement').fadeIn();
}
});
}
}
});
</script>

CSS

.video-js .vjs-big-play-button {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

.video-js .vjs-tech, #my-video, .vjs-poster{
  border-radius: 15px;
  height:100%;
}
.vjs-poster{
    height:100%;
  background-size: cover!important;
  background-position: top center!important;
 
}
.video-js .vjs-control-bar {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

Lazy doing it on your own?

Download elementor template

Conclusion

In conclusion, leveraging the power of VideoJS, a HTML5 player framework, along with Elementor, you can enhance user engagement with video content on your WordPress website. By following the steps outlined in this article, you can easily customize the appearance and behavior of your video content and seamlessly integrate it with your website's design and forms. Take advantage of delayed video elements to provide an interactive and captivating experience for your users.