Problem with WooCommerce integration in Cardinal

[Kyle – SUPPORT]

No problem

[FlawlessWeb]

Just noticed one small issue with the new WooCommerce booking implementation in Cardinal.

See the screen-shot: When you hover over a bookings product, the button contains no text. Would it be possible to add the ‘Read More’ text to that hover button?

Thanks.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

.product-type-booking.product .cart-overlay .shop-actions > a > span {
display: block;
}

– Kyle

[FlawlessWeb]

Hey,

That code is a start. But not there yet.

In fact, I have noticed a bigger problem. Earlier in this thread, Ed recommended I remove this custom css I implemented:

/*
.product-type-standard .product .cart-overlay .shop-actions > a {
width: 132px;
}
*/

After adding your code and removing my custom code from above, see the attached screenshots:

#1. The hover button on Bookings products
#2. The hover button on Gravity form products..

Both are messed up…

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding back in our code:

.product-type-standard .product .cart-overlay .shop-actions > a {
width: 132px;
}

– Kyle

[FlawlessWeb]

That wasn’t your code. That was code I put together to try and fix the gravity forms hover issue.

Anyway, I added that code back in and it solves the gravity forms hover issue; not the bookings one though.

See screenshots for how they look now…

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

I just missed the y for our ha was uspposed to say ‘your’.

Sorry use inline-block instead of just block:

.product-type-booking.product .cart-overlay .shop-actions > a > span {
  display: inline-block;
}

– Kyle

[FlawlessWeb]

Almost there 🙂

Firstly, need to add this to your code to get it to look right:

.product-type-booking.product .cart-overlay .shop-actions > a > span {
  display: inline-block;
  padding-left: 10px;
}

Secondly, by introducing the 132px code above to resolve the issues with the bookings and gravity forms products, it messes up the hover effect on standard WooCommerce products. See the screenshot.

How to solve that?

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Replace:

.product-type-standard .product .cart-overlay .shop-actions > a {
width: 132px;
}

with

.product-type-booking.product .cart-overlay .shop-actions > a, .virtual.product .cart-overlay .shop-actions > a {
width: 132px;
}

– Kyle

[FlawlessWeb]

All fixed 🙂

Thanks.

[Kyle – SUPPORT]

Great 🙂

– Kyle