Custom CSS only on a specific product page (Woocommerce)

  • Resolved wehodl

    (@wehodl)


    3 years, 8 months ago

    Dear Variation Switches Team,

    First of all thank you for this amazing plugin.

    I love variation switches and it works perfect.

    Question I need help with:

    Could you please provide me with a custom css code which helps to adjust the variation swatches buttons just on a specific product page within Woocommerce.

    I have tryed it with the following css code (see below) however it did not work. I put the page ID (Woocommerce) infront of the code.

    I only want to align the buttons on a specific product page within Woocommerce.

    .postid-11508 .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):last-of-type {
    margin-right: 0;
    }

    Thanks a lot in advance for your help.

    Kind regards

    Markus

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @wehodl

    Thanks for reaching to us. Could please provide exact link and let us know what you want to do with buttons. It will be better if you provide us a screenshot.

    Looking forward to hearing from you soon.

    Thanks

    Thread Starter wehodl

    (@wehodl)

    Hi Hakikizaman,

    Thanks a lot for you answer. As requested I′m providing you with screenshots. I dont want to share a link to my website.

    As you see the button in the first screenshot does not sit at the same place as the button in the second screenshot.

    FIRST SCREENSHOT: https://ibb.co/jWjdxg7

    SECOND SCREENSHOT: https://ibb.co/j5gCfPR

    I need a custom css code which I can use on the woocommerce product page (first screenshot) that moves the button to the exact same place as it is in the second screenshot.

    The custom css code should only make the button move on the woocommerce product page of the first screenshot and should not affect the movement of the two buttons seen in the second screenshot.

    Thanks a lot in advance!

    Kind regards

    Markus

    Hi @wehodl

    Thanks for sharing the screenshots.
    How can I provide you a custom CSS without testing? Theme to theme CSS defers. So, to test from my side; I need exact page link to check.

    Hopefully I could clarify why I need the page link.

    Thanks

    Thread Starter wehodl

    (@wehodl)

    Hi Hakikizaman,

    Thanks a lot for your answer!

    I′m sharing my website with you.

    Please have a look at the following links:

    https://test.puapill.com/product/214/

    I need a custom CSS code which moves the button of the size (S) in the middle however only on this product page of Woocommerce (214)

    In addition to that I need a custom CSS code which moves the button of the size (S) to the very right only on this product page of Woocommerce (yellow-slim-coat).

    https://test.puapill.com/product/yellow-slim-coat/

    Could you provide me with the right custom css codes that makes the button move to the different spots where I would like them to have?

    Thanks a lot in advance and I hope its understandable now!

    With kind regards

    Markus

    Thread Starter wehodl

    (@wehodl)

    Hi,

    I′m still waiting for help and an answer.

    Thank you.

    Kind regards

    Markus

    Hi @wehodl

    Sorry for my late reply. It was Eid vacation here.

    https://test.puapill.com/product/214/

    I need a custom CSS code which moves the button of the size (S) in the middle however only on this product page of Woocommerce (214)

    .postid-214 .variable-items-wrapper {
    justify-content: center;
}

    In addition to that I need a custom CSS code which moves the button of the size (S) to the very right only on this product page of Woocommerce (yellow-slim-coat).

    https://test.puapill.com/product/yellow-slim-coat/

    Replace this code from your customizer

    .single-product #product-213 .variable-items-wrapper.button-variable-wrapper[data-attribute_name="attribute_pa_size"] {
    justify-content: center;
}

    to this

    .single-product #product-213 .variable-items-wrapper.button-variable-wrapper[data-attribute_name="attribute_pa_size"] {
    justify-content: flex-end;
}

    If it resolves your issue, my humble request to you to write a beautiful thought here.

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Custom CSS only on a specific product page (Woocommerce)’ is closed to new replies.