This topic has 8 replies, 3 voices, and was last updated 2 years, 6 months ago ago by Rose Tyler
Hello support team
I would like to change so style on the product page but I can not find where it can be set up on the Xstore Dashboard
so please tell me how to do it thank you
as the picture
https://ppt.cc/f0JnCx
I would like to adjust the purple area to leave blank
The purple area 1 is ok
The purple area 2 is ok too but I want it more leave blank
The purple area 3 is no blank and this is the point it is not leave blank so I want to set I up maybe 10 to 20 PX.
The purple area 4 I also want to adjust the leave blank.
The layout will not change but the main gallery image can become smaller because I need to let purple areas 1to 4 leave blank
so please teach me or tell me how to set it up on the Xstore theme Dashboard.
Thank you
and
I also want to change the blue area
The blue area 1 I want to adjust the font family, font size, and font color.
The blue area 2and 3 I want to adjust the box height, width, and the font size in the box.
The blue area 4 I also want to adjust the box height, width, and font size in the box
so please teach me or tell me how to set it up on the Xstore theme Dashboard.
and
I also want to change the yellow area
I want to adjust the yellow area 1 and 2, the button.
I want to adjust the button height, width, font color, and font size at the bottom
so please teach me or tell me how to set it up on the Xstore theme Dashboard.
The layout will not change but I want to adjust the purple area, blue area, and yellow area.
so please teach me or tell me how to set it up on the Xstore theme Dashboard.
Thank you so much
Hello,
Purple 2), 3), 4) Use column settings for these purposes https://prnt.sc/7j-q02ricUXT
Blue 1) – It inherits the body font-family, there is no option to change the separately. Only using custom CSS.
To change the font-size, color go to Theme Options > WooCommerce > Single product builder > Product meta > https://prnt.sc/IrfJrfLWGcVh
Blue 2), 3) – use custom code to change that. For example add the below custom CSS to Theme Options > Custom CSS
ul.st-swatch-size-large li.type-label a, ul.st-swatch-size-large li.type-label span {
font-size: 1rem;
padding: 12px;
}
Blue 4) – use custom code to increase size because there is no special option for this
.et_product-block .cart .quantity {
zoom: 1.2;
}
Yellow – Theme Options > WooCommerce > Single product builder > Add to cart & quantity > edit settings https://prnt.sc/MrumveNnBaXk
Regards
Hello Support Team
Good day
Thank you for giving the answer
I am still trying the way you gave me.
and I search the “BOX” on google
https://sites.google.com/site/coolteazhuanti/css/padding
I am studying now
maybe I will still have the issue
so please don’t close this ticket temporary
Thank you so much.
Hello,
Let us know if any further assistance will be needed.
Regards
Hello 8theme support team
I appreciate that you give me the CSS code
ul.st-swatch-size-large li.type-label a, ul.st-swatch-size-large li.type-label span {
font-size: 1rem;
padding: 12px;
}
and
et_product-block .cart .quantity {
zoom: 1.2;
}
However, there is an issue that the option which can choose is not obvious enough so it will make the customers confused.
That this situation happened always.
Please see my link
https://ppt.cc/faiFux
so can you teach me or guide me on how to let the option (box) be selected and it will let the border (I guess it is border I am not sure ooz I am not a CSS professional) become thicken and the border becomes to other colors (maybe red maybe green or maybe I can define it by myself) to let the customer get to know the correct to select the option (box)
Yeah this is my new issue
Please help me and thank you very much.
Hello,
You can set Default Form Values for variable product, edit product > https://prnt.sc/N4XUQN5aMv0d
Theme Options > WooCommerce > Shop elements > variation swatches > Swatches Border Color
Regards
Dear 8 Theme support team
Hi again and thank you reply so soon.
You are a good support team.
BUT it just solved my half problem
As I said, there is an issue that the option which can choose is not obvious enough so it will make the customers confused.
That this situation happened always.
You told me to
Theme Options > WooCommerce > Shop elements > variation swatches > Swatches Border Color
Yes it works it solved the color showing problem
but my idea is that the box border is too thin and it is not obvious enough to let customers recognize what is their select.
so I still need to you help me to solve this problem.
How to let the box border become thick when the customer selects the box and when the customer uses a mouse swipe over the box
Please help me or guide me thank you very much.
Hello,
There is no such option, try to add the next code in Theme Options > Theme custom CSS:
.single-product .st-swatch-preview li span:hover, .single-product .st-swatch-preview li.selected span {border-color: var(--et_main-color);}
.single-product .st-swatch-preview li span {border: 4px solid white;}
Regards
You must be logged in to reply to this topic.Log in/Sign up