Category: CheckoutWC

Posted on

How to add text or an icon to the Shipping Method label in WooCommerce

For your available shipping methods, you may want to add an image, text, or any other type of indicator at the farther right corner of the Shipping Method name.

You can do so with the woocommerce_cart_shipping_method_full_label filter.

This filters the shipping method full label and accepts two parameters, $label, the label of the shipping method, and $method, the actual method object.

To filter a specific method label, you can reference the method by its id.

You can access the method_id property of the method object.

Then set different cases in a switch statement covering the different methods you want to filter.

At the end, always return $label.

/*
* Filter the shipping method labels and add an extra text string to the right side of the method's label.
*
* @param $label. The shipping method label.
* @param $method. The method object.
* @return $label. The shipping method label, whether modified or left intact.
*/
add_filter( 'woocommerce_cart_shipping_method_full_label', 'filter_woocommerce_cart_shipping_method_full_label', 10, 2 ); 

function filter_woocommerce_cart_shipping_method_full_label( $label, $method ) { 
   // Use the condition here with $method to apply an image or text string to a specific method.      
	
	switch($method->method_id){
		case 'free_shipping':
			$label = $label . '<span>FREE</span>';
			break;
		case 'flat_rate':
			$label = $label . '<span>Icon</span>';
			break;
	}
	
	
   return $label; // Always return $label.
}

This is tested and works perfectly with CheckoutWC 9.0.25 (the latest version at the time of writing).

Posted on

Prevent the CheckoutWC’s Side Cart from opening when editing a page with Elementor.

There is a problem with Elementor and CheckoutWC, and that is, when you try to edit any page in the Elementor editor, and you save a change, the CheckoutWC’s Side Cart will auto-open for some strange reason.

This problem is somewhat complex to solve as essentially, the Elementor editor lives in its own environment. This means that if you try to run a WordPress hook from the WordPress core or a third-party plugin, it may or may not work.

I found a workaround to get rid of the Side Cart auto opening when editing a page with Elementor.

It is not the most elegant solution, but hey, it works!

The logic behind it is simple: Detect if the Elementor editor exists on the current page, with JavaScript and CSS selectors. If it does, hide the Side Cart’s floating icon, drawer element, and the background overlay.

See the code below:

function custom_inline_script_for_elementor() {
    // Check if we are in the admin area and return early if we are not
    if (is_admin()) {
        return;
    }

    ?>
    <script>
    (function() {
        var checkAndHide = function() {
            if (document.body.classList.contains('elementor-editor-active')) {
                var elementsToHideIds = ['cfw-side-cart-floating-button', 'cfw-side-cart-overlay', 'cfw-side-cart'];
                elementsToHideIds.forEach(function(id) {
                    var elementToHide = document.getElementById(id);
                    if (elementToHide) {
                        elementToHide.style.display = 'none';
                    }
                });
            }
        };

        // Check immediately
        checkAndHide();

        // Then check repeatedly for a few seconds
        var intervalId = setInterval(checkAndHide, 500);

        // Stop checking after 5 seconds
        setTimeout(function() {
            clearInterval(intervalId);
        }, 5000);
    })();
    </script>
    <?php
}
add_action('wp_footer', 'custom_inline_script_for_elementor');
Posted on

Disable the Side Cart conditionally in CheckoutWC on specific pages.

The Side Cart is convenient in any store to help users access the products they are about to purchase.

But at the same time, it may also be convenient not to have it on all pages on your website.

Some pages require more attention from the user.

So a simple way you have to prevent CheckoutWC’s Side Cart from appearing in specific pages is using the cfw_disable_side_cart filter.

In short, the cfw_disable_side_cart filter intercepts the on/off option that dictates if the Side Cart is enabled or disabled.

Following the filter’s name, you need to set it to true, and the Side Cart won’t pop up.

To dynamically change the value while detecting the page, you can use a preg_match function to check if certain slug is part of the URL.

Then wrap the preg_match evaluation in a boolval() function so it returns explicitly a boolean.

For example, if you want to disable the Side Cart on your About Us page, and the slug is yourwebsite.com/about-us/, you can do so as follows:

add_filter(
	'cfw_disable_side_cart',
	function() {
		return boolval( preg_match( "/^\/about-us/", $_SERVER['REQUEST_URI'] ) );
	}
);
Posted on

Add a custom button to CheckoutWC’s side cart

CheckoutWC side cart by default allows you to display a ‘Proceed to Checkout’ button and a Continue Shopping button. Sweet.

But what if you want to add a custom button that does something different, or more interesting that just redirecting the user to the checkout page or back to the shop?

You can add a custom button with the cfw_after_side_cart_proceed_to_checkout_button action in CheckoutWC.

Simply, create a function that outputs the button HTML structure, then hook it into the action above mentioned.

Something as follows:

add_action('cfw_after_side_cart_proceed_to_checkout_button', 'obi_custom_side_cart_button');

function obi_custom_side_cart_button(){
	
	echo '<a id="custom_side_cart_button" href="#" style="background:#FF7500" class="cfw-primary-btn cfw-side-cart-checkout-btn"> My Side Cart Custom Button </a>';
	
}

The end result: