How to Add View Cart Button In WooCommerce

Do you want to add a View Cart in your WooCommerce store? In any WooCommerce store, it is important to reduce the number of steps before a customer finishes their purchase.

Table of Contents

The View Cart button takes your shopper to the cart page. The shopper will then proceed to the checkout.

It is worth mentioning that this button is displayed on the shop page after the customer presses the Add to Cart button. This means that this button will not display if the Add to Cart button is removed on the shop page.

How to Add View Cart Button in WooCommerce

By the end of this post, you will be able to add the View Cart on any page.

WooCommerce does not have a built-in solution to get these results. This is why we will use a custom code snippet to add this button

Let us see how you can achieve this.

Steps to Add View Cart Button in WooCommerce

The following are the steps you need to follow to add the view cart button:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will add the view cart.
Add the following code to the php file:

[php] add_action( ‘wp_head’, ‘njengah_cart_btn_js_on_product_page’ );

function njengah_cart_btn_js_on_product_page() {

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0AjQuery(function(%24)%7B%0A%0Avar%20html%20%3D%20’%3Cdiv%20class%3D%22cart_btn%22%3E%3Ca%20href%3D%22https%3A%2F%2Faficreditsolutions.com%2Fcart%2F%22%20class%3D%22button%20wc-forward%22%3EView%20Cart%3C%2Fa%3E%3C%2Fdiv%3E’%3B%0A%0A%24(‘.single-product%20form.cart’).after(html)%3B%0A%0A%7D)%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

<?php
}
[/php]

This is the outcome:
Alternatively, you can add the following code anywhere you want. It is a simple HTML code:

[php] <div style="text-align: right;">
<p>
<a href="http://site_name/shop/cart/" class="button">View Cart
<a href="http://site_name/shop/checkout/" class="button checkout">Checkout
</p>
</div>
[/php]

That’s all you need to do to add the View Cart button.

Conclusion

In this brief post, you have learned how to add the View Cart button on any page.

The first solution involves using a custom PHP code that should be inserted in the functions.php file. The second code can be added to any page to display the button.

However, we recommend creating a child theme. This will ensure that your changes are not lost when an update occurs.

We hope that this post helped you to achieve your desired result.

Editorial Staff

How to Add View Cart Button In WooCommerce

How to Add View Cart Button in WooCommerce

Steps to Add View Cart Button in WooCommerce

Conclusion

Similar Articles

Related