[Support request] Woocommerce articles background

Home Forums Support [Support request] Woocommerce articles background

Home Forums Support Woocommerce articles background

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1624156
    Matthieu

    Hello, do you think it is possible to apply a colored background in woocommerce articles?

    Let me explain, on the page : https://www.mmgraphik.com/

    I currently have articles with a colored background made directly on illustrator. My question is if this color background can be done directly in css for each article separately.

    Thanks πŸ˜€

    #1624179
    Ying
    Staff
    Customer Support

    Hi Matthieu,

    It’s possible.
    You’ll need to upload empty background PNG file instead of jpg, then use this CSS to target 2 of them post-2393and post-944

    .woocommerce ul.products li.product.post-2393, .woocommerce ul.products li.product.post-944{
        background-color: #000;
    }

    You can use develop tool of chrome to find the post id:
    https://www.screencast.com/t/bivCHeup

    #1624218
    Matthieu

    Hello thank you very much for your reply.

    I do not see the possibility of putting two images in a woocommerce article.

    On the other hand, I put my logo in svg then the background in color with: .woocommerce ul.products li.product.post-2404 {
    background-color: # 000;
    }

    It works.

    However, how you can see it here: https://www.mmgraphik.com/

    I have absolutely no idea how to adjust the size of my svg and its alignment.

    #1624492
    Elvin
    Staff
    Customer Support

    Hi,

    You can horizontally and vertically center the SVG by adding this CSS:

    a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {
        margin: auto;
    }

    But as for changing the size of the SVG, if you’re trying to match the SVG’s size with the .jpg ones.

    The best practice would be to make sure you upload the SVGs of the same purpose with the same dimensions (height, width, aspect ratio, cropping, visual balance) so you don’t have to do a hacky way of fixing this with CSS.

    A wise man once said:
    "Have you cleared your cache?"

    #1625437
    Matthieu

    Hello, thank you for your answer. I am not sure I fully understand ..

    How do I know what is the right size to apply to my svg so that it can be positioned perfectly as a jpeg ?

    Thanks

    #1625452
    Ying
    Staff
    Customer Support

    Hi Matthieu,

    You could use this CSS to control the size of the SVG, if you want to control other SVGs, you’ll need to find the right post ID to replace post-2404.

    .post-2404 .inside-wc-product-image img {
        width: 100px !important; /*adjust the number*/
    }

    But as Elvin mentioned, it’s better to export the SVG file to the same size before uploading, since the more CSS you added, the slower your site would be.

    #1625464
    Matthieu

    Ok thanks ! πŸ˜„ Do you think that it is possible in css to apply a shadow on the articles ?

    #1625510
    Ying
    Staff
    Customer Support

    Yes, it’s possible with this CSS:

    .inside-wc-product-image {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }

    But I don’t think it’s what you’d like to see πŸ™‚
    https://www.screencast.com/t/s2PJVFQUhMZ

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.