Topic: Hello, I’m trying to customize a category style that I thought was really cool in xstemos demos

Hello,

Thanks for using our theme.

Could you provide temporary wp-admin access? We will create an example on your site.

Kind Regards,
8theme team

Hello,

We’ve added “test” page on your site, elements there have the same settings as the demo, but with your category images and products.
Please check.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team

Hello,

Thanks for the reply.

1/ About categories, our demo uses the next images – https://v9m6d2m2.rocketcdn.me/elementor/demos/minimal-electronics/wp-content/uploads/sites/71/2022/02/1-min.jpeg you can try to upload such image for your category and check the result.

2/ About products, after your notice I’ve checked more deeply and found out that the demo uses custom CSS code in Theme Options > Theme custom CSS for borders, so I’ve added the code for element on your site – https://prnt.sc/OXjyXxst7wX_

Kind Regards,
8theme team

Hello,

1/ This element automatically takes images that you uploaded for your categories in Dashboard > Products > Categories > Thumbnail.
If you want to get the result like on the demo, but do not want to prepare your images, custom CSS code can be used for the element, for example:

.category-grid.slide-item {
    background-color: grey;
    border-radius: 10px;
}

but in your case images have white background, so the result isn’t the best – https://prnt.sc/KtdGqTYiGvFp
Just border can be added via settings of this element – https://prnt.sc/tFdIwumVNfdZ

Kind Regards,
8theme team

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team

Hello, Dionizio Find,

1/ Please try to use the next custom CSS code to add border-radius:

.content-product .product-image-wrapper {
    border-radius: 10px !important;
}

2/

.main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
    display: flex;
    justify-content: center;
}
.products-loop .ajax-content, .products-loop {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}
.content-product {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
    flex: 1;
}
.content-product .quantity-wrapper {
    margin-right: auto;
    margin-left: auto;
}
.swiper-container {
    display: flex;
    align-items: stretch;
}
.product-slide .product {
    display: flex;
    height: 100%;
}
.swiper-wrapper {
    height: auto;
}

Kind Regards,
8theme team

Hello, Dionizio Find,

We would be grateful if you could take a moment to rate our product – https://themeforest.net/downloads – with 5 stars on ThemeForest!

Kind Regards,
8theme team

Hello,

Your images have white background already – https://prnt.sc/B4A3cKHWIyVP , so it can’t be changed using custom CSS code or something else.
You need to prepare images using a graphic editor.

Border can be added via settings of this element – https://prnt.sc/tFdIwumVNfdZ

Kind Regards,
8theme team