AI Verified

Name

Continue Shopping Button on Elementor Cart Page

About

Works well with the Elementor Cart Widget. Adds a 'Continue Shopping' button that can go back to your chosen URL

Language

PHP

Rating

Voted: 0 by 0 user(s)

Codevault

WebSquadron

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.4

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

History

Last modified:

04/03/2024

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

AI Bot Comments:

Found 0 vulnerabilities

Continue Shopping Button on Elementor Cart Page

 
                    
1function cart_extra_text() {
2 echo '<style>
3 #cart-extra-text a {
4 display: block; /* Stretch to full width */
5 width: 100%; /* Full width */
6 background-color: #222222; /* Background color */
7 color: #FFFFFF; /* Font color */
8 text-align: center; /* Center the text */
9 padding: 10px 0; /* Add some padding */
10 font-size: 16px; /* Font size */
11 font-weight: 500; /* Font weight */
12 text-transform: uppercase; /* Uppercase text */
13 text-decoration: none; /* Remove underline from links */
14 border: none; /* Remove border */
15 cursor: pointer; /* Change cursor to pointer */
16 }
17 /* Optional: Add hover effect */
18 #cart-extra-text a:hover {
19 background-color: #FF0050; /* Darker shade for hover */
20 }
21 </style>';
22 
23 echo '<div id="cart-extra-text"><br><a href="https://learn.websquadron.co.uk/#join" target="_blank">Continue Shopping</a></div>';
24}
25add_action('woocommerce_after_cart_totals', 'cart_extra_text', 10, 0);

0

Comments

  • 2 months ago

    This code snippet injects a styled "Continue Shopping" button after the cart totals on the WooCommerce cart page. It achieves this by utilizing the `add_action` function to hook a custom function (`cart_extra_text`) to the `woocommerce_after_cart_totals` action hook.
    
    Components:
    
    1. Function: `cart_extra_text`
         This function is responsible for creating the button element and its styling.
         It doesn't take any arguments (`0` passed to `add_action`).
    
    2. Styling (lines 1-21):
         The function first injects a `<style>` tag using `echo` (line 1).
         Within the `<style>` tag, it defines styles for the button element with the ID `#cart-extra-text a` (lines 3-21). Here's a breakdown of the styles:
             Lines 3-5: Set the button to display as a block-level element and occupy full width.
             Lines 6-8: Define background color (`#222222`), text color (`#FFFFFF`), and center text alignment.
             Lines 9-12: Add padding, set font size, weight, and transform text to uppercase.
             Lines 13-16: Remove underline, border, and set cursor to pointer on hover.
             Lines 17-20 (Optional): Add hover effect with a darker background color (`#FF0050`).
    
    3. Button Creation (line 23):
         The function creates a `<div>` element with the ID `cart-extra-text` to contain the button (line 23).
         Inside the `<div>`, it creates an anchor (`<a>`) element with the following attributes:
             Text: "Continue Shopping"
             Href: Link to your desired "Continue Shopping" page (here, `https://learn.websquadron.co.uk/#join`)
             Target: Opens the link in a new tab (`_blank`)
    
    4. Hooking the Function (line 25):
         The final line utilizes `add_action` to connect the `cart_extra_text` function to the `woocommerce_after_cart_totals` action hook.
         Parameters passed to `add_action`:
             `'woocommerce_after_cart_totals'`: The action hook triggered after cart totals are displayed.
             `'cart_extra_text'`: The name of the function to be executed.
             `10`: Priority (optional, set to 10 for execution after other functions with lower priority).
             `0`: Number of arguments the function expects (here, none).
    
    Overall Functionality:
    
    When the WooCommerce cart page renders, the `woocommerce_after_cart_totals` action is triggered. This calls the `cart_extra_text` function, which injects the styled button element after the cart totals. The button encourages users to continue shopping on your website.
    
    Customization:
    
     You can modify the button text (line 23) and link URL to suit your needs.
     Adjust the styles within the `<style>` tag (lines 1-21) to change the button's appearance.
     The priority (`10`) passed to `add_action` can be adjusted if you need the button to display before or after other elements hooked to the same action (experiment with different values).
    

Related Snippets

Please see some snippets below related to this snippet..

WooCommerce

AI Verified

1

WooCommerce Automatically Set the Complete Order Status

Added: 1 year ago

Last Updated: 4 months ago

If you’d like to bypass the on-hold order status which either WooCommerce or the payment gateway the customer uses automatically sets on orders, and make it the Completed order status instead, then th...

WooCommerce

AI Verified

0

Streamline Your Shopping with Automatic Coupon Code Integration in Your Cart

Added: 6 months ago

Last Updated: 6 months ago

Enhance your shopping experience with seamless savings! We believe in making your store user-friendly to boost order satisfaction. Say goodbye to manual coupon entries – our system now automatically a...

WooCommerce

AI Verified

0

WooCommerce Remove Total Column In My Account Orders Table

Added: 1 year ago

Last Updated: 1 year ago

This snippet allows you to remove the ‘Total’ column from the table of orders shown in the users’ my account dashboard.

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

Performance

AI Verified

30

Remove Unused Javascript

Added: 1 year ago

Last Updated: 1 week ago

Remove Unused Javascript - and improve your Page Speed Insight Score

WooCommerce

Pro Verified

9

Deactivate some WooCommerce Checkout Fields

Added: 1 year ago

Last Updated: 6 months ago

Deactivate some WooCommerce Checkout Fields from showing

Elementor

AI Verified

6

CSS Grid Aid

Added: 6 months ago

Last Updated: 3 days ago

This can be used for any WordPress Builder to aid working with CSS Grids.