Edit – I’ve fixed the positioning using js script.
Just the query as to why both Apple & gpay show on iOS 👍
Thanks
Hi
No need as I already told you this is not Worldpay. The issue is Stipe – we use stripe to handle the wallets.
Worldpay was disabled and the issue persists. When we disabled stripe, we seen no wallet buttons. The issue is stripe not Worldpay as wallets is not enabled on our Worldpay account.
Thanks
Edit – I’ve fixed the positioning using js script.
Just the query as to why both Apple & gpay show on iOS 👍
Thanks
Hi
Thats done it perfectly – thanks. Worldpay is only using the payment form – not wallet so plays no part however your fix sorted it.
Can I just ask though, how do we get it to sit directly above the left side – as on your layout it is split in 2 columns on checkout, and this now looks silly right across the top of the page so wondered how we can align it to the same left block within Order Details so it keeps the width of that column?
Thanks again – appreciate your help.
Awesome thank you – so that is fixed on all products now presumably? Legend – appreciate your help.
One other issue I have just encountered, with the Xstore checkout page not using the official woo checkout block, the google pay button does not render on checkout page (stripe payments – gpay button for android).
I did add a fix (see below) but this only applies to the actual woo shortcode [woocommerce_checkout] and has no effect on Xstore.
Any idea how to get the google / apple button to appear on checkout page please?
The fix I tried which had no effect is –
add_action('woocommerce_review_order_before_submit', function() {
if (function_exists('wc_stripe_payment_request_button')) {
wc_stripe_payment_request_button();
}
});
Access via private – thanks.
Hi
Yes it works perfectly on that product but only that product lol.
So you’ve definitely sussed it out 🤞
I’ll leave it with you. Thanks again.
Sorry – can you please clarify the css or how I change the colour of the fancy hearts once added to wishlist – as seen on my site it is a black icon.
Thanks
Hi
This has no effect – maybe test it on your own demo’s and you will see that it is a bigger issue that requires some investigation as it never saves the added items and just looks unprofessional to customers who add it but then see the “Add to…” text again instead of “View or Remove from…”.
Can you please properly look into this as its clearly not my install as the same occurs on every single demo that the wishlist and compare is on.
Thanks again
Hiya
This is still not fixed properly – let me explain. The way I explained it originally worked with the fix / patch applied. However that based on going to shop page then selecting 6 column grid layout and then selecting 72 from the show dropdown option.
However if you do it in reverse and change it to 72 first the url looks like this – /shop/?et_per_page=72
but then lets say I now decide to use the 6 Column Grid layout – the url changes to – /shop/?view_mode=grid&view_mode_smart=yes&et_columns-count=6
Notice how the count has gone – so even though it shows 72 in the dropdown, it is only showing the default 36 products – the url should, if working right, capture the count so it renders like: – /shop/?view_mode=grid&view_mode_smart=yes&et_columns-count=6&et_per_page=72
And also when the count disappears the dropdown dies and doesn’t activate on the chosen option unless you change it down to say show 12 then back to 72. This is an issue.
You can see it on our shop – please see private for login.
Thanks
Hi
That has no effect when you refresh the page – I have to create it into a function though – do you have a js element that we can drop raw js into to avoid this?
I used –
/**
* Compare / Wishlist - Text Updating Fix
*/
// Fix variation events for XStore Wishlist / Compare
function my_variation_fix_script() {
// Make sure jQuery is loaded first
wp_add_inline_script('jquery-core', "
(function($){
function initVariationFix(){
function triggerVariationEvents(){
var \$form = $('.variations_form');
if (\$form.length){
// Trigger the main variation events
\$form.trigger('check_variations');
\$form.trigger('woocommerce_variation_select_change');
// Also trigger on the document (some themes listen here)
$(document).trigger('woocommerce_variation_select_change', [\$form]);
console.log('Variation events triggered');
}
}
// Trigger after page load
setTimeout(triggerVariationEvents, 500);
// Also trigger when variations form is ready
$(document).on('woocommerce_variation_form', '.variations_form', function(){
setTimeout(triggerVariationEvents, 100);
});
}
// Run when DOM is ready
$(document).ready(function(){
initVariationFix();
});
})(jQuery);
");
}
add_action('wp_enqueue_scripts', 'my_variation_fix_script');
Hi
You really don’t need a video. Just go to any of your themes; but for reference I’m using Fashion Minimalist.
Go to any product. Add to wishlist / compare list.
The text changes. Agreed.
Now. Hit page refresh. The text reverts back to default “Add to…” albeit it’s added.
The session isn’t storing and saving your selection to add to wishlist or compare list.
That’s the issue. Happens everywhere on product to quick view.
Hi
Yep I did. Can I just add my own menu to it and then utilise icons?
ie create a menu called Account and just link into that?
Thanks.
I have fixed the clear alignment – I essentially added a script that uses js to position it so that is resolved.
Its just the renaming of the account menu items please. 🙂
Hi
I wouldn’t call this custom – surely you just allow the filters to work on non woo pages – certainly the search results page!
As for sort options, again – it’s only not possible due to the way it’s been hard coded into your styling.
Can you please clarify how you’re passing the relevance into the page? No hooks are working – example
1. If passing relevance into the orderby then this should work (but does not)
add_filter( 'woocommerce_get_catalog_ordering_args', 'xstore_replace_relevance_with_title', 20 ); // priority 20 or higher
function xstore_replace_relevance_with_title( $args ) {
// Only for search
if ( is_search() && ! is_admin() ) {
// Optionally check post_type or other param to ensure this is product search
if ( isset( $_GET['orderby'] ) && $_GET['orderby'] === 'relevance' ) {
$args['orderby'] = 'title';
$args['order'] = 'ASC';
}
// Also handle case where no orderby is set
if ( empty( $args['orderby'] ) ) {
$args['orderby'] = 'title';
$args['order'] = 'ASC';
}
}
return $args;
}
2. If code resets order on load, then JS can be used to adjust the form before it’s submitted / before it sets the orderby like this but still, doesn’t work –
document.addEventListener('DOMContentLoaded', function() {
if ( document.body.classList.contains('search') ) {
var select = document.querySelector('.woocommerce-ordering .orderby');
if ( select && select.value === 'relevance' ) {
select.value = 'title'; // change “title” to actual option value for alphabetical sort
}
}
});
Thanks.
Thanks for the help – please see private 🙂
Hi
Please see private.
Whilst in there is it worth looking at this at the same time? Not sure –> https://www.8theme.com/topic/compare-wishlist-issues-with-saving-on-page-refresh/
Thanks
Hi
Thanks for all this. I’ll test the function later. 👍
Ok so back to the clear (attributes) button from post 1 – absolute doesn’t fix it. That just pushes it off screen. The label itself is in a th so I’m talking adding it opposite the label so like at the right of it?
Is it possible therefore to align the Clear button at the right of the attribute label? On my site you’ll see it only uses one attribute called Size so opposite that – have the clear button.
I can build the function if you can’t but I just need to target it properly if you can help. As all my attempts failed due to the way it’s hooked in via < p >
See private for my php / js hook to see if that will work or not?
Quick view issue -> Apologies, we only need short description which is echoing fine so that answers the quick view button query. I presumed it was a link to the product – not just an accordion which expands the description. So that’s sorted.
I added a function to hide SKU but wondered if there was a simpler way?
Regards search results. I’m not talking about clicking enter. I did explain it pretty clearly with images.
So on the shop page itself it shows my styling ie the blue buttons etc. on homepage it does not. It loses all the styling.
I’m specifically talking on a shop page click search from menu and type in the word York (for example) and wait. Ajax shows 5 products below it on the popup. Hover the image – you’ll see the styling as per your instructions.
Now do the same on a non-shop page ie home / about etc. all the styling is lost. It shows a horrible black and grey button left aligned and doesn’t keep it to 5 products on view in 5 columns…
That’s what I’m saying. Plus I’d like the image size in the popup to be smaller – like 75% of the value. And the text below it to be centre aligned. This isn’t possible in theme options. Or just set them all to 6 per row with the same hover button / centralised content 🤷♂️
Thanks.
Please keep things private if showing my site. Never public.
Thank you. Back soon. ❤️
Hi
Thanks for this – most things worked great so thanks.
Regards point 4 (admin access) to check why there is no more info button on quick view product – please see private content.
Also, couple of other points –
1. can you please advise how we edit the menu items for the My Account menu pop-up as I am using a custom My Account page layout and renamed the pages ie from Addresses to Manage Address. However the list doesn’t update the menu – again, see private info for images regards this.
2. The main search feature is not stylable so looks quite messy and seems to be different depending on the page you’re on – weirdly. See private for image explaining this issue.
Thanks
Hi
Its not been properly addresses as I explained – the js I added should fix it but it cannot due to the mis-configuration within the actual coding of the element.
So I am asking how we can hook into it properly so I can achieve the desired outcome?
Thanks
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.
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. 👍
Hi
This css would actually break. Example,
has() is not supported in most browsers yet (only Chrome/Safari with experimental flags) – so it won’t work in Firefox, Edge, or stable Chrome builds – ie the hover image won’t ever swap in most cases.
Plus, your rule ie
body .etheme-product-hover-swap-image {
position: static;
}
That will actually break your hover swap overlay logic, because that < span> is absolutely positioned by default to sit on top of the main image. Making it static pushes it back into the normal flow so everything shifts!
This approach still doesn’t solve the “white borders” problem. Even if the swap shows, it’ll still be letterboxed inside the square unless we use force object-fit: cover; ie
.etheme-product-hover-swap-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block;
}
That’s what I’m trying to say here. 🤷♂️
I want it to stretch on image swap / hover only – but based on centre – middle -> outwards. We need to use cover.
wrong post. Apologies
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.
Any update on this issue guys? 👍
Hi
Here you are – on one of your own demos – all I am doing is refreshing the page – the exact same happens on our site so it’s not our cache or anything, else yours would work fine – I have put the js fix above however wanted to avoid repairing your theme as it clearly needs addressing – so here’s the video showing when you add a wishlist / compare item then refresh – leave or come back = empties and reverts text back as if it was never added.
Same issue regardless whether you refresh or go elsewhere on the site then return to the same product.
Thanks
Video -> https://we.tl/t-2UMxHB1mPA
Hey – no caching. Just default Xstore 🤷♂️
Sorry to interject but this will never be approved as it’s futile. You must understand the logic of filtering –
If you plan on using filter widgets or a faceted search (e.g. filter by color, size, brand):
• You must use global attributes for those fields.
• Custom attributes won’t show up in filters unless you buy/use a filter plugin that explicitly supports meta-based filtering – and to date there’s only a couple and they aren’t that great!
Remember, non Filterable: Custom attributes won’t appear in WooCommerce’s Layered Navigation filters or most product filter plugins (unless the plugin specifically supports custom meta).
– There is no SEO Benefit: No taxonomy archive pages – they exist only as product metadata.
– Use Global Attributes for anything you want customers to filter by (size, colour, material, brand, etc.).
– Use Custom Attributes only for product-specific details that are not relevant to filtering (e.g. “Custom Text”, “Limited Edition of 25”) etc…
Filters are the biggest pain ever! But once you master the logic, you’ll be sorted!
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
}
});
});
Thanks for the support! My topic “Custom Filters – Layout not right – want it stacked.” has been successfully resolved.
Perfect – thank you very much 🙂
Free AI store scan · SalesMax
Paste your store address. SalesMax AI shows which upsell moments are missing. No signup.
Free AI speed test · FlashMax
Paste your site address. FlashMax runs Google Lighthouse for phone and desktop, checks Core Web Vitals and lists what to fix. No signup.
PhotographerPortfolio
(live demo, opens in a new tab)
Lingerie StoreFashion
(live demo, opens in a new tab)
Eco Scooter StoreSports & travel
(live demo, opens in a new tab)
Minimalist OutfitsFashion
(live demo, opens in a new tab)
DeliveryWPBakery
(live demo, opens in a new tab)
TypographyWPBakery
(live demo, opens in a new tab)
HotelBusiness
(live demo, opens in a new tab)
Electron Store 02Electronics
(live demo, opens in a new tab)
FinancesBusiness
(live demo, opens in a new tab)
Sushi StoreFood & drinks
(live demo, opens in a new tab)
Minimal Fashion 02 StoreFashion
(live demo, opens in a new tab)
Furniture Store 02Furniture
(live demo, opens in a new tab)
Bike StoreSports & travel
(live demo, opens in a new tab)
BarbershopBeauty
(live demo, opens in a new tab)
Grocery Mega MarketFood & drinks
(live demo, opens in a new tab)
Grocery MarketFood & drinks
(live demo, opens in a new tab)