Return to previous page

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

This topic has 27 replies, 3 voices, and was last updated 2 years ago ago by Tony Rodriguez

Dionizio Find

Participant

January 29, 2023 at 16:12

Hello, I’m trying to customize a category style that I thought was really cool in xstemos demos, but I’m not finding it in xstore studio. How to Leave my category in the layout please?

customize carousel of products in this format, also not being able to

#345358 Copied Theme version: 9.0.2 WooCommerce version: 7.2.3

26 Answers

Rose Tyler

Support staff

January 29, 2023 at 16:29

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

#345360 Copied

Dionizio Find

Participant

January 29, 2023 at 16:55

OK.

Please contact administrator
for this information.

#345361 Copied

Rose Tyler

Support staff

January 29, 2023 at 17:04

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

#345363 Copied

Dionizio Find

Participant

January 29, 2023 at 17:30

Ok. I looked at the test page and it’s still not how I wanted it. I need the carrousel to have borders like in the screenshot shown above. I wanted it customized exactly as shown in the pictures.

#345364 Copied

Rose Tyler

Support staff

January 29, 2023 at 20:39

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

#345376 Copied

Dionizio Find

Participant

January 30, 2023 at 21:06

Hello, how are doing?
01- I don’t want to use the images! I need custom category layout. likewise to Carousel. just that gray border. Did you undersand?

02- Topic number 2 I got it, ok

#345509 Copied
Rose Tyler

Support staff

January 31, 2023 at 10:42
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
#345569 Copied
Dionizio Find

Participant

February 1, 2023 at 03:42

Okay, I will try to do this!

#345652 Copied

Rose Tyler

Support staff

February 1, 2023 at 08:44

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

#345679 Copied

Dionizio Find

Participant

February 7, 2023 at 05:30

okay, put a border radius on the images and leave the carousel with the same height as the products

#346205 Copied
Rose Tyler

Support staff

February 7, 2023 at 13:21
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
#346248 Copied
Dionizio Find

Participant

February 7, 2023 at 13:57

hello, I’m appreciate 🙂 Jesus loves you thank you so much for your support, sorry to be so annoying!

#346258 Copied

Rose Tyler

Support staff

February 7, 2023 at 14:25

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

#346261 Copied

Dionizio Find

Participant

February 7, 2023 at 15:54

sorry i have one more question, i can’t customize my category in this layout. My photo is in png and size 366×366 but it didn’t work for me. I want to add a light gray background with a border radius.

ok i will evaluate 🙂

Please contact administrator
for this information.

#346281 Copied

Rose Tyler

Support staff

February 7, 2023 at 16:56

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

#346314 Copied

Dionizio Find

Participant

February 8, 2023 at 18:24

Hello Rose, how are you? I have a problem with the mobile version of the site. in some products mainly with attributes. it looks like the stick menu mobile is bugging the price, buy button.

and also the word quantity does not appear before the selector box, and how can I remove the words description and additional information !

#346446 Copied

Dionizio Find

Participant

February 8, 2023 at 21:48

how to add a solid border to products like the carousel for example.

borders have been applied to all carousels, except the related products carousel

#346451 Copied

Rose Tyler

Support staff

February 9, 2023 at 13:35

Hello,

1/ @media only screen and (max-width: 768px) {
/* either hide extra price information block -> https://prnt.sc/8Rt_IGPzCBIn */
.etheme-sticky-cart .fswp_installments_price {
display: none;
}

/* or make scroll effect in section -> https://prnt.sc/9QwXKTd9n_CY */
.etheme-sticky-cart .et-wrap-columns {
overflow: auto;
}

.etheme-sticky-cart .et_column {
justify-content: flex-start;
}
}

2/
.related-products .content-product {
border: 1px solid #E5E5E5;
border-radius: 20px;
padding: 5px;
transition: all .3s linear;
}
.related-products .content-product .product-details {
padding-bottom: 15px;
}
/* if you want to add zoom effect on product’s hover */
.related-products .swiper-container {
padding: 16px 12px;
}
.related-products .product:hover .content-product {
-webkit-box-shadow: 0 0 7px 0 var(–et_dark-2-white-01);
box-shadow: 0 0 7px 0 var(–et_dark-2-white-01);
z-index: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}

Kind Regards,
8theme team

#346519 Copied

Dionizio Find

Participant

February 9, 2023 at 15:28

hello, Rose good afternoon how are doing?

I have small bugs mainly on mobile, which is more important because 90% of sales come from the mobile version!

https://prnt.sc/BWDyMLHt9SU8

01- The word quantity appears on some products, others don’t, and it’s even in English, which is worse. 1% speak English in Brazil

02- how to put the color of the price of the product green when it is without discount and put the color red when it is on discount.
for example, if the product costs $49.99, it turns green, but if another product was $39.99, it drops the value to $29.00. the price 39.99 needs to be crossed out and in red and the new price 29 in green. but it doesn’t. the product without discount automatically pulls the red color 🙁

03- some products that are discounted are showing a bug in the sticky menu, only on mobile does this happen. the buy and price button does not appear on the screen, and it is not because of the installment plan

#346535 Copied
Rose Tyler

Support staff

February 9, 2023 at 18:39
Hello, Dionizio Find,

1/

@media only screen and (max-width: 480px) { .single-product-builder .et_product-block form.cart .woocommerce-variation-add-to-cart .quantity-wrapper:before { display: block; } }

https://prnt.sc/OMRXcERL-jR6 – transaltion is in XStore Core plugin

2/ Please provide URLs of pages and screenshots for a better understanding of your request.

3/ https://prnt.sc/HFxHq-OoeXgV or disable the sticky add-to-cart panel via single product settings in Theme options.

Kind Regards,
8theme team
#346549 Copied
Dionizio Find

Participant

February 9, 2023 at 19:56

okay,

how to make for the product that is without discount, appear with price in green color.

02- I tried to hide it with Elementor it didn’t work and I put a code but also removed it from the sliders. i want to remove only from the mobile carousel

#346557 Copied
Rose Tyler

Support staff

February 10, 2023 at 11:38
Hello,

1/ Please provide URL of the such product page.

2/ Add the next code in Custom CSS for the element:

@media only screen and (max-width: 480px) { .swiper-entry .swiper-button-prev, .swiper-entry .swiper-button-next { display: none; } }

Kind Regards,
8theme team
#346600 Copied
Dionizio Find

Participant

February 10, 2023 at 14:01

Hello Rose, Thank you !

01- from yesterday to today there was a bug in my header. The cart icon, the wishlist icon and the information that appears when you click it disappears automatically!

https://streamable.com/d41saw

02- in fact, all products that are not discounted have a gray price. I need it to turn green without even being on offer. except that if you change the color to green, the discounted product also pulls the green color, here it ends up being all green!

Product 01: https://dioniziofind.com.br/product/saco-de-banho-multifuncional-para-pet/

Product 02: https://dioniziofind.com.br/product/tabua-magica-de-descongelamento/

Please contact administrator
for this information.

#346612 Copied
Rose Tyler

Support staff

February 10, 2023 at 16:11
Hello, Dionizio Find,

1/ Please check the Private Content

2/ Try to use this code:

.et_product-block > .price { color: green; } .et_product-block > .price del { color: #999999; }

Kind Regards,
8theme team
Please contact administrator
for this information.
#346625 Copied
Dionizio Find

Participant

February 10, 2023 at 19:50

Thank you very much, great work and good rest to you.

#346638 Copied

Tony Rodriguez

Support staff

February 11, 2023 at 07:43

Hello Dionizio Find,

We are delighted that we were able to assist you with your issues and that you were pleased with our support. Please do not hesitate to reach out to us again should you have any further queries.

Thank you for getting in touch. Have a great weekend.

This matter is now closed.

Best Regards,
8Theme’s Team

#346653 Copied
Tagged: best selling, cool, customize, style, themes, woocommerce, xstemos
Viewing 27 results - 1 through 27 (of 27 total)

The issue related to '‘Hello, I’m trying to customize a category style that I thought was really cool in xstemos demos’' has been successfully resolved, and the topic is now closed for further responses

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Bakery Store – WordPress WooCommerce Theme

lazy-placeholder

Jewellery Niche Market – Multivendor WP WooCommerce Theme

lazy-placeholder

WooPress – Responsive Creative HTML5 Template

lazy-placeholder

Sushi Store – WordPress WooCommerce Theme

lazy-placeholder

Beauty – WooCommerce Theme

lazy-placeholder

Glasses Store – WordPress WooCommerce Theme

lazy-placeholder

Organic Cosmetics Store – WordPress WooCommerce Theme

lazy-placeholder

Designers – WordPress WooCommerce Theme

lazy-placeholder

Digital Marketing – WordPress WooCommerce Theme

lazy-placeholder

Grocery Market – Multivendor WP WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.