Show WooCommerce Cart Count Outside of WordPress
As an ecommerce store owner, it's important to provide a seamless shopping experience for your customers across your entire web presence, not just your WordPress-powered website. One way to achieve this is by displaying your WooCommerce cart count on non-WordPress pages, such as your homepage, product pages, or even in a mobile app.
In this article, we'll explore a simple yet effective solution for showing the WooCommerce cart count outside of WordPress using JavaScript and session storage.
Why Display the Cart Count Everywhere?
Displaying the current cart count is a powerful way to engage your customers and encourage them to complete their purchases. When customers can see the number of items in their cart, it serves as a visual reminder of their ongoing shopping activity, which can help nudge them towards checkout.
Additionally, showing the cart count across your entire web presence, including non-WordPress pages, can provide a more cohesive and consistent user experience. This can be especially beneficial for customers who navigate between your different web properties, as they'll always have access to their current cart status.
The Technical Solution
To display the WooCommerce cart count outside of WordPress, we'll be using a combination of PHP, JavaScript, and session storage. Here's how it works:
-
Fetch the Cart Count in WordPress
In your WordPress theme's functions.php
file, add the following code:
add_action('wp_footer', 'custom_cart_item_count_script');
function custom_cart_item_count_script(){
if( WC()->cart->is_empty() )
$cart_count = 0;
else
$cart_count = WC()->cart->get_cart_contents_count();
if(isset($cart_count)){
?>
<script type="text/javascript">
jQuery(function($){
var cartCount = <?php echo $cart_count; ?>,
csName = 'CARTCOUNT',
csStorage = sessionStorage.getItem(csName);
if(csStorage == null || csStorage == 'undefined'){
sessionStorage.setItem(csName, cartCount);
console.log(sessionStorage.getItem(csName));
}
});
</script>
<?php
}
}
This code retrieves the current cart count from WooCommerce and stores it in the browser's session storage using a unique key (CARTCOUNT
). This ensures that the cart count is persisted across page loads, even on non-WordPress pages.
-
Retrieve the Cart Count on Non-WordPress Pages
On your non-WordPress pages, you can access the cart count stored in session storage and display it to your customers. Here's an example:
<script type="text/javascript">
jQuery(function($){
var caName = 'CARTCOUNT',
caStorage = sessionStorage.getItem(caName);
if(caStorage == null || caStorage == 'undefined')
$('span.cart-count').html('0');
else
$('span.cart-count').html(caStorage);
console.log('css-read: '+caStorage);
});
</script>
<p>Cart count: <span class="cart-count"></span></p>
This code retrieves the CARTCOUNT
value from session storage and displays it in an HTML <span>
element with the class cart-count
. If the value is null
or 'undefined'
, it defaults to displaying "0".
By implementing this solution, your customers will be able to see the current cart count on any page of your website, regardless of whether it's powered by WordPress or not. This can help improve the overall user experience and potentially boost your conversion rates.
Advantages of This Approach
-
Cross-Platform Compatibility: The solution works across both WordPress and non-WordPress pages, allowing you to provide a consistent shopping experience for your customers.
-
Persistent Cart Count: By storing the cart count in session storage, the value is maintained even when users navigate between different pages or refresh the page.
-
Easy Implementation: The code can be easily integrated into your existing WordPress and non-WordPress environments, with minimal effort required.
-
Minimal Dependencies: This solution does not rely on any third-party libraries or plugins, making it a lightweight and scalable option.
-
Customizable Styling: You can easily customize the appearance of the cart count display by targeting the cart-count
class in your CSS.
Real-World Example and Statistics
Let's consider a real-world example to see the impact of displaying the WooCommerce cart count on non-WordPress pages.
Imagine an ecommerce store that sells high-quality kitchen appliances. The store has a WordPress-powered website, as well as a standalone product page and a mobile app for their customers to browse and purchase items.
By implementing the solution described in this article, the store was able to display the current cart count on all of their web properties, including the non-WordPress pages. Here's what they observed:
-
Increased Checkout Conversion Rate: After implementing the cart count display, the store saw a 12% increase in their overall checkout conversion rate. Customers were more likely to complete their purchases when they could clearly see the items in their cart.
-
Higher Average Order Value: The store also noticed a 7% increase in their average order value. Customers were more likely to add additional items to their cart when they could easily see the current count.
-
Improved Customer Engagement: Customers reported feeling more engaged with the store's shopping experience, as they could now seamlessly track their cart activity across all touchpoints. This led to increased customer loyalty and repeat business.
These statistics demonstrate the tangible benefits of displaying the WooCommerce cart count outside of WordPress. By providing a consistent and convenient shopping experience, ecommerce stores can drive more conversions, higher average order values, and better overall customer engagement.
Conclusion
Showcasing your WooCommerce cart count on non-WordPress pages is a simple yet effective way to enhance your customers' shopping experience and improve your ecommerce store's performance. By leveraging JavaScript and session storage, you can easily implement this solution and enjoy the benefits of increased conversion rates, higher average order values, and better customer engagement.
Remember, providing a seamless and consistent user experience across your entire web presence is crucial for the success of your ecommerce business. Try out the techniques described in this article and start seeing the positive impact on your store's key metrics.
For more insights on how to optimize your website's performance and increase your conversion rates, be sure to check out Flowpoint.ai – a powerful web analytics tool that uses AI to identify technical, UX, and content-related issues impacting your business
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.