XStore Feature Hub: Vote Now & Help Make XStore Even Better

Hello Richardson
I am a new customer of 8theme. I need suggestions for a digital products store for these sections: AI prompts, AI Tools, AI courses, AI Blogs, and AI E-Books. The Xstore control panel has pre-built websites. In which I can choose for product store.

I’ve just asked a pertinent question –

On compare / wishlist (single product page) – if you add to wishlist or compare the text changes to whatever we set from within the settings of the widget – ie “Added to Wishlist / Remove from Wishlist” but when you’re on a product and let’s say the page refreshes; or they look around and come back – it reverts back to “Add to” instead of “Remove / View”.

How can we resolve this so it remembers that you’ve added THAT SPECIFIC product, so upon a return to that same product in the same browser session, it remembers what was added?

It’s kinda odd that it doesn’t allow more customisation and auto-flow as in –

1. Add to ->
2. Remove from ->
3. View ->

I could use js but surely if I can build a fix, I’m questioning why it’s not built-in?

Example –

jQuery(document).ready(function($){

    // --- Wishlist Button Handling ---
    $('.xstore-wishlist-btn').each(function(){
        var $btn = $(this);
        var productID = $btn.data('product-id');

        // Check if product is already in wishlist
        if (window.XStoreWishlist && window.XStoreWishlist.items && window.XStoreWishlist.items.includes(productID)) {
            $btn.text('Remove from Wishlist').addClass('added');
        }
    });

    // Wishlist click behavior: Add → Remove → View
    $('.xstore-wishlist-btn').on('click', function(e){
        e.preventDefault();
        var $btn = $(this);
        var productID = $btn.data('product-id');

        if (!$btn.hasClass('added')) {
            // Add to wishlist
            $btn.text('Remove from Wishlist').addClass('added');
        } else {
            // Remove from wishlist
            $btn.text('Add to Wishlist').removeClass('added');
        }
    });

    // --- Compare Button Handling ---
    $('.xstore-compare-btn').each(function(){
        var $btn = $(this);
        var productID = $btn.data('product-id');

        // Check if product is already in compare list
        if (window.XStoreCompare && window.XStoreCompare.items && window.XStoreCompare.items.includes(productID)) {
            $btn.text('View Compare').addClass('added');
        }
    });

    // Compare click behavior: Add → Remove → View
    $('.xstore-compare-btn').on('click', function(e){
        e.preventDefault();
        var $btn = $(this);
        var productID = $btn.data('product-id');

        if (!$btn.hasClass('added')) {
            $btn.text('Remove from Compare').addClass('added');
        } else {
            $btn.text('View Compare').addClass('added'); // or navigate to compare page if you want
        }
    });

});

Hey – no caching. Just default Xstore 🤷‍♂️

Hi – I’ve replied to my own topic with a video regards above issue.

Another cool request – icons / icon lists etc

There’s never a way to align the icon -> text properly so they look rubbish on different devices unless we target the et.icon css and change position to relative and apply top: 2px / -1px etc

Surely you could add an icon spacer option within the icon plus an ability to place the icon in an icon list right aligned – like a button. It’s handy for custom menus (mobile)!

Just some things I find annoying as a multi licence holder.

Hi

Pretty simple to grasp. The icons aren’t properly inline so offer a facility on icon list to position icon up / down – separately to the text. And allow left or right align of said icon.

Exactly as per button options under icon. 👍

Elementor. Icon list 👍

Yes it’ll enhance it. Logic says use an icon list as a custom menu but you can’t as icon is positioned before / left of text.

Ditto with height. It’s never inline central. It always sits too high or low depending on the icon.