I would like to change the product page some style

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

  • Avatar: Whizkids
    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.
    7 Answers
    Avatar: Olga Barlow
    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

    Avatar: Whizkids
    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.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 20, 2022 at 08:53

    Hello,

    Let us know if any further assistance will be needed.

    Regards

    Avatar: Whizkids
    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.
    Avatar: Rose Tyler
    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

    Avatar: Whizkids
    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.
    Avatar: Rose Tyler
    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

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

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