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

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

Home Forums Support Product styling from shop page to Woocommerce ‘All Products’

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1630747
    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

    #1630770
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1630772
    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?

    #1630790
    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.

    #1630927
    Leo
    Staff
    Customer Support

    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.

    #1631723
    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 πŸ‘

    #1631812
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.