Need Help with CSS on WooCommerce Catalog Page

Support
#1

Hello,

I realize that this is possibly outside the scope of service, but I’m hoping someone could easily identify why a handful of buttons are behaving differently than other, identical buttons of the same ID/Class.

The site in question is dev.itsacruisego.com. We have a plugin that allows the customer to create a custom bundle, and the plugin adds two new buttons (Add to Bundle and View Product). For almost every product in a category it honors the following CSS I added:
.mwb_cpb_add_bundle.button
{
padding: 7px 6px 7px 6px;
top: -226px;
left: -10px;
font-size: 16px;
width: 50%;
background-color: #004a98;
border-color: #004a98;
font-family: “CaviarDreams”, sans-serif;
}

However, as shown in the screenshot, for some products on the storefront the Add to Bundle button drops farther than the other Add to Bundle buttons. I have been unable to ascertain why these few seem to disregard the CSS above and instead have different spacing.

I’m hoping someone may have some insight as to what is causing this odd behavior. I’ve looked through the custom CSS I’ve added in PRO options, but I can’t identify any conflicting CSS that might be causing it. Thanks for your time and assistance.

#2

Hi there,

You have several licenses in your account and I am not sure which site is in question.

Please also provide us the link to the site so that we can check it.

Hope this helps.

#3

Sorry, I should’ve pulled the URL out of the body copy. The URL is https://dev.itsacruisego.com/storefront

The CSS issue crops up in various products in every product category. The one pictured in is the Wear category.

#4

Hi again,

Thank you for the URL. I checked your storefront page and I could not find the two buttons you’re referring (see screenshot)

I can only see Add to Cart button. Have you deactivated the plugin? Can you please re-activate it so we can take a look?

Thanks!

#5

I’m sorry. I forgot that to get the other buttons visible the plugin requires you to first go to the Create Your Own Package product in the packages category, then click the Add to bundle button. After that you’ll be taken back to the catalog but now the Add to Bundle button is visible.

#6

Hello @MPP_dshoales,

You are having the issue only in the product which has a title that is in two rows. To make sure that the buttons will be aligned across the product list, you may set a minimum height for the product titles. To do that, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product .entry-header h3 {
    min-height: 45px;
}

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

#7

Hello @RueNel,

Thanks for verifying that it was only on products with two lines in the name. I wasn’t sure if that was indeed the culprit but I’m glad to know it’s that and not something more serious.

I loaded the supplied CSS into my Global CSS and did not note any changes to the Add to Bundle button on those products with two lines in the name. I double checked this in Chrome, Firefox and Safari and noted that there is still the additional space on those products.

#8

Hello @MPP_dshoales,

Please update the code and use this:

.woocommerce li.product .entry-header h3 {
    min-height: 55px;
}

Please let us know if this works out for you.

#9

Hello @RueNel,

I tried the update you just performed and it didn’t seem to resolve the issue. I also noticed you were increasing the min-height from 45px to 55px and kept increasing just to see if there was any that affected the layout. Unfortunately I went up to 125px (just for fun) and that still didn’t resolved the margin between the buttons.

#10

Hello @MPP_dshoales,

Adjusting the css or having your custom css won’t be the resolution to the issue. It is only a band aid fix which has no guarantee that will result to a decent display. The button should be added along with the add to cart button.

Please remove your custom css:

.mwb_cpb_add_bundle.button {
    padding: 7px 6px 7px 6px;
    top: -226px;
    left: -10px;
    font-size: 16px;
    width: 50%;
    background-color: #004a98;
    border-color: #004a98;
    font-family: "CaviarDreams",sans-serif;
}

Have it updated and use this instead:

.woocommerce li.product .entry-header .mwb_cpb_add_bundle.button {
    padding: 7px 6px 7px 6px;
    top: -110px;
    left: -10px;
    font-size: 16px;
    width: 50%;
    background-color: #004a98;
    border-color: #004a98;
    font-family: "CaviarDreams",sans-serif;
}

And then please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
  $('.products .product').each(function(){
  	$(this).find('.mwb_cpb_add_bundle.button').insertAfter( $(this).find('.add_to_cart_button') );
  });  
})(jQuery);

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

#11

Hello @RueNel,

Thanks for your assistance on this as I know it’s outside of Theme.co’s support, so I really appreciate the help you all provide with this.

After replacing the custom CSS I was using and replaced it with your li.product version, and then added the JS code, I saw that the button spacing looked great on mobile. However, two additional issues cropped up.

  1. On desktops the Add to Bundle button now seems to overlap the Add to Cart button while on mobile devices the buttons look fine.
  2. On desktops the price is spaced correctly from the bottom of the product name, however on mobile screens the prices is drastically farther away from the bottom of the product name.

Looks like we’re really close on this, so thanks again for all of the assistance you’ve been providing.

#12

Hello @MPP_dshoales,

This code is no longer needed thus you can remove it:

@media screen and (max-width: 767px){
  .woocommerce li.product .entry-header h3 {
    min-height: 200px;
  } 
}

And make sure that this code is added because this will fix position of the button:

.woocommerce li.product .entry-header .mwb_cpb_add_bundle.button {
    padding: 7px 6px 7px 6px;
    top: -110px;
    left: -10px;
    font-size: 16px;
    width: 50%;
    background-color: #004a98;
    border-color: #004a98;
    font-family: "CaviarDreams",sans-serif;
}

Hope this helps. Please let us know how it goes.

#13

Hello @RueNel,

Yep. Removing the screen break fixed that, though I do need it for text changes at small screen sizes. At least knowing that I can now move some of the CSS around and remove the ones I no longer need. Thanks again for all of your assistance on this.

#14

You’re welcome!
Thanks for letting us know that it has worked for you.

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.