[Resolved] Product styling from shop page to Woocommerce ‘All Products’

[Angus]

Hi all,

I’ve been pulling my hair out for the last 2 days, trying to get the same styling from the products on the shop page to a ‘All Products’ block on the home page. Succeeded with a few aspects but still can’t get the add to cart buttons the same as the shop page (green with no border radius). Also the the product rating stars are black, not yellow. And for products without ratings it just doesn’t show them, rather than them being greyed out. Weirdly the button colour is green in the block editor but still rounded. I think I’m overriding the CSS somewhere, but can’t figure out where! I’m at a loss, so any help would be very much appreciated.

Thanks

[Ying]

Hi Angus,

The border radius comes from Woocommerce block, try this CSS to change color and remove border radius:

.wp-block-button__link.add_to_cart_button {
    background: #75c32c;
    border-radius: 0;
}

Turn rating stars color to yellow:

.wc-block-components-product-rating__stars.wc-block-grid__product-rating__stars span::before {
    color: #ffa200;
}

Hide the grey out stars:

.woocommerce .star-rating:before {
    opacity: 0;
}

Let me know 🙂

[Angus]

The first 2 worked perfectly! Thank you. The greyed out stars that show on the shop page products when there is no rating, aren’t showing up on the home page products at all?

[Angus]

Sorry, I should of been a little clearer, I want the greyed out stars to appear when there is no rating on the product. They currently appear on the shop page, but not on the home page products. On the home page no stars appear at all.

[Leo]

I want the greyed out stars to appear when there is no rating on the product.

Unfortunately that’s not something we can do with CSS. You will need to check with WooCommerce Block’s support team.

[Angus]

Yeah, I was hoping to avoid going down that rabbit hole with them, their support leaves a lot to be desired. I understand, thanks Leo 👍

[Leo]

No problem 🙂

[Author]

Posts