Issue with Wishlist and Add to Cart button

Wishlist is not working
– Link in header is pointing to the same page I’m currently on
– When I click add to wishlist it adds it, but when I click on the icon again to Browse Wishlist it tries to go to a page such as https://my-domain.com/view/HNTR0R0C9FHK/ but it’s 404, not found.

The other thing is, I really love the way my customers can add products with variations directly from the category page, however, when you click on “Add to Cart” and the quick-shop toggles, now we have 2 “Add to Cart” buttons which is quite confusing.

I really don’t want to edit theme files, so this code is what I came up with and added it into the Custom JS field in Theme Options:

var disableSelector = '.quick-shop-on.product-type-variable .add_to_cart_button';

jQuery(document).on('click', disableSelector, function( e ) {
    e.preventDefault();
    jQuery(this).parents('.product').children('.product-information').addClass('disabled');
})

.on('click', '.quick-shop-close', function() {
    jQuery(this).parents('.product').children('.product-information').removeClass('disabled');
});

//jQuery(document.body).on('added_to_cart', function() {
//    jQuery(this).parents('.product').children('.product-information').removeClass('disabled');
//});

This adds a class .disabled to the .product-information div which sets its opacity to 0.2, that way it looks inactive and the customer can focus their attention to the button that actually adds the item to the cart. If the quick-shop menu is closed via the close button then it removes the class.

However, the commented part is what should remove the .disabled class, should the item be added to the cart, but that does not work, because added_to_cart is internal function to functions.js and my script doesn’t know what to do with it. How can I check if the item has been added to cart outside of that file?

Illustrating my point – .

Hello,

Thank you so much for contacting our support center.

1. It seems that you didn’t specify your wishlist page in the plugin’s settings. Read more information about it in the plugin’s documentation https://yithemes.com/docs-plugins/yith-woocommerce-wishlist/02-settings.html

2. Try to add the following code snippet to the Custom CSS area in Theme Settings

.product-grid-item .product-information:before,
.product-grid-item .fade-in-block:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    opacity:0;
    visibility:hidden;
    background-color:rgba(255,255,255,0.8);
    transition: all .3s ease;
}

.quick-shop-shown.product-grid-item .product-information:before,
.quick-shop-shown.product-grid-item .fade-in-block:before {
        opacity:1;
        visibility:visible;
}

and remove your custom scripts.

Kind Regards
XTemos Studio

Oh my! It didn’t even cross my mind that the the script is adding classes to the product wrapper… This is so much better, thank you!

The wishlist problem was exactly that, I needed to update the settings (create a new page and add the [yith_wcwl_wishlist] shortcode) in YITH plugin.

I’m going to give you guys 5 star rating and use your theme on other project as well!

Just a note if you keep track of customer feedback:
I spent a lot of money and time on top selling WP themes like Avada, Divi and even Storefront premium plugins for this project, and looked at hundreds of other themes – but NOTHING (I want to emphasize strongly on this) comes even close to WoodMart! This is THE theme to use on WooCommerce, period! Have a great day!

Hello,

Thank you very much for your review and for the 5 stars 🙂

Kind Regards

[Author]

Posts