Heart shortcode in Elementor loop carousel

Hi! First of all many thanks for this great plugin!

I’ve noticed that the “heart icon” isn’t showing on a loop carousel (mobile) in Elementor Pro, so I tried to use a shortcode: [alg_wc_wl_toggle_item] – but this will return the the add to wishlist button. Is there any shortcode or function to insert only the heart icon?

So far I have this solution but don’t know if this is the best approach.

// Function to generate the wishlist button HTML
function custom_wishlist_button_html() {
    // Retrieve the current product ID dynamically within a WooCommerce product loop
    $item_id = get_the_ID(); // This gets the ID of the current product in the loop

    // HTML for the wishlist button
    $html = '
    <div data-item_id="' . esc_attr($item_id) . '" data-action="alg-wc-wl-toggle" class="alg-wc-wl-btn add alg-wc-wl-thumb-btn alg-wc-wl-thumb-btn-abs alg-wc-wl-thumb-btn-loop" style="inset: 17px auto auto 17px; display: block;">
        <div class="alg-wc-wl-view-state alg-wc-wl-view-state-add">
            <i class="fas fa-heart" aria-hidden="true"></i>
        </div>
        <div class="alg-wc-wl-view-state alg-wc-wl-view-state-remove">
            <i class="fas fa-heart" aria-hidden="true"></i>
        </div>
        <i class="loading fas fa-sync-alt fa-spin fa-fw"></i>
    </div>';

    return $html;
}

// Register the shortcode to use the function
function register_custom_wishlist_shortcode() {
    add_shortcode('custom_wishlist_button', 'custom_wishlist_button_html');
}
add_action('init', 'register_custom_wishlist_shortcode');

Best.

Iulian

• This topic was modified 8 months, 1 week ago by iulianmaftei.