Return to previous page

I would like to change the product page some style

This topic has 8 replies, 3 voices, and was last updated 2 years, 5 months ago ago by Rose Tyler

Whizkids

Participant

May 16, 2022 at 09:57

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

Please, contact administrator
for this information.

#323972 Copied Theme version: 8.1.5 WooCommerce version: 6.5.1

7 Answers
Olga Barlow

Support staff

May 17, 2022 at 16:33
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
#324094 Copied
Whizkids

Participant

May 19, 2022 at 13:19

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.

Please contact administrator
for this information.

#324222 Copied

Rose Tyler

Support staff

May 20, 2022 at 08:53

Hello,

Let us know if any further assistance will be needed.

Regards

#324269 Copied
Whizkids

Participant

May 29, 2022 at 08:53
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.

Please contact administrator
for this information.
#324785 Copied
Rose Tyler

Support staff

May 29, 2022 at 09:32

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

#324788 Copied

Whizkids

Participant

May 29, 2022 at 10:27

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.

Please contact administrator
for this information.

#324791 Copied
Rose Tyler

Support staff

May 29, 2022 at 13:50
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
#324799 Copied
Tagged: change product page, product page design, product page style, woocommerce customization, wordpress customization, wordpress woocommerce themes
Viewing 8 results - 1 through 8 (of 8 total)