WooCommerce Extension Conflict

[weatherstone]

Good morning,

I added the extension “WooCommerce Products Compare” to my client’s shop at (under construction, but credentials provided separately) https://denverhighriseliving.com/condo-intel/. Unfortunately, you can see that it is causing a few conflicts:

1. “Select to Compare” is now hidden underneath another layer on the product listings. Is there a way to bring it up and just format it on a button exactly like but right above “Add to Cart”?
2. Products added to the “Compare Products” tool in the sidebar are huge. Can those be formatted to look exactly like products do when added to the cart?
3. While on that page, please note that I cannot seem to find where to change the title from “Condo Reports” to “Condo Intel.”

Thank you!
J

[ruenel]

Hello There,

Thanks for writing in!

1.) To resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product .entry-wrap {
    top: auto;
    bottom: 28px;
    height: 120px;
}

.woocommerce li.product .entry-wrap:before {
    height: 148px;
}

2.) To resolve this and make it smaller, you will need to use this custom css code:

.woocommerce-products-compare-widget ul li h3 {
    font-size: 16px;
}

3.) You can change it by going to X > Theme Options > Ethos > Shop Options and change the shop title.

We would loved to know if this has work for you. Thank you.

[weatherstone]

Hello,
Your solutions for 1 and 2 will work at least temporarily.

3. That is where I remembered that setting being, but mine does not appear to be there. Please feel free to login and check, but I think that field is missing? The page needs to say “Condo Intel.”

Could you also tell me how to make a couple more edits to the shop page sidebar (https://prnt.sc/k0ocos)?

1. Reduce space above widget headings (Cart and Compare Condos).
2. Make “subtotal, view cart, checkout” text bigger.
3. Instead of the button saying “Compare Products,” can it just say “Compare”?
4. Can the hyperlink from that same button be removed?
5. Can the placeholder text above that button read “Add some condos to compare”.

Thank you,
J

[Alaa]

Hi J,

I’m not really sure why you don’t have “Shop Options” in any of the stacks settings on your site, it should be right there:

Try to revert back to the parent theme and remove any JS/CSS codes then recheck this issue, I’ll provide an alternative solution below (as you need to change this title).

1- You can use this CSS code:

.x-sidebar .widget {
    margin-top: 1em;
}

2- That’s the snippet you need:

.woocommerce-mini-cart__total, .woocommerce-Price-amount, .widget_shopping_cart .buttons .button {
    font-size: 14px;
}

3, 5 Add this JS snippet to (Theme Options > JS):

jQuery( document ).ready(function($) {
	$('.woocommerce-products-compare-widget-compare-button').text('Compare');
	$('.woocommerce-products-compare-widget-compare-button').prop('title', 'Add some condos to compare');
});

5- I’m not sure why you want to remove the hyperlink from that button, it will disable its functionality, if you are sure you want to do that, then add this JS snippet to (Theme Options > JS):

jQuery(".woocommerce-products-compare-widget-compare-button").click(function(e) {
        e.preventDefault();
});

To change the page title, add this line to the snippet in number 3:

jQuery('.h-landmark span').text('Condo Intel');

Thanks.

[weatherstone]

Hello,

The JS snippet from 3,5 is not affecting the text on the sidebar.

Re number 5, I am actually not trying to remove the hyperlink from the button. What I really want is to change the style of the button to be all caps white text on top of an all black flat background. I don’t want the underline under the link.

Thank!

[ruenel]

Hi There,

Both the 3 and 5 is working.

To get rid of the underline, please make use of this code:

a.button.woocommerce-products-compare-widget-compare-button {
    text-decoration: none;
}

We would loved to know if this has work for you. Thank you.

[weatherstone]

Hello,

I think I misspoke! I was not trying to add popover text.

I was referring to the default text in both the empty shopping cart (“No products in the cart.”) and the comparison cart (Add some products to compare.).

Thank you,
J

[ruenel]

Hello There,

Please update the JS code and use this:

(function($){
  $('.woocommerce-mini-cart__empty-message').text('No products in the cart with your own words.');
  $('.no-products').text('Add some products to compare with your own words.');
})(jQuery);

And to make the compare button all caps, you will need to update the css code I gave you in to this one:

a.button.woocommerce-products-compare-widget-compare-button {
    text-decoration: none;
    text-transform: uppercase;
}

Hope this helps.