Tag: woocommerce

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

Display the discounted amount per product on the Order Details in WooCommerce.

After a customer completes a purchase in your WooCommerce store, they get redirected to the Order Received page.

This Order Received page contains information about the purchase, like the Order Number, the customer’s full name, email address, and payment method used, and there is also a table featuring the list of purchased items called Order Details.

Each item in the Order Details table usually has the Product name, Amount, Price, and, at the very end, a calculation of the order Subtotal, Shipping, Taxes (if any), and if you offered a discount, the discount for the total purchase.

Let’s say you are running a special deal to get sales rolling. You want to show your customers how much they are saving per item after the purchase.

Nice idea.

The problem is that WooCommerce does not have an option to display the discount per product.

So, how can you add one?

You can leverage the woocommerce_order_item_meta_end action.

In short, this action hook allows you to add custom content at the end of each order item.

The woocommerce_order_item_meta_end action allows you to use three parameters: item ID, item, and order.

First, you want to get the original item price, dividing the item subtotal by the item quantity the customer purchased.

Now, get the actual price paid per item, dividing the item total by the item quantity.

In WooCommerce, you may create Coupons that only apply to specific products. You may want to run the code only for products that qualify for the discount. Non-discounted products would not need to display a discounted price.

So, if the price the customer paid per a specific item is less than the original price of the same item, then show the discounted amount for that product.

An item will be excluded from the function when it fails this condition.

The resulting code looks like this:

add_action('woocommerce_order_item_meta_end', 'display_product_discount', 10, 3);
function display_product_discount($item_id, $item, $order) {
    // Get the original product price from the order item data
    $original_price = (float) $item->get_subtotal() / $item->get_quantity();

    // Get the actual price the customer paid for the product in the order
    $order_price_per_item = (float) $item->get_total() / $item->get_quantity();

    // Check if the product was discounted
    if ($order_price_per_item < $original_price) {
        // Calculate the discount per product
        $discount_per_product = $original_price - $order_price_per_item;

        // Display discount per product and discounted price with inline CSS
        echo '<div class="product-discount">';
        echo 'Discount: ' . wc_price($discount_per_product) . '<br>';
        echo '<span style="color: green; font-weight: bold;">Price after discount: ' . wc_price($order_price_per_item) . '</span>';
        echo '</div>';
    }
}

This is the final result

Posted on

How to add a custom icon to each shipping method in WooCommerce

Shipping methods define how the purchase will be delivered to your customer.

Commonly, the shipping service is taken care of by a company. Some of the shipping companies are larger than others.

You can identify the Shipping Method with a label in the shipping method settings in WooCommerce.

But if you feel the shipping label is not enough, you can add an icon to it.

It can be the company’s logo or any other indication that the user can better familiarize themself with.

WooCommerce provides a filter woocommerce_cart_shipping_method_full_label that allows you to retrieve the label of a specific shipping method, make changes, then return the result you have created.

A basic implementation of the filter would be to detect if the shipping method is ‘Free Shipping’ and add a specific custom icon:

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 the image to a specific method.      
	
	if($method->method_id == 'free_shipping'){
                $label = $label . '<img src='methodIcon.png'/>
        }
	
	
   return $label; 
}

Now, if you want to detect multiple shipping methods, instead of an if conditional, you can use a switch statement, better suited for multiple cases. The function then will return $label as many times as cases are processed from the switch statement.